单击相关视频时，如何更改带有视频标题的 div？

Question

当用户单击相关视频（视频结束时）时，我试图与当前播放视频的标题更改进行DIV，以便显示正确的标题。问题是，我在API中看不到任何提醒我视频发生了变化的任何东西。我是否可以听到一个事件来检测源已更改？

我不确定它会有所帮助，但这是我目前的：

var player;
function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    height: '390',
    width: '640',
    videoId: 'BOMWNgejuPc',
    playerVars: {
      // 'controls': 0,
      'autoplay': 0,
      'disablekb': 1,
      'enablejsapi': 1,
      'fs': 1,
      'iv_load_policy': 3,
      // 'rel': 0,
      'showinfo': 0
    },
    events: {
      'onReady': onPlayerReady,
    }
  });
}
function onPlayerReady(event) {
  // Update title with current video title
  $('#title').text(player.getVideoData().title);
}

<h3 id="title">Title</h3>
<div id="player"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script defer type="text/javascript" src="https://www.youtube.com/iframe_api"></script>

Answer 1

您可以收听播放器状态更改。从理论上讲，您可以使用"视频提示"事件，但由于某种原因，它似乎并不是一致的基础启动，因此您需要解决方法……当一个视频结束而另一个启动时，跟踪的某种结合。用类似的内容在玩家对象中设置侦听器：

var player,
new_video_started=false;
function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    height: '390',
    width: '640',
    videoId: 'BOMWNgejuPc',
    playerVars: {
      // 'controls': 0,
      'autoplay': 0,
      'disablekb': 1,
      'enablejsapi': 1,
      'fs': 1,
      'iv_load_policy': 3,
      // 'rel': 0,
      'showinfo': 0
    },
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });
}
function onPlayerReady(event) {
  // Update title with current video title
  $('#title').text(player.getVideoData().title);
}
function onPlayerStateChange(event) {
  if (event.data === -1) { // meaning that the video is in an 'unstarted' state, which happens when a new video is loading
    new_video_unstarted=true;
  }
  if (event.data === 1&&new_video_unstarted) { // when the new video starts playing, the metadata is available for querying
    $('#title').text(player.getVideoData().title);
    new_video_unstarted=false;
  }
}