Youtube embedded video start / stop event

前端 未结 2 940
说谎
说谎 2021-01-13 17:58

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

相关标签:
2条回答
  • 2021-01-13 18:23

    The only used Events are :

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

    -Event Handlers:

    1- onYouTubePlayerReady(playerid)

    0 讨论(0)
  • 2021-01-13 18:31

    This an example to handle start and stop events:

    HTML file (index.html):

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

    And the JavaScript (sof.js):

    var player;
    // This function creates an <iframe> (and YouTube player)
    // after the API code downloads.
    function onYouTubePlayerAPIReady() {
        player = new YT.Player('player', {
            height: '390',
            width: '640',
            videoId: 'u1zgFlCw8Aw',
            events: {
                'onStateChange': function (event) {
                    switch (event.data) {
                        case -1:
                            console.log ('unstarted');
                            break;
                        case 0:
                            console.log ('ended');
                            break;
                        case 1:
                            console.log ('playing');
                            break;
                        case 2:
                            console.log ('paused');
                            break;
                        case 3:
                            console.log ('buffering');
                            break;
                        case 5:
                            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
    0 讨论(0)
提交回复
热议问题