Question

我正在使用以下JS代码播放HTML5自定义视频，并同时激活iframe，该视频将在播放后27秒启动视频按钮被点击。

但是，我遇到了2个问题：

播放按钮需要2次点击才能开始播放视频，而不是只是1
即使播放视频按钮，iframe也会被随机激活没有被点击（页面加载后25到40秒之间，随机）

知道为什么吗？

    <script type="text/javascript">window.onclick=function() {
    setTimeout('document.getElementById("dwayne").style.display="block"',27000);
    setTimeout('document.getElementById("blackrussian").style.display="inline"',27000);
    var video=document.getElementById("167868028");
    var playButton=document.getElementById("play-pause");
    playButton.addEventListener("click",function(){if(video.paused==true){video.play();
    playButton.innerHTML="&nbsp;";}else{video.pause();
    playButton.innerHTML="&nbsp;";}});
    }</script>

这是html部分：

    <video class="video-js" id="167868028" preload="false" width="910" height="510" poster="img/snapshot.jpg" data-setup="{}">
    <source src="video/vid.mp4" type="video/mp4"></video>
    <div class="controls"><button type="button" id="play-pause" class="play"><img src="img/play.png"></button></div>
    <iframe id="dwayne" class="whiterussian" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" src="files/iframe.php"></iframe>
    <div id="blackrussian"></div>

Answer 1

您已经将playButton.addEventListener嵌套在window.onclick内，这可能是导致双击要求的原因。

setTimeout在window.click内部，但不在playButton.addEventListener（“ click” ...内部），这意味着单击按钮不会触发它，但是单击窗口会（在27秒后）。

window.onload=function() {

    var video=document.getElementById("167868028");
    var playButton=document.getElementById("play-pause");
    playButton.addEventListener("click", function()
    {
        setTimeout('document.getElementById("dwayne").style.display="block"',27000);
        setTimeout('document.getElementById("blackrussian").style.display="inline"',27000);

        if(video.paused==true){
            video.play();
            playButton.innerHTML="&nbsp;";
        }else{
            video.pause();
            playButton.innerHTML="&nbsp;";
        }
    });
}

还没有测试代码，但是它应该可以工作...

Answer 2

根据您的查询，这是使其工作的最简单方法。

在页面上的任意位置单击一次时，视频将开始播放。然后27秒后，iframe会收到一个新的src网址，然后加载。

window.onclick=function() {
    document.getElementById("167868028").play()
    setTimeout(loadFrame, 27000)
}

function loadFrame(){
  document.getElementById("dwayne").src = "http://arunranga.com/examples/access-control/"
}

<video id="167868028" width="91" height="51" poster="img/snapshot.jpg">
    <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>

<iframe id="dwayne" frameborder="3" src="" scrolling="yes"></iframe>

为什么我的JavaScript需要2次点击而不是1次点击？

2 个答案: