如何在嵌入式YouTube iFrame端触发功能

Question

试图在嵌入的YouTube iFrame结束时触发一个函数。只需要知道如何找到结局——之后我就好了。

Answer 1

很难从你的问题中判断出来，但听起来你想在youtube视频结束时触发一个事件。您可以使用下面的示例代码设置事件处理程序。

player = new YT.Player('player', {
  height: '390',
  width: '640',
  videoId: 'someVideoID',
  events: {
    'onStateChange': onPlayerStateChange
  }
});

其中大部分只是用于设置新Youtube播放器的模板代码，但重要的部分是events，其中您注册一个事件处理程序以触发onStateChange，它将运行onPlayerStateChange方法。

然后你可以有这样一个函数:

function onPlayerStateChange(event) {
  if (event.data === 0) {
    doSomeAction();
  }
}

event.data表示刚刚发生的动作，根据API文档，值0表示视频已经结束。从这里可以执行一些操作，如doSomeAction();方法所示。

Answer 2

这是我想出的答案在IFrame上使用…这个jQuery函数是我为自己的项目编写的——您可以根据自己的需要切换它。注意:你的YouTube视频必须有"enablejsapi=1"添加到url。

<div class="video-holderYT">
        <iframe width="480" id="ytplayer" height="270" class="videoImageYT" src="http://www.youtube.com/embed/YourVideoIDHere?rel=0&amp;autoplay=0&amp;modestbranding=1&amp;showinfo=0&amp;autohide=1&version=3&enablejsapi=1&playerapiid=ytplayer" frameborder="0" allowfullscreen=""></iframe>
</div>
  <script src="/jquery-1.7.2.min.js"></script>
  <script type="text/javascript">
  var player;
 function onYouTubePlayerAPIReady() {
  player = new YT.Player('ytplayer', {
    events: {
        'onStateChange': ShowMe
       }
    });
 }
 var tag = document.createElement('script');
 tag.src = "http://www.youtube.com/player_api";
 var firstScriptTag = document.getElementsByTagName('script')[0];
 firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    function ShowMe() {
    var sStatus;
    sStatus = player.getPlayerState();
      if (sStatus == -1) alert("Video has not started.");
      else if (sStatus == 0) {  $('#ytplayer').replaceWith('<a href="page/" target="_blank"><img class="special_hover" src="image" alt="" /></a>')
   //change above function to react to when the player stops.
  }
     else if (sStatus == 1) { } //Video is playing
     else if (sStatus == 2) {}  //Video is paused
     else if (sStatus == 3) { } //video is buffering 
     else if (sStatus == 5) { } //Video is cued.
   }
  </script>