单击自定义按钮播放 youtube 视频答案

【问题标题】：play youtube video on click custom button单击自定义按钮播放 youtube 视频
【发布时间】：2012-07-23 23:40:23
【问题描述】：

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

我错过了什么吗？

【问题讨论】：

首先检查您的 javascript 控制台是否有错误，看看是否有任何问题？
它说：ReferenceError: player is not defined [Break On This Error] if(player) {
我在标题中包含了 javascript 文件：
您可以获取预览图像，显示它，然后当您单击按钮时，将图像替换为自动播放设置为 true 的 iframe。此类结构的实际示例：merkd.com/teams/ExtraordinaryKillers Stream & Highlights 如果您想使用此方法，请告诉我，我会发布答案。

标签： youtube youtube-api

【解决方案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>

【讨论】：

【解决方案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();
    }
}

【讨论】：

不，伙计，它不工作。我是否需要添加任何 youtube javascript 库，虽然我添加了：
更新了我的答案以反映第二个链接的内容
没有人，仍然没有希望，我想我错过了什么？但如果不使用 var player 则 javascript 控制台显示“未定义播放器”错误
我的 iframe 代码中有什么东西吗？可以检查一下 plz: youtube-nocookie.com/embed/…" frameborder="0" allowfullscreen>

【解决方案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>

【讨论】：

您的代码可以在浏览器中运行吗？你在标题中包含任何 youtube javascript 文件吗？我输入了你的代码，但它不播放视频！！！我在哪里失踪？
请在标题标签中添加这个“”

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：