1

I would like to receive events and get player options from a YouTube HTML5 player that is loaded when you browse to a video page on youtube.com.

I know can control the player via the HTML5 media events. For example, when I run this code in the console, it prints seeked to the console whenever a seek event is triggered:

var v = document.getElementsByTagName("video")[0];
v.addEventListener("seeked", function() { console.log("seeked") }, true);

However, the YouTube player offers more in its API, for example various events that I want to subscribe to. How do I do that? Those events apparently are not fired on the video element.

For example, how can I print something on the console when the onPlaybackQualityChange event is fired?

Note: I am not talking about attaching to a player loaded via the iFrame API.

Community
  • 1
  • 1
slhck
  • 36,575
  • 28
  • 148
  • 201
  • Are you trying to get events from someone else's page (youtrube's)? How are you expecting to add your JavaScript to their page? – Richard Oct 11 '16 at 10:13
  • @Richard Through a browser extension. Not sure why someone would vote this question as being off topic — I'm not asking for a recommendation for a book, library, or off-site resource. – slhck Oct 11 '16 at 10:59

1 Answers1

3

The actual player object that can be interacted with has the ID movie_player. This ID may of course change over time. As of October 2016, the ID is the same for Chrome, Firefox, and Safari.

For example:

var p = document.getElementById("movie_player");
p.addEventListener("onPlaybackQualityChange", function() { console.log("quality changed") }, true);

Other event listeners can of course be added according to the iFrame API.

The player can also be interacted with as usual:

p.playVideo()
slhck
  • 36,575
  • 28
  • 148
  • 201