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 中，并将锚链接放在 html 的正文部分。

在此处输入图像描述

我错过了什么吗？

4

5 回答 5

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

This is the working code with one play. Should be altered only by videoId: 'iZYIsJ9i5yE' whity our videoId in youtube:

<!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 回答
-1

使用此 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>
于 2018-05-16T06:35:42.613 回答