检查 YouTube 视频是否正在播放并运行脚本 [英] Check if YouTube video is playing and run script

问题描述

我在 WordPress 中嵌入了以下视频

I have the following video embeded within WordPress

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

它位于 SlideDeck 滑块内，当有人单击视频时，我想停止滑块.我不知道如何获得这行代码

And it's inside a SlideDeck slider, which I want to stop when someone clicks the video. I can't figure out how to get this line of code

self.pauseAutoPlay = true;

在视频播放时运行.

我非常需要帮助.

因为我不是最终用户.我需要一些可以使用 YouTube 的默认嵌入代码的东西.

As I'm not the end user. I need something that will work with the default embed code from YouTube.

推荐答案

您需要使用 YouTube iFrame API.请记住，我只知道 Javascript 的基本知识等等，因此这可能会更有效率.

You need to use the YouTube iFrame API. Keep in mind, I know just the bare basics of Javascript and so on so this could potentially be a lot more efficient.

他们像往常一样嵌入您的 iframe

You them embed your iframe as you normally would

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

但有一些变化.它需要有一个 ID，'player'，并且您需要将 ?enablejsapi 附加到源 URI 的末尾.

But with a couple changes. It needs to have an ID, 'player', and you need to append ?enablejsapi to the end of the source URI.

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

You'll then need to run the following script to load the API JS as well as creat the player

// 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 匹配.

Notice that new YT.Player('player' should match your iframe ID and that videoId: 'u1zgFlCw8Aw' should match the src URI.

在此之后，您将能够运行像

After this you'll be able to run scripts like

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

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

这篇关于检查 YouTube 视频是否正在播放并运行脚本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！