jQuery 单击 HTML5 视频播放的海报图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5278262/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Click the poster image the HTML5 video plays?
提问by Andrew
I have an HTML5 video with a poster attribute. I would like to somehow set it up so that you can click on anywhere on the video element (the area of the poster image) and it will fire the play event and start the video? I feel like this is fairly standard practice, but I can not find a way to do this without flash. Any help would be much appreciated.
我有一个带有海报属性的 HTML5 视频。我想以某种方式设置它，以便您可以单击视频元素上的任何位置（海报图像的区域），它会触发播放事件并启动视频？我觉得这是相当标准的做法，但我找不到没有闪光灯的方法。任何帮助将非常感激。
回答by emags
This is working for me Andrew.
这对我有用，安德鲁。
In your html head add this small piece of js:
在你的 html 头部添加这小块 js：
var video = document.getElementById('video');
video.addEventListener('click',function(){
video.play();
},false);
Or, just add an onlick attribute directly to your html element:
或者，只需将 onlick 属性直接添加到您的 html 元素：
<video src="your_video" width="250" height="50" poster="your_image" onclick="this.play();"/>
回答by ios-lizard
Posted this heretoo but this applies to this thread too.
I had countless issues doing this but finally came up with a solution that works.
我在这样做时遇到了无数问题，但最终想出了一个有效的解决方案。
Basically the code below is adding a click handler to the video but ignoring all the clicks on the lower part (0.82 is arbitrary but seems to work on all sizes).
基本上，下面的代码向视频添加了一个点击处理程序，但忽略了下部的所有点击（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();
}
});
回答by tiagoboldt
Using the poster attribute does not alter the behavior. It just shows that image while loading the video. Having the video to automatically start (if the browser implementation does not do that), then you have to do something like:
使用海报属性不会改变行为。它只是在加载视频时显示该图像。让视频自动启动（如果浏览器实现没有这样做），那么您必须执行以下操作：
<video id="video" ...></video>
<video id="video" ...></video>
in javascript using jquery:
在 javascript 中使用 jquery：
$('#video').click(function(){
document.getElementById('video').play();
});
Hope it helps
希望能帮助到你
回答by deepwell
Yes, that sounds like a regular feature the browser creators or html spec writers just "forgot".
是的，这听起来像是浏览器创建者或 html 规范编写者刚刚“忘记”的常规功能。
I've written a couple solutions but none of them are truly cross browser or 100% solid. Including problems with clicking on the video controls has the unintended consequence of stopping the video. Instead I would recommend you use a proven solution such as VideoJS: http://videojs.com/
我写了几个解决方案，但没有一个是真正跨浏览器或 100% 可靠的。包括点击视频控件的问题会导致停止视频的意外后果。相反，我建议您使用经过验证的解决方案，例如 VideoJS：http://videojs.com/
回答by William Frazier
I was doing this in react and es6. Here is a modern version I made after reading Daniel Golden's solution:
我是在 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>
)
}
回答by Jry
Using get(0) also works
使用 get(0) 也有效
var play = $('.playbutton');
var video = $('#video');
play.click(function(){
video.get(0).play();
})
回答by mdf
<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>
