1

Web サイトで 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 に答える