I'm writing a Chrome extension and I want to detect when a video starts/ends while a user is on youtube.com watching videos. The difference between my situation and other tutorials I've read is I'm not embedding my own youtube video on my own site, I just want to detect events off of the video the user is watching on youtube.
Right now my manifest.json file has the following lines for content scripts:
"content_scripts": [
{
"matches": ["http://*/*","https://*/*"],
"js": ["js/jquery.js", "js/iframe_api.js", "js/contentScript.js"],
"all_frames": true
}
],
I have jquery downloaded and iframe_api.js is the contents of https://www.youtube.com/iframe_api. My contentScript.js file is very simple, I just want to print something to the console when the video is ready:
function onYouTubeIframeAPIReady() {
var player;
player = new YT.Player('ytplayer', {
events: {
'onReady': onPlayerReady,
}
});
}
function onPlayerReady(event) {
console.log('It worked!');
}
Could someone help me out? Can a content script even do this, or can I not access a youtube video's iframe because it isn't in the "isolated environment" that content scripts live in?
Shortly after I posted this question I found out an answer. Not using the youtube iframe api, but rather the html5 api. I modified the content script to the following to print a message when the video ends and it works fine.
var vid = $('video').get(0);
vid.addEventListener('ended', function(e) {
console.log('The video ended!');
});
I found a similar questions here, the answers are great (HTML5 is amazing!!) How to play and pause a Youtube video in the console?
for instance, you can use these to play/pause the video (on youtube.com, without youtube iframe on an external website)
document.getElementsByTagName('video')[0].play()
document.getElementsByTagName('video')[0].pause()
there are more functions allowing you to track video length, current play time and more.
P.S: I was having this same question for over a day and it's surprisingly to hard to find the right answer/guide to this! but hope this helps
来源:https://stackoverflow.com/questions/36536464/detect-youtube-video-events-with-chrome-extension-content-script