Javascript 通过WebExtension向所有嵌入的YouTube视频添加事件侦听器

我想实现一个函数，在任何网站上播放任何HTML5（YouTube）视频时都会调用该函数。我尝试了以下两种方法之一：

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

对于jQuery：

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

但是，两者都不起作用。

只需使用：

更新：
您需要获取站点视频才能对其进行操作。 下面是一个使用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) );
});

---

我自己找到了解决办法。对于感兴趣的人员：

内容脚本需要在清单中初始化，如下所示：

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

“内容脚本”：[
{
“匹配项”：[“]，
“js”：[“javascript.js的名称”]
“在”“文档空闲”//“文档结束时运行”也有效
“所有帧”：正确
}
],
...

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

内容\脚本代码：

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

var videos=document.getElementsByTagName（“视频”）；
如果（视频长度>0）{
对于（var i=0；我想知道你的答案。但主要问题是，我不是自己实现网站的。我只是想通过WebExtensions contentscript启动一个功能，如果任何网页上有视频启动。你需要先获取网站的视频。我更新了答案，向你展示了howDownvoting，因为YT API在内容中不起作用这种形式的脚本（因为加载的API脚本无法访问，
onyoutubeiframeapiredy
和
onPlayerStateChange
），问题具体是关于（Web）扩展的。
var videos = document.getElementsByTagName("video");
if(videos.length>0) {
   for (var i=0; i<videos.length; i++){
        videos[i].addEventListener("playing", function(e){
          ................
          }
      }
 };