无法通过Google Chrome扩展程序内部的YouTube JS API访问YouTube视频，但可以在JS Fiddle内部播放 [英] Can't access YouTube video through YouTube JS API inside of Google Chrome Extension, but can inside of JS Fiddle

问题描述

我尝试了解YouTube视频播放的阻止机制背后的逻辑。

在这里，我尝试播放已阻止的歌曲来自JS小提琴内的嵌入式播放。观察它的工作原理：

如果您想点击下载扩展程序。

加载： b
$ b

• 解压缩


• 转到Google Chrome的扩展页面启用'开发者模式'


• 点击加载解压后的扩展名，并指向解压目录。 / li>
  

最后说明：该歌曲在Facebook上发挥很好。

编辑：我发现这个： http：// gdata。 youtube.com/feeds / api / videos / UfESt2KdOdc？v = 2& prettyprint = true 。它配对： http://apiblog.youtube.com/2011/ 12 /理解回放-restrictions.html 。

只是建立在第一个响应上。基本上，有一种名为联合的设置，可以防止在外部设备（例如电视和Google Chrome扩展程序）上播放。

现在想办法绕过这个问题。

解决方案

Youtube iframe实施似乎阻止某些引荐网址显示授权内容。

问题

这些引用模式似乎不适用于您正在测试的特定视频。

  chrome-extension：// 
 file：// 
  

好像内容licenser UMG选择阻止任何来自扩展名或本地文件的播放。另一种方法是避免使用包含许可内容的视频，但这很无聊。

这很麻烦，但是有一种解决方法可以让iframe播放器实现扩展。所有Youtube关心的是，玩家是嵌入在互联网上的某个页面上的。

代理页

尝试使用示例中的jsfiddle结果框替换 popup.htm 中的iframe src，然后重新加载插件。

 < iframe width =200height =200src =http://fiddle.jshell.net/ E7B9C / 17 /显示/>< / iframe中> 
  

您应该看到之前不可用的视频正在播放。您的扩展现在引用您在jshell.net上控制的页面。所有Youtube都知道你是从jshell.net中调用他们的播放器。

控制

现在我们有一个播放器，您可能会注意到您没有任何可用的Youtube控件，因为您现在引用了自己的引用Youtube iframe和它的API的iframe。就好像它已经不够好玩了，现在您可以制作自己的iframe API，从chrome扩展到您的iframe与Youtube的iframe进行通信！

在正常情况下，父母可以设置子框架的window.location.hash，并且该框架监视并分析所有经过的更改。然后孩子直接在父母中调用一些回调带有一些新的信息。

编辑：代替使用window.location.hash，您可以使用HTML5的window.postMessage（）并避免不得不处理检查和解析哈希不断。

这应该让你启动和运行。

I am attempt to understand the logic behind whatever trips the 'blocking' mechanism for YouTube's video playback.

Here I am attempt to play back a song which is blocked from embedded playback inside of a JS Fiddle. Observe that it works:

http://jsfiddle.net/E7B9C/17/

Now, I use the exact same code inside of my Google Chrome extension:

http://www.meomixes.com/ if you'd like to click to download extension.

http://www.meomixes.com/Test.crx for direct link to extension.

Observe that I cannot playback the same youtube video:

I was wondering what my debugging options were for this scenario. Does anyone have any ideas on what I should explore? I've tried requesting the following permissions in my manifest, but it did not have any effect:

"permissions": [
"http://*.youtube.com",
"https://*.youtube.com",
"http://*.google.com",
"https://*.google.com"
]

I've placed the full source of Test.crx here: http://www.meomixes.com/Test.zip To load:

• Unzip
• Go to Google Chrome's extension page and enable 'Developer Mode'
• Click 'Load Unpacked Extension' and point to the unzipped directory.
• Observe that the video does not play back.

Last of note: The song plays happily in a Facebook post.

EDIT: I found this: http://gdata.youtube.com/feeds/api/videos/UfESt2KdOdc?v=2&prettyprint=true for the video in question. It pairs with: http://apiblog.youtube.com/2011/12/understanding-playback-restrictions.html.

Just building on the first response. Basically, there is a setting called 'syndication' which prevents from playing on 'external devices' such as TVs and Google Chrome Extensions.

Looking at ways to bypass this issue now.

解决方案

The Youtube iframe implementation seems to block certain referring urls from displaying licensed content.

The Problem

These referring schemas didn't seem to work with the particular video you're testing with.

 chrome-extension://
 file://

It seems like content licenser, UMG, opted to prevent any plays from extensions or local files. An alternative is to avoid using videos that contain licensed content, but that's boring.

It's inconvenient but there is a workaround that will allow you to implement the iframe player into the extension. All Youtube cares about is that the the player is embedded on a page somewhere on the internet.

Proxy Page

Try replacing the iframe src in popup.htm with the jsfiddle result frame from your example and reload your plugin.

 <iframe width="200" height="200" src="http://fiddle.jshell.net/E7B9C/17/show/"></iframe>

You should see the previously "unavailable" video playing now. Your extension now references a page you control on jshell.net. All Youtube knows is that you're calling their player from jshell.net.

Controls

Now that we have a player, you may notice that you don't have any of the Youtube controls available to you since you're now referencing your own iframe that's referencing the Youtube iframe and it's API. As if it weren't fun enough already, you now get to make your own iframe API to communicate from the chrome-extension to your iframe to Youtube's iframe!

Under normal circumstances a parent can set the child frame's window.location.hash and that frame watches and parses any changes that come through. The child then calls some callback in the parent directly with some new information.

Edit: Instead of using window.location.hash, you could use HTML5's window.postMessage() instead and avoid having to deal with checking and parsing the hash continuously.

That should get you up and running.

这篇关于无法通过Google Chrome扩展程序内部的YouTube JS API访问YouTube视频，但可以在JS Fiddle内部播放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！