Hinzufügen von Ereignis-Listener zu allen eingebetteten YouTube-Videos über eine WebExtension

Question

Ich möchte eine Funktion implementieren, die aufgerufen wird, wenn ein HTML5-Video (YouTube) auf einer beliebigen Website abgespielt wird. Ich habe versucht, entweder mit der API:

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

und mit jQuery:

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

Aber beide arbeiten nicht.

Answer 1

ich eine Lösung von mir gefunden. Für diejenigen, die interessiert sind:

Das Inhalt-Script muss wie das im Manifest initialisiert werden:

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

es ist wichtig, den Tag „all_frames“ hinzuzufügen: true, so dass der Inhalt -script wird in alle Unterframes injiziert.

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){ 
      ................ 
      } 
     } 
}; 

Das ist für mich gearbeitet.

Wenn Sie den Listener nur für Youtube-Videos hinzufügen möchten, ersetzen Sie den document.getElementsbyTagName durch document.querySelectAll ('video [src * = "youtube"]').

Answer 2

Sie werden die 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) { 

} 

UPDATE:
Sie müssen die Website-Videos, um zu bekommen, um sie zu manipulieren. Hier ist ein Beispiel mit 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)); 
});