Question

我正在制作一个页面，当页面首次加载时会隐藏HTML5视频，然后在有人点击播放按钮或5秒后自动播放时播放，以先到者为准。当它结束时，我希望再次显示播放按钮并隐藏视频。

我尝试添加一个设置为true或false的data-hasPlayed属性，但是当它完成播放并返回到徽标时，视频将再次开始自动播放（即使它已被隐藏）。

这是代码 - 我现在拿出了数据属性的东西，只是为了让它再次简化。如果您想要查看代码仍然可以让我知道，我可以更新它。提前谢谢！

HTML：

<video id="trailer" controls preload="auto">
    <source src="video/trailer.mp4" type="video/mp4">
    Your browser cannot play this now.
</video>

JQuery的：

// AUTOPLAY VIDEO AFTER 5 SECONDS
var video = document.getElementById("trailer");
video.addEventListener("canplay", function() {
        setTimeout(function(){
            $('a.videoPlay').hide();
            $('#videoContainer').show('');
            $('#trailer').show();
            video.play();
        }, 5000);
});

// PLAY VIDEO ON CLICK
$('a.videoPlay').click(function(){
    $('a.videoPlay').hide();
    $('#videoContainer').show();
    $('#trailer').show();
    video.play();
});

// AFTER VIDEO ENDS, SHOW PLAY BUTTON
video.addEventListener('ended',videoEnded,false);
function videoEnded(e) {
    setTimeout(function(){
        $('#videoContainer').hide();
        $('#trailer').hide();
        $('a.videoPlay').show();
    }, 1000);
};

Answer 1

你是如何隐藏视频的？

我在这里做了一个Jsfiddle，它似乎在完成时停止播放......

我使用display none来隐藏它。

#trailer {
  display: none;
}

https://jsfiddle.net/sarin/8my2ms4w/

Answer 2

Pause隐藏之前的视频

video.pause();

此外，您可以直接在setTimeout之后使用按钮的点击事件，而不是直接播放视频

video.addEventListener("canplay", function() {
        setTimeout(function(){
            $('a.videoPlay').click();
        }, 5000);
});

这应解决两种情况

隐藏的HTML5视频自动播放

2 个答案: