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

Question

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

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

和 jQuery:

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

但是，两者都不起作用。

Answer 1

只需使用 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) );
});

Answer 2

我自己找到了解决办法。有兴趣者：

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

"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 视频添加监听器，只需将 document.getElementsbyTagName 替换为 document.querySelectAll('video[src*="youtube"]').

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

Adding event listener to all embedded YouTube video via a WebExtension

javascript

google-chrome-extension

html5-video

dom-events

firefox-addon-webextensions