Question

我的网站上有一个带有video属性的html5 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();
        });
    });
}   
});

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

使用jQuery启动视频元素中断正常控件

1 个答案: