通过 WebExtension 向所有嵌入的 YouTube 视频添加事件监听器答案

【问题标题】：Adding event listener to all embedded YouTube video via a WebExtension通过 WebExtension 向所有嵌入的 YouTube 视频添加事件监听器
【发布时间】：2016-06-24 09:31:15
【问题描述】：

我想实现一个在任何网站上播放任何 HTML5 (YouTube) 视频时都会调用的函数。我尝试使用 API：

document.documentElement.addEventListener("playing", function(){
    alert("Video playing")
});

并使用 jQuery：

$('video').on('playing', function(){
    alert("Video Playing");
});

但是，两者都不起作用。

【问题讨论】：

标签： javascript google-chrome-extension html5-video dom-events firefox-addon-webextensions

【解决方案1】：

我自己找到了解决方案。对于那些有兴趣的人：

内容脚本需要像这样在清单中初始化：

"content_scripts": [
   {
     "matches": ["<all_urls>],
     "js": ["name_of_javascript.js"]
     "run_at" "document_idle"  // "document_end" also works
     "all_frames":true
    }
 ],
   ...

添加标签“all_frames”很重要：true，以便将内容脚本注入所有子帧。

Content_Script-Code：

var videos = document.getElementsByTagName("video");
if(videos.length>0) {
   for (var i=0; i<videos.length; i++){
        videos[i].addEventListener("playing", function(e){
          ................
          }
      }
 };

这对我有用。

如果您只想为 Youtube-Videos 添加监听器，只需将 document.getElementsbyTagName 替换为 document.querySelectAll('video[src*="youtube"]')。

【讨论】：

【解决方案2】：

只需使用YouTube API：

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
function onYouTubeIframeAPIReady() {
    player = new YT.Player('wraperElementId', {
        height: '220',
        width: '220',
        videoId: 'video id from the url',
        playerVars: {showinfo:0, autoplay:0},
        events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
        }
    });
function onPlayerStateChange(event) {

}

更新：
您需要获取网站视频才能操作它们。这是一个使用 jQuery 的示例：

var iframes=$('iframe').filter(function(index){// get all youtube iframes
    return ( (/^https?:\/\/(?:www\.)?youtube(?:-  nocookie)?\.com(\/|$)/i.test(this.src))
             && (this.offsetHeight >= 315) && (this.offsetWidth >= 400) );
});

【讨论】：

感谢您的回答。但主要问题是，我没有自己实施网站。如果在任何网页上启动了任何视频，我只想通过 WebExtensions contentscript 启动一个功能。
你需要先获取网站的视频。我更新了答案来告诉你如何
拒绝投票，因为 YT API 无法在这种形式的内容脚本中工作（因为加载的 API 脚本无法访问 isolated worlds、onYouTubeIframeAPIReady 和 onPlayerStateChange）并且问题是特别关于（Web）扩展。