1

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

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

并使用 jQuery：

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

但是，两者都不起作用。

4

2 回答 2

2

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

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-代码：

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

于 2016-08-02T12:56:14.160 回答
0

只需使用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) );
});
于 2016-06-24T10:34:02.407 回答