Youtube JavaScript API -暂停音频时，无论是Youtube视频播放

Youtube JavaScript API - Pause audio when either youtube video plays

本文关键字：Youtube 无论是 视频 播放 音频 JavaScript API 暂停      更新时间：2023-09-26

我在一个网站上有背景噪音，客户希望在整个网站上循环播放，所以我设置了一个自动播放和循环的<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做到这一点的想法?

你应该能够使用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()在页面上的每个播放器被调用一次。您可以为每个播放器指定不同的播放器id来区分它们。(在上面的例子中，我使用"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

来自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():空白播放当前提示/加载的视频。此函数执行后的最终播放器状态将是playing(1)。

注意:如果播放是通过播放器中的本机播放按钮启动的，则播放仅计入视频的官方观看计数。

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

相关文章：