Detect youtube video events with Chrome extension content script

前端 未结 3 774
终归单人心
终归单人心 2021-02-15 10:55

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

相关标签:
3条回答
  • 2021-02-15 11:41

    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!');
    });
    
    0 讨论(0)
  • 2021-02-15 11:48

    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

    0 讨论(0)
  • 2021-02-15 11:49

    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!

    0 讨论(0)
提交回复
热议问题