Question

YouTube iFrame embed JS player API 允许您为某些活动添加回调。我想在选择视频结尾处的相关视频时添加回调。

更具体地说，当在嵌入中观看视频时，最后它会在嵌入中显示相关视频。我想在选择其中一个代码时运行一些代码。如何实现这一目标？我看到有一个onStateChange，但没有一个状态与相关视频有关。我是否需要为YT.PlayerState.PLAYING添加onStateChange，然后将播放视频与原始视频进行比较，看看它们是否有所不同？

Answer 1

这对我来说似乎是一个合理的解决方案。

值得一提的唯一一点（您已经注意到）是您无法判断视频中的更改是否是由于用户点击相关视频，但如果您没有动态地与播放器交互，那么比较之前的VideoID就足够了。

如果您对jQuery插件感兴趣，可以简化一些回调/事件处理工作，请查看：https://github.com/nirvanatikku/jQuery-TubePlayer-Plugin

Answer 2

我基本上按照我描述的方式完成了它。这是我使用的代码：

started = false;

var onYouTubeIframeAPIReady = function(id) {
  var player = new YT.Player('player', {
    videoId: id,
    events: {
      'onStateChange': function (event) {
        if (event.data == 1) { // The video started playing
          started = true;
        }
        if (started && event.data == -1) {
          // Video had already started playing before and is now in
          // "unstarted" state so it must be a new video.
          var video_url = event.target.i.videoUrl;
          var video_id = video_url.replace('http://www.youtube.com/watch?v=', '').replace('&feature=player_embedded', '');
          window.location = '#/view/' + video_id;
        }
      }
    }
  });
}

基本上，当视频开始播放时，您将“已启动”变量设置为true。然后，如果/当视频进入“未启动”状态时，如果“已启动”为真，那么您就知道它是刚开始播放的新视频。在这种情况下，从event.target对象中获取其视频ID，并使用它执行任何操作。

我的完整提交是here，如果有人想查看上下文，您可以在http://toogl.es上看到它。

点击相关视频后，为YouTube JS Player API添加事件回调

2 个答案: