单击 HTML5 视频播放的海报图像？

Question

我有一个带有海报属性的 HTML5 视频。我想以某种方式设置它，以便您可以单击视频元素（海报图像的区域）上的任何位置，它将触发播放事件并启动视频？我觉得这是相当标准的做法，但我找不到没有闪光灯的方法。任何帮助将不胜感激。

Answer 1

这对我有用安德鲁。

在你的 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();"/>

Answer 2

发布此此处< /a> 也是如此，但这也适用于该线程。

我在做这件事时遇到了无数问题，但最终想出了一个可行的解决方案。

基本上，下面的代码是向视频添加一个点击处理程序，但忽略下部的所有点击（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

使用海报属性不会改变行为。它只是在加载视频时显示该图像。让视频自动启动（如果浏览器实现不这样做），那么您必须执行以下操作：

在 javascript 中使用 jquery：

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

希望有帮助

Answer 4

是的，这听起来像是浏览器创建者或 html 规范编写者只是“忘记”的常规功能。

我已经编写了几个解决方案，但它们都不是真正的跨浏览器或 100% 可靠的。包括单击视频控件时出现的问题会导致视频停止的意外后果。相反，我建议您使用经过验证的解决方案，例如 VideoJS：http://videojs.com/

Answer 5

我是在 React 和 es6 中这样做的。这是我在阅读 Daniel Golden 的解决方案后制作的现代版本：

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>
  )
}

Answer 6

使用 get(0) 也可以

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

Answer 7

您可以在不使用 jQuery 或任何东西的情况下完成此操作。只是普通的旧 JavaScript：

1. 创建一个变量来存储视频元素。
2. 检测事件（您可以使用您喜欢的任何按钮）。
3. 我在示例中检测到鼠标左键。
4. 最后一行将切换播放和暂停。

var video = document.getElementById('yourVideoId');
    document.onmousedown = function(e) {
    if (event.button == 0){
        video.paused ? video.play() : video.pause();
    }
}

Answer 8

<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>