Skip to content Skip to sidebar Skip to footer

Youtube Embedded Video Start / Stop Event

I was wondering, does embedding a youtube video via iframe expose certain events, like onStart or onStop, where you can specify some callback?

Solution 1:

This an example to handle start and stop events:

HTML file (index.html):

<!DOCTYPE html><html><head><title>Stackoverflow</title><scripttype="text/javascript"src="http://www.youtube.com/player_api"></script><scripttype="text/javascript"src="sof.js"></script></head><body><divid="player"></div></body></html>

And the JavaScript (sof.js):

var player;
// This function creates an <iframe> (and YouTube player)// after the API code downloads.functiononYouTubePlayerAPIReady() {
    player = newYT.Player('player', {
        height: '390',
        width: '640',
        videoId: 'u1zgFlCw8Aw',
        events: {
            'onStateChange': function (event) {
                switch (event.data) {
                    case -1:
                        console.log ('unstarted');
                        break;
                    case0:
                        console.log ('ended');
                        break;
                    case1:
                        console.log ('playing');
                        break;
                    case2:
                        console.log ('paused');
                        break;
                    case3:
                        console.log ('buffering');
                        break;
                    case5:
                        console.log ('video cued');
                        break;
                }
            }
        }
    });
}

For each case you can set an handler.

For further info:

  1. YT Player Getting Started
  2. YT Javascript API Events

Solution 2:

The only used Events are :

1 - onStateChange 
2 - onPlaybackQualityChange 
3 - onError 
4 - onApiChange

-Event Handlers:

1- onYouTubePlayerReady(playerid)

Post a Comment for "Youtube Embedded Video Start / Stop Event"