如何在 Youtube 视频结束时生成警报（无自动播放）答案

【问题标题】：How to generate an alert when a Youtube video finishes (no autoplay)如何在 Youtube 视频结束时生成警报（无自动播放）
【发布时间】：2017-04-25 03:11:35
【问题描述】：

我正在使用 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 播放按钮播放视频时，才会显示此警报。但是，如果通过“播放视频”链接播放，则不会显示警报。

关于我可能缺少什么的任何想法？

谢谢！

【问题讨论】：

检查我的答案会有所帮助

标签： javascript jquery video youtube

【解决方案1】：

为了检查视频是否播放完毕，您可以这样做。

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

【讨论】：

嗨@athimohan。感谢您的快速回复。我不确定应该在哪里添加此代码。 Youtube API 已经有了 onPlayerStateChange 函数。

【解决方案2】：

试试这个。

$(document).ready(function() {
  $('#play-video').on('click', function(ev) {
    $("#player")[0].src += "&autoplay=1";
    onYouTubePlayerAPIReady();
    ev.preventDefault();
  }); 
 });

【讨论】：

【解决方案3】：

您可以在播放视频链接上调用播放器的内置 api playVideo() 方法。参考Youtube API guide。

我改变的是你的播放视频链接点击监听器，它给了我预期的结果。

$('#play-video').on('click', function(ev) {
      if(player){
          player.playVideo();
      }
      ev.preventDefault();
});

请找到相同的演示https://codepen.io/samarthsinha/pen/ZKBBqM

【讨论】：