适用于YouTube iframe的JavaScript播放/暂停按钮

时间:2015-06-30 12:33:26

标签: javascript html if-statement iframe youtube

我正在一个网站上工作,我正试图在<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);

任何建议都表示赞赏!

2 个答案:

答案 0 :(得分:2)

好的,主要问题是你的功能中没有事件对象。

这应该可以解决问题

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

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

答案 1 :(得分:0)

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