5

我在一个网站上有背景噪音，客户希望在整个网站上循环播放，所以我设置了一个<audio>自动播放和循环的标签。

在几个页面上，我有多个 Youtube 嵌入式 iframe，这些 iframe 是使用 youtube 视频页面中的嵌入式代码声明的，例如：

<iframe width="420" height="315" src="http://www.youtube.com/embed/Y3OR9HnB14I?rel=0" frameborder="0" allowfullscreen></iframe>

他们想要的是，当播放/恢复 youtube 视频时，音频暂停，当 youtube 视频停止/暂停时，然后恢复音频。

有没有人知道如何使用 Youtube Javascript API 做到这一点？

4

2 回答 2

7

您应该能够使用 Youtube Javascript Player API 来执行此操作。您可以在所有嵌入式播放器上收听 onStateChange 事件，当其中任何一个播放器发出“1”（正在播放）时，您暂停 . 当“2”（暂停）或“0”（结束）出现时，您可以再次恢复。

这对我有用：

<html>
  <head>
    <script language="javascript">
      var player = null;
      var lobbyAudio = null;

      function onYouTubePlayerReady(playerapiid) {
        player = document.getElementById(playerapiid);
        lobbyAudio = document.getElementById('lobby-audio');
        player.addEventListener("onStateChange", "onYouTubePlayerStateChange");
      }

      function onYouTubePlayerStateChange(state) {
        switch (state) {
          case 1:  // playing
            lobbyAudio.pause();
            break;
          case 0:  // ended
          case 2:  // paused
            lobbyAudio.play();
            break;
        }
      }
    </script>
  <body>
    <audio id="lobby-audio" src="lobby-audio.mp3" autoplay="True" controls="True" loop="True"></audio>

    <object width="640" height="360">
      <param name="movie"
      value="https://www.youtube.com/v/t-aOvEweUEw?enablejsapi=1&playerapiid=ytplayer1&version=3"></param>
      <param name="allowFullScreen" value="true"></param>
      <param name="allowScriptAccess" value="always"></param>
      <embed
          id="ytplayer1"
          src="https://www.youtube.com/v/t-aOvEweUEw?enablejsapi=1&playerapiid=ytplayer1&version=3"
          type="application/x-shockwave-flash" allowfullscreen="true"
          allowScriptAccess="always" width="640" height="360">
      </embed>
    </object>
  </body>
</html>

我把它作为练习留给你，让你弄清楚如何跟踪几个视频的状态 =) 但一个提示是 onYouTubePlayerReady() 为页面上的每个播放器调用一次。您可以为每个玩家指定不同的 playerapiid 以区分他们。（在上面的示例中，我使用“ytplayer1”作为单人播放器。

于 2013-06-11T22:05:34.463 回答
3

来自API 文档：

活动

onStateChange 每当玩家的状态发生变化时都会触发此事件。API 传递给您的事件侦听器函数的值将指定一个与新播放器状态相对应的整数。可能的值为：

    -1 (unstarted)
    0 (ended)
    1 (playing)
    2 (paused)
    3 (buffering)
    5 (video cued).

当播放器第一次加载视频时，它将广播一个未启动 (-1) 事件。当视频被提示并准备好播放时，播放器将广播视频提示 (5) 事件。在您的代码中，您可以指定整数值，也可以使用以下命名空间变量之一：

    YT.PlayerState.ENDED
    YT.PlayerState.PLAYING
    YT.PlayerState.PAUSED
    YT.PlayerState.BUFFERING
    YT.PlayerState.CUED

对于播放/暂停视频，请使用：

播放视频

player.playVideo():Void 播放当前提示/加载的视频。此函数执行后的最终播放器状态将是播放 (1)。

注意：如果通过播放器中的本机播放按钮开始播放，则播放仅计入视频的官方观看次数。

player.pauseVideo():Void 暂停当前播放的视频。该函数执行后的最终播放器状态将暂停（2），除非调用该函数时播放器处于结束（0）状态，在这种情况下播放器状态不会改变。

于 2013-06-11T21:10:19.900 回答