Question

当用户点击相关视频时（视频结束时），我尝试使用当前正在播放的视频标题更改的div，以便显示正确的标题。问题是，我没有在api中看到任何提醒我视频已经改变的内容。是否有我可以侦听的事件来检测源已发生变化？

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

＆＃13;

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);
}

＆＃13;

<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>

＆＃13;

Answer 1

你可以听取玩家状态的变化。从理论上讲，你可以使用＆＃34;视频提示＆＃34;事件，但由于某种原因，它似乎不会在一致的基础上触发，因此您需要一个解决方法...当一个视频结束而另一个视频开始时跟踪的某种组合。在您的Player对象中设置一个侦听器，如下所示：

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;
  }
}

如果点击相关视频，如何使用视频标题更改div？

1 个答案: