YouTube iframe 的 JavaScript 播放/暂停按钮答案

【问题标题】：JavaScript play/pause button for YouTube iframeYouTube iframe 的 JavaScript 播放/暂停按钮
【发布时间】：2015-06-30 12:33:25
【问题描述】：

我正在开发一个网站，我正在尝试在 <iframe> 标签中获取一个 youtube 视频，以便通过一个按钮播放和暂停。我可以用单独的按钮让它播放或暂停，但我似乎无法让 if 语句工作，以便只用一个按钮控制视频。我对 JavaScript 还比较陌生，所以它可能只是我错过了一些简单的东西，但我已经在网上搜索了一段时间，找不到任何可以解决我问题的东西。

下面是我现在使用的代码。我第一次单击 YouTube 视频播放的按钮，但第二次没有任何反应。我还尝试为嵌入的视频打开自动播放，但是当我按下按钮时，什么也没有发生。

这是我目前使用的代码：

HTML

<div class="iframe">
  <iframe id="iframe1" width="360" height="203" src="https://www.youtube-nocookie.com/embed/videoseries?list=PLb-Mg8r29XuOV9CbkXVDQ5NdQG__WbJqI&amp;controls=0&amp;showinfo=0&amp;enablejsapi=1" frameborder="0" allowfullscreen></iframe>
  <a href="#" onclick="iframe1play();return false;">
    <div id="iframe1play">
    </div>
  </a>
</div>

JavaScript

function onYouTubePlayerAPIReady() {
    iframe1 = new YT.Player('iframe1');
} 

function iframe1play() {
    if (event.data == YT.PlayerState.PLAYING && !done) {
        iframe1.pauseVideo();
        document.getElementById("iframe1").style.opacity = "0";
    } else {
        iframe1.playVideo();
        document.getElementById("iframe1").style.opacity = "1";
    }   
}

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

欢迎提出任何建议！

【问题讨论】：

标签： javascript html if-statement iframe youtube

【解决方案1】：

好的，主要问题是您的函数中没有事件对象。

这应该可以解决问题

if (player.getPlayerState() == YT.PlayerState.PLAYING) {
        player.pauseVideo();
        document.getElementById("iframe").style.opacity = "0";
    } else {
        player.playVideo();
        document.getElementById("iframe").style.opacity = "1";
    }

如果可以的话，使用 jQuery 或其他框架为元素注入函数。

【讨论】：

我用这个替换了我的 if 语句，但是现在当我点击“a”标签时，它只是将我链接到页面顶部，（#）并且似乎没有运行功能完全没有了...
抱歉，没注意。我用 iframe1.getPlayerState 替换了 player.getPlayerState()，现在可以正常工作了！

【解决方案2】：

也许我不明白你的问题。因为我尝试了您的代码并且它有效。我可以看到一个带有 youtube 视频的页面。单击播放按钮时，视频开始播放，当我再次单击暂停时的视频时。那么你的问题是什么。如果我不使用 cmets，我很抱歉，但我还不能。

【讨论】：