Question

我在网站上有背景噪音，客户想要在整个网站上循环播放，所以我设置了<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执行此操作？

Answer 1

您应该可以使用Youtube Javascript Player API来执行此操作。您可以在所有嵌入式播放器上收听onStateChange事件，当＆＃34; 1＆＃34; （打）来自他们中的任何一个，你暂停了。什么时候＆＃34; 2＆＃34; （暂停）或＆＃34; 0＆＃34; （已结束）你可以再次恢复。

这对我有用：

<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，以区别对待。（在上面的示例中，我使用＆＃34; ytplayer1＆＃34;对于单人游戏。

API参考：https://developers.google.com/youtube/js_api_reference
API演示页：https://developers.google.com/youtube/youtube_player_demo
参考也可能有用：http://www.w3schools.com/tags/ref_av_dom.asp

Answer 2

来自API docs：

活动


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（）：空       播放当前提示/加载的视频。执行此功能后的最终播放器状态将为播放（1）。

注意：如果播放通过播放器中的原生播放按钮启动，则播放仅计入视频的官方观看次数。

player.pauseVideo（）：空       暂停当前播放的视频。执行此功能后的最终玩家状态将暂停（2），除非玩家在   调用函数时结束（0）状态，在这种情况下是播放器   国家不会改变。

Youtube JavaScript API - 在youtube视频播放时暂停音频

2 个答案: