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

Question

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

javascriptuser-controlsyoutubehtml5-audio

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来实现这个功能吗？

- Stefan Dunn

2个回答

3

这段内容摘自API文档：

Events

onStateChange This event fires whenever the player's state changes. The value that the API passes to your event listener function will specify an integer that corresponds to the new player state. Possible values are:
    -1 (unstarted)
    0 (ended)
    1 (playing)
    2 (paused)
    3 (buffering)
    5 (video cued).
When the player first loads a video, it will broadcast an unstarted (-1) event. When a video is cued and ready to play, the player will broadcast a video cued (5) event. In your code, you can specify the integer values or you can use one of the following namespaced variables:
    YT.PlayerState.ENDED
    YT.PlayerState.PLAYING
    YT.PlayerState.PAUSED
    YT.PlayerState.BUFFERING
    YT.PlayerState.CUED

播放/暂停视频使用以下内容：

播放视频

player.playVideo()：void 播放当前预备/已加载的视频。该函数执行后，最终播放器的状态将变为正在播放（1）。

注意：只有通过播放器内的原生播放按钮启动的播放才会计入视频的官方观看次数。

player.pauseVideo()：void 暂停当前正在播放的视频。该函数执行后，最终播放器的状态将变为暂停（2），除非在调用该函数时播放器处于结束状态（0），此时播放器状态不会改变。

- Simone Pessotto

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Christian · Accepted Answer

您应该可以使用Youtube Javascript播放器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”来表示单个播放器）

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