Detect youtube video events with Chrome extension content script

Question

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 tutor

Answer 1

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

Answer 2

This is way late to the party, but I just recently encountered this issue myself and saw that there was never a follow up as to where to find the "HTML5 API" events.

GabeMeister's answer is the correct solution, but using getEventListeners(document.querySelector("video")) in the console on any given YouTube video page will show you a list of events you can listen for in your script.

As of the time of writing this, these are the events returned from the above line:

• playing
• pause
• enterpictureinpicture
• leavepictureinpicture
• loadeddata
• volumechange
• timeupdate
• play
• durationchange
• seeking
• seeked
• error
• loadedmetadata
• waiting
• progress
• focus
• loadstart
• ended
• suspend
• ratechange
• resize

These are separate from the iFrame API and can be listened for from a content script or through the console. Hope this helps!

Answer 3

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!');
});