jquery 点击海报图像HTML5视频播放?

2ledvvac  于 2023-01-16  发布在  jQuery
关注(0)|答案(8)|浏览(135)

我有一个HTML5视频与海报属性。我想以某种方式设置它,使您可以点击任何地方的视频元素(海报图像的区域),它会激发播放事件,并开始视频?我觉得这是相当标准的做法,但我找不到一种方法来做到这一点没有闪光灯。任何帮助将不胜感激。

vohkndzv

vohkndzv1#

这对我很有效,安德鲁.
在html头中添加这一小段js:

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

或者,直接在html元素中添加一个onlick属性:

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

umuewwlo2#

张贴在这里,但这也适用于此线程。
我有无数的问题这样做,但最终想出了一个解决方案,工程。
下面的代码基本上是向视频添加一个单击处理程序,但忽略了下部的所有单击(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();
    }
});
zaq34kh6

zaq34kh63#

使用poster属性并不会改变行为,它只是在加载视频时显示该图像。要让视频自动启动(如果浏览器实现没有这样做),您必须执行以下操作:
<video id="video" ...></video>
在javascript中使用jquery:

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

希望能有所帮助

lskq00tm

lskq00tm4#

是的,这听起来像是浏览器创建者或HTML规范编写者刚刚“忘记”的常规功能。
我写过几个解决方案,但没有一个是真正的跨浏览器或100%可靠的。包括点击视频控件的问题有停止视频的意外后果。相反,我建议你使用一个成熟的解决方案,如VideoJS:http://videojs.com/

kmpatx3s

kmpatx3s5#

我在react和es6中就是这么做的,下面是我阅读丹尼尔·戈尔登的解决方案后做的一个现代版本:

const Video = ({videoSources, poster}) => {
  return (
    <video
      controls
      poster={poster}
      onClick={({target: video}) => video.paused ? video.play() : video.pause()}
    >
      {_.map(videoSources, ({url, type}, i) =>
        <source key={i} src={url} type={type} />
      )}
    </video>
  )
}
mtb9vblg

mtb9vblg6#

使用get(0)也可以

var play = $('.playbutton');
    var video = $('#video');
    play.click(function(){
        video.get(0).play();
    })
ocebsuys

ocebsuys7#

/* 你可以不使用jquery或任何东西来完成它。只需要普通的旧Javascript01创建一个变量来存储video元素02检测事件(你可以使用任何你喜欢的按钮)03我在我的例子中检测到了鼠标左键04最后一行将切换播放和暂停。*/

var video = document.getElementById('yourVideoId');

    document.onmousedown = function(e) {

    if (event.button == 0){
        video.paused ? video.play() : video.pause();
     }
}
eoigrqb6

eoigrqb68#

<script type="text/javascript">
    function actualNextSibling(el) {    // needed to smooth out default firefox/IE behavior
        do { el = el.nextSibling } while (el && el.nodeType !== 1);
            return el;
    }
</script>
<div onclick="actualNextSibling(this).style.display='block'; this.style.display='none'">
    <img src="splash.jpg" alt="splash" style="cursor: pointer" />
</div>
<div style="display: none">
    <iframe width="440" height="248" src="//www.youtube.com/embed/9FOZEbEpyA8?rel=0&autoplay=1"frameborder="0" allowfullscreen></iframe>
</div>

相关问题