5

クライアントが Web サイト全体でループ再生したい Web サイトにバックグラウンド ノイズがあるため、<audio>自動再生およびループするタグを設定しました。

いくつかのページには、YouTube 動画ページの埋め込みコードを使用して宣言された複数の YouTube 埋め込み iframe があります。次に例を示します。

<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() はページ上のすべてのプレーヤーに対して 1 回呼び出されます。各プレーヤーに異なる 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 現在再生中のビデオを一時停止します。この関数が呼び出されたときにプレーヤーが終了 (0) 状態でない限り、この関数が実行された後の最終的なプレーヤーの状態は一時停止 (2) になります。この場合、プレーヤーの状態は変更されません。

于 2013-06-11T21:10:19.900 に答える