jquery - 使用 jQuery 启动视频元素会破坏正常控件

Question

我的网站上有一个带有属性的 html5video元素。poster我有一个执行以下操作的 jQuery 函数。

$('video').click(function(){
    $(this).get(0).play();
});

这很好用：如果我点击海报，视频就会开始播放。但是，如果我单击嵌入视频控件中的播放按钮，则海报会走一段路，但视频不会开始播放。如果我注释掉 jQuery click-poster-to-start 函数，控件就会起作用。

我如何让两者都工作？

谢谢

Answer 1

我不知道它为什么会发生，但也许这是您的替代选择。

在视频标签下放置一个 div：

<video id="video" controls="controls">
 <source src="../video/IMG_0699.mp4.mp4" type="video/mp4" />
 <source src="../video/IMG_0699.webmhd.webm" type="video/webm" />
 <source src="../video/IMG_0699.oggtheora.ogv" type="video/ogv" />
Your browser does not support the video tag.
</video>
<div id="poster"></div>

将位置设置为绝对：

#poster
{
    position: absolute;
    width: 320px;
    height: 213px;
    border: 2px solid #000000;
    margin-left: 10px;
}
#video
{
    position: absolute;
width: 320px;
height: 251px;
    margin-left: 10px;
}

并添加 jquery

$(document).ready(function() {
controlVideo();
function controlVideo(){
    $('#poster').click(function() {
        $('#video').get(0).play();
        $(this).click(function() {
            $('#video').get(0).pause();
            controlVideo();
        });
    });
}   
}); 

我希望它对你有所帮助。这对我来说可以。当然，您必须根据您的页面设置高度、宽度和位置。