3

ボタンがクリックされたときにYouTubeビデオを再生したい次のコードがあります。

YouTube用のiframeコードがあります。

<script>

            var player = document.getElementById("myplayer");

            //Create a simple function and check if player exists
            function play() {
                if(player) {
                    player.playVideo();
                }
            }


 </script>


<iframe id="myplayer" width="500" height="500" src="http://www.youtube-nocookie.com/embed/C-VoyCDUvr0?rel=0&wmode=Opaque&enablejsapi=1" frameborder="0" allowfullscreen></iframe>

<a href="#" onclick="play()">Play Youtube Video</a>

しかし、ボタン/リンクをクリックしても再生されません

html と iframe の head 部分にスクリプト コードを配置し、html の body 部分にアンカー リンクを配置します。

ここに画像の説明を入力

私は何か不足していますか？

4

5 に答える 5

2

ここでは、2 人のプレイヤーの例を示しました。

<!DOCTYPE html>
<html>
  <body>
    <div id="divPlayer1"></div>

<div id="divPlayer2"></div>

    <script>
      var tag = document.createElement('script');

      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

      var player1;
      var player2;
     function onYouTubeIframeAPIReady() {
        player1 = new YT.Player('divPlayer1', {
          height: '390',
          width: '640',
          videoId: 'iZYIsJ9i5yE',});

    player2 = new YT.Player('divPlayer2', {
          height: '390',
          width: '640',
          videoId: 'J7rKAKipj8s',});

      }
function play1() { 
        player1.playVideo();
      }
function play2() { 
        player2.playVideo();
      }
  </script>

<a href="#" onclick="play1()">Play Youtube Video1</a>
<a href="#" onclick="play2()"> Play Youtube Video2</a>
</body>
</html>
于 2015-04-15T15:44:52.390 に答える
1

これは、1 回の再生で動作するコードです。videoId: 'iZYIsJ9i5yE' によってのみ変更する必要があります。

<!DOCTYPE html>
<html>
   <body>
      <div id="player"></div>

      <script>
          var tag = document.createElement('script');

          tag.src = "https://www.youtube.com/iframe_api";
          var firstScriptTag = document.getElementsByTagName('script')[0];
          firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

          var player1;
         function onYouTubeIframeAPIReady() {
            player1 = new YT.Player('player', {
              height: '390',
              width: '640',
              videoId: 'iZYIsJ9i5yE',});
          }
         function play1() { 
            player1.playVideo();
          }

         </script>

      <a href="#" onclick="play1()">Play Youtube Video</a>
   </body>
</html>
于 2015-04-15T15:28:15.057 に答える
1

iframe#myplayerスクリプトが実行されるときはおそらくまだありません。player関数内の定義を次のように移動します。

function play() {
    var player = document.getElementById("myplayer"); // Moved here
    if(player) {
        player.playVideo();
    }
}

それはうまくいくはずです。

編集：後者のリンクは、代わりにこれを行うことを示唆しているようです：

var player; // Might not be necessary

function onYouTubePlayerReady(playerId) {
    player = document.getElementById("myplayer");
}

function play() { 
    if(player) {
        player.playVideo();
    }
}
于 2012-07-25T14:09:11.877 に答える
1 
<script>
    function toggleVideo(state) {
        var iframe = document.getElementById("myplayer").contentWindow;
        func = state == 'hide' ? 'pauseVideo' : 'playVideo';
        iframe.postMessage('{"event":"command","func":"' + func + '","args":""}', '*');
    }
</script>
<script type="text/javascript" src="http://www.youtube.com/player_api"></script>

<!-- popup and contents -->
<iframe id="myplayer" width="500" height="315" src="http://www.youtube.com/embed/C-VoyCDUvr0?enablejsapi=1"
    frameborder="0" allowfullscreen></iframe>
<a href="javascript:;" onclick="toggleVideo();">Play Youtube Video</a>
于 2012-07-25T15:02:31.750 に答える