javascript - 如何在 YouTube 视频结束时生成警报(不自动播放)

Question

我正在使用 Youtube API 来生成视频，使用以下示例:

HTML:

<div id="player"></div>

Javascript:

<script src="http://www.youtube.com/player_api"></script>

<script>

    // create youtube player
    var player;
    function onYouTubePlayerAPIReady() {
        player = new YT.Player('player', {
          height: '390',
          width: '640',
          videoId: '0Bmhjf0rKe8',
          events: {
            onReady: onPlayerReady,
            onStateChange: onPlayerStateChange
          }
        });
    }

    // autoplay video
    function onPlayerReady(event) {
    }

    // when video ends
    function onPlayerStateChange(event) {        
        if(event.data === 0) {          
            alert('done');
        }
    }

</script>

此代码基于以下问题:

How to detect when a youtube video finishes playing?

唯一的区别是我删除了“onPlayerReady”函数，因为我不希望自动播放该视频。因此，我希望使用以下 Javascript 通过外部链接播放该视频:

$(document).ready(function() {

  $('#play-video').on('click', function(ev) {

   $("#player")[0].src += "&autoplay=1";
   ev.preventDefault();

  });

});

以及以下 HTML 代码:

<a id="play-video" href="#">Play Video</a>

执行后，单击链接即可播放视频。但是，在视频结束时，应该会弹出一个警报，通知视频已结束。

仅当视频是通过视频中心的默认 Youtube 播放按钮播放时才会显示此警报。但是，如果通过“播放视频”链接播放，则不会显示警报。

你知道我可能会错过什么吗？

谢谢!

Answer 1

要检查视频是否已播放完毕，您可以执行以下操作。

player.addEventListener("onStateChange", function(state){
    if(state === 0){
        // video has finished playing
    }
});