检查 YouTube 视频是否正在播放并运行脚本。

Question

我在WordPress中嵌入了以下视频

<iframe id="video" width="640" height="360" src="http://www.youtube.com/embed/xxxxxx?enablejsapi=1" frameborder="0" allowfullscreen></iframe>

这段代码的作用是在SlideDeck滑块中播放视频。当用户点击视频时，我希望能够停止滑块的滑动。但是我不知道如何编写代码。

self.pauseAutoPlay = true;

视频播放时运行。

我非常需要帮助。

编辑：由于我不是最终用户，所以我需要能够与YouTube的默认嵌入代码配合使用的东西。

- Vian Esterhuizen

Answer 1

你需要使用YouTube iFrame API。请记住，我只懂一些基本的Javascript等等，所以这可能会更加高效。

然后像平常一样嵌入你的iframe。

<iframe id="player" width="640" height="360" src="http://www.youtube.com/embed/TJ2X4dFhAC0?enablejsapi" frameborder="0" allowfullscreen></iframe>

但需要进行一些更改。它需要有一个ID，'player'，并且您需要在源URI的末尾附加?enablejsapi。

然后，您需要运行以下脚本来加载API JS并创建播放器

// 2. This code loads the IFrame Player API code asynchronously.
      var tag = document.createElement('script');
      tag.src = "http://www.youtube.com/player_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  // 3. This function creates an <iframe> (and YouTube player)
  //    after the API code downloads.
  var player;
  function onYouTubePlayerAPIReady() {
    player = new YT.Player('player', {
      height: '390',
      width: '640',
      videoId: 'u1zgFlCw8Aw',
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
  }

注意 new YT.Player('player' 应与您的iframe ID匹配，videoId:'u1zgFlCw8Aw' 应与src URI匹配。

完成后，您将能够运行以下脚本：

var myPlayerState;
      function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.PLAYING && !done) {
          // DO THIS
        }
        myPlayerState = event.data;
      }

if (myPlayerState == 1){
  // PAUSE SLIDER
}

- Vian Esterhuizen

---

这个答案已经有4年的历史了，你可能需要再进行一些搜索。可以尝试查看这个答案：https://dev59.com/imAg5IYBdhLWcg3wBXOs#24040526 - Vian Esterhuizen

Answer 2

您需要使用Flash嵌入Youtube视频：

http://code.google.com/apis/youtube/js_api_reference.html#Embedding

然后，您可以使用Youtube JavaScript API。您的代码可能类似于以下内容：

<script type="text/javascript" src="swfobject.js"></script>    
<div id="ytapiplayer">
You need Flash player 8+ and JavaScript enabled to view this video.
</div>

<script type="text/javascript">

var params = { allowScriptAccess: "always" };
var atts = { id: "myytplayer" };
swfobject.embedSWF("http://www.youtube.com/v/VIDEO_ID?enablejsapi=1&playerapiid=ytplayer&version=3",
                   "ytapiplayer", "425", "356", "8", null, null, params, atts);


var player;

function onytplayerStateChange(newState) {
    if (newState == 1)
        callPlay();
    else if (newState == 2)
        callPause();
}

function callPlay() {
    //video is play
}

function callPause() {
    //video is paused
}

</script>

附注：swfobject.js 的源代码可以在这里找到。

- neworld

---

谢谢你的建议，但它似乎与WordPress不太兼容。我也希望找到一个不需要变通方法的解决方案，因为我不是最终用户。我需要可以与YouTube的默认嵌入代码一起使用的东西。 - Vian Esterhuizen

你可以尝试使用 iframe API。但我没有使用过它的经验。 - neworld