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

Question

我有一个带有poster属性的HTML5视频。 我想以某种方式设置它，使您可以单击视频元素上的任何位置（海报图像区域），并触发播放事件并开始播放视频？ 我觉得这是相当标准的做法，但是我找不到一种方法来实现这一点而不使用flash。 任何帮助都将不胜感激。

- Andrew

Answer 1

这对我很有效，Andrew。

在您的html头部添加此小段js：

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

或者，直接在你的HTML元素上添加一个onclick属性：

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

- emags

---

如果您想要能够通过点击暂停视频，请将onclick="this.play();"改为onclick="this.paused?this.play():this.pause();" 。灵感来自于https://dev59.com/W2Ml5IYBdhLWcg3wiXZ7#20434695。 - Daniel Golden

另外，这段代码在最新版本的Mac Firefox浏览器（版本35）中无法使用，因为Firefox的视频播放器已经可以在点击视频内部时实现播放和暂停，添加这段代码会破坏Firefox的实现。有关如何检测Firefox浏览器并避免执行任何操作的详细信息，请参见此SO帖子。 - Daniel Golden

我修改了嵌入的 onclick 操作，以检测 FireFox 浏览器并在需要时禁用代码。onclick="if (typeof InstallTrigger == 'undefined') (this.paused ? this.play() : this.pause());" 它在 Mac 版的 FireFox、Safari 和 Chrome 上运行良好。还未在 Windows 上进行测试。 - Dan Berlyoung

丹，使用Chrome在Windows上添加“controls”后，这个最新版本（onclick="if (typeof InstallTrigger == 'undefined') (this.paused ? this.play() : this.pause());")需要点击两次才能停止...如果我移除'controls'部分它可以正常工作。 - patrick

将return false;添加到防止默认行为的代码中，解决了@patrick提到的问题。但是，请注意，使用此解决方案时，双击将不会触发全屏播放。 - Alex

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

- ios-lizard

---

最后一行非常棒。感谢您。至少在 Chrome 中，我只使用那一行就没有任何问题了。对于任何对所有这些方法和属性感兴趣的人，请参见：https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video 和 https://developer.mozilla.org/en/docs/Web/API/HTMLMediaElement。 - XML

谢谢您，我找了很多地方，最终这个起作用了！ - tiadotdev

谢谢，这很棒，但它在Firefox上不起作用，因为它默认具有此行为。将此行添加到函数的开头：if (typeof InstallTrigger！=='undefined') return; - Maciej Krawczyk

非常好。它可以直接使用。我喜欢暂停切换。干得好。谢谢分享！ - user5165319

Answer 3

使用poster属性不会改变行为，它只是在加载视频时显示图像。如果想让视频自动开始播放（如果浏览器实现没有这样做），则需要执行以下操作：

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

使用jQuery的JavaScript代码：

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

希望这能有所帮助。

- tiagoboldt

---

我同意，我也以为那样会行得通，但似乎并不起作用。你还有其他想法吗？ - Andrew

可能是因为这个示例使用了jQuery，而你可能没有包含它。当然，你可能并不需要它。请查看上面emags的答案，那里有一个非jQuery的示例。 - Ian Devlin

在你的例子中，无需使用document.getElementById('video').play()，只需使用this.play()即可。 - Valjas

替换为 this.play(); - Alex Skrypnyk

@Valjas 但他可能希望页面上的每个视频都播放。/s - DickieBoy

@DickieBoy 总是有可能的。但从使用案例的角度来看，这不太可能。请记住，移动电话、平板电脑和许多其他设备不支持多个播放器同时播放视频。因此，我认为我在评论中提供的简洁代码更有可能适用于更广泛的情况。 - Valjas

Answer 4

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

我已经写了几个解决方案，但它们都不是真正的跨浏览器或100％稳定的。包括点击视频控件时出现的问题会产生意想不到的后果，导致视频停止播放。相反，我建议您使用像VideoJS这样的经过验证的解决方案：http://videojs.com/

- deepwell

---

是的，我的问题也与视频播放器控件有关。很容易为每当用户单击HTML5视频元素以播放/暂停时绑定事件侦听器。但是，当您单击以调整音频或平移视频刮板时，这也会发生。希望未来浏览器能够支持此功能。 - Jake

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

- William Frazier

Answer 6

使用 get(0) 也可以正常工作

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

- Jry

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

- Saadawy

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>

- mdf