Interacting with the YouTube JavaScript Player API

Submitted by jonndp on Wed, 08/24/2016 - 17:29
Forums: 
General discussion

Hi, I'm wondering whether anybody has looked into how the YouTube API can be used alongside H5P.

Specifically how to add a callback on video completion - i.e. extending the onStateChange.

What's the best way to extend the YouTube API implemented in scripts/youtube.js? This seems to run before any JavaScript from hook_h5p_scripts_alter (in the Drupal module).

Any thoughts would be appreciated.
Jon

thomasmars's picture

thomasmars

Thu, 08/25/2016 - 10:24

Several events are triggered, so they bubble through to the Video instance, as can be seen here: https://github.com/h5p/h5p-video/blob/master/scripts/youtube.js#L74.

You can listen for these events on the video instance video.on('stateChange', function () {doyourthing});

Thomas

jonndp

Tue, 09/06/2016 - 15:29

Hi Thomas,

Thanks for this. Sorry if this is a stupid question, but should I be able to access the video instance via the H5P object? I can't seem to find the player in scope from the console or overrides JS.

Regards
Jon

thomasmars's picture

thomasmars

Wed, 09/07/2016 - 10:16

You're not able to access the video instance via the H5P object as far as I know. You would have to be in a scope where you have access to the Video instance by having created it or through it having been passed to you. The approach really depends on your use-case.

jonndp

Thu, 09/08/2016 - 11:54

Hi Thomas,

Ah I see. Please forgive me if I'm missing something but I was thinking that it would be nice to do this without editing the youtube.js file - I'm trying to avoid any changes that prevent future upgrades to the H5P package.

At the moment, youtube.js uses the YouTube Player API to create the video player - so I haven't created that with my own code. The goal is to bind code to the state change so that I can load the video results when the video finishes playing.

Does that make sense?

Regards
Jon

thomasmars's picture

thomasmars

Fri, 09/09/2016 - 09:43

Yes, you are correct, modifications should be done with a hook, or you could create a pull request if you believe it is something that would benfit others as well.

Binding to the stateChange event of Video depends on your context. Assuming that you are in Interactive Video you can get the Video instance through the following steps:

  • Instances of H5P will be created on H5P.instances. Which is an array. Make sure you're within the iFrame context.
  • Access Interactive Video instance through its index in H5P.instances, i.e. H5P.instances[0]
  • Video instance should then be accessible through H5P.instances[0].video
  • You can then listen to state changes through H5P.instances[0].video.on('stateChange', function () {console.log('your code'});

- Thomas

jonndp

Fri, 09/09/2016 - 18:25

Thanks Thomas,

That's really helpful - it works!

I'm going to implement fully and then I'll share back notes for others to do something like this.

Jon

vargaszabolcs

Mon, 01/09/2017 - 17:42

Hi Jon!

I'm looking for a similar thing you asked! Have you already done what you wanted? If so, could you tell me how? And if I may ask: could you be detailed? I have basic coding knowledge =)

jonndp

Thu, 01/12/2017 - 11:26

Hi Vargas,

In the end a colleague of mine finished this task. I'll ask him to put the code up on Github or I'll attach it here.

Our solution is for Drupal only. It detects the video state change and then makes an AJAX request to a custom path on the Drupal website. In our case this was to show the results of the quiz, but it could also just load a specific node or output some text.

What is it that you want to do when the video finishes? Do you need the AJAX functionality or do you just want to show a message or something?

Jon

vargaszabolcs

Thu, 01/12/2017 - 11:38

Hi Jon!

Thanks for your answer! I already have a javascript code wich uses the Youtube iframe api. It mutes the player onReady, and has a method onStatechange: if the player is playing, an audio on the website starts to play. If the YT player is not playing, the audio pauses. I'd like to be able to use this in connection with h5p interactive video (with youtube embedded video).

Regards,

Szabolcs Varga

jonndp

Thu, 01/12/2017 - 18:46

Hi Varga, 

I've attached an example module. You might want to rename it / improve description!

Your JS should be able to go in the file you'll find in the js directory of the module. In that JS you'll see comments for where code can be run on video start and end.

Hope this helps.
Jon

Attachments: 
Package icon custom_h5p_interaction.zip

vargaszabolcs

Mon, 01/16/2017 - 15:38

Thanks Jon! Appreciate your help!

Regards,
Szabolcs Varga!

thomasmars's picture

thomasmars

Mon, 01/16/2017 - 14:37

Thanks! This is a great starting point for making modifications to Interactive Video. I'm sure there are many people out there who are looking for something similar.

If you ever feel like writing a little guide on how to extend/modify H5Ps with your hooks and sharing it with the rest of the H5P comunnity I would be happy to put it in the H5P documentation or link to it if you'd rather host it yourself :)

- Thomas