点击HTML5视频播放的海报图片？

Question

我有一个带海报属性的HTML5视频.我想以某种方式设置它,以便您可以点击视频元素上的任何位置(海报图像的区域),它将触发播放事件并启动视频？我觉得这是相当标准的做法,但我没有办法在没有闪光灯的情况下做到这一点.任何帮助将非常感激.

Answer 1

这对我来说是安德鲁.

在你的html头中添加这一小块js:

var video = document.getElementById('video');
video.addEventListener('click',function(){
    video.play();
},false);

或者,只需将onlick属性直接添加到您的html元素:

<video src="your_video" width="250" height="50" poster="your_image" onclick="this.play();"/>

Answer 2

也在这里发布,但这也适用于这个线程.

我有无数问题这样做,但最终提出了一个有效的解决方案.

基本上下面的代码是为视频添加一个点击处理程序,但忽略了下半部分的所有点击(0.82是任意的,但似乎适用于所有大小).

$("video").click(function(e){

    // handle click if not Firefox (Firefox supports this feature natively)
    if (typeof InstallTrigger === 'undefined') {

        // get click position 
        var clickY = (e.pageY - $(this).offset().top);
        var height = parseFloat( $(this).height() );

        // avoids interference with controls
        if (clickY > 0.82*height) return;

        // toggles play / pause
        this.paused ? this.play() : this.pause();
    }
});

Answer 3

使用poster属性不会改变行为.它只是在加载视频时显示图像.让视频自动启动(如果浏览器实现不这样做),那么您必须执行以下操作:

<video id="video" ...></video>

在javascript中使用jquery:

$('#video').click(function(){
   document.getElementById('video').play();
});

希望能帮助到你