3

YouTube 的iFrame 嵌入 JS 播放器 API允许您向某些事件添加回调。我想添加一个回调，以便选择视频末尾的相关视频。

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

4

2 回答 2

1

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

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

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

于 2013-01-31T17:54:27.023 回答
1

我最终基本上按照我描述的方式进行了操作。这是我使用的代码：

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，然后用它做任何你想做的事情。

如果有人想查看上下文，我的完整提交就在这里，您可以在http://toogl.es上看到它的实际效果。

于 2013-02-01T15:44:39.783 回答