Question

我确实有以下代码，我想在点击按钮时播放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和锚链接放在html的正文部分。

enter image description here

我错过了什么吗？

Answer 1

这里我举了两个球员的例子：

<!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>

Answer 2

运行脚本时可能还没有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();
    }
}

Answer 3

<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>

Answer 4

这是一个播放的工作代码。只能通过videoId：'iZYIsJ9i5yE'改变我们在youtube上的videoId：

<!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>

Answer 5

使用此iframe并更改youtube链接。我希望它肯定会奏效。它正在我的网站上工作。

<iframe src="https://www.youtube.com/embed/2XXzYCfBiAg" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen style="width:100%; height:445px; padding:0; left:25%"></iframe>

播放youtube视频点击自定义按钮

5 个答案: