通过Webextension将活动侦听器添加到所有嵌入式YouTube视频中

Question

我想实现一个函数，每当在任何网站上播放任何HTML5（YouTube）视频时都称为函数。我尝试了API：

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

和jQuery：

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

但是，两者都无法正常工作。

Answer 1

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

content-script需要在这样的清单中初始化：

"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注入所有子帧。

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"]']。

Answer 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) );
});