[英]html5 video redisplay poster image onMouseOut
如何“停止”html5 视频播放并恢复为海报图像? 在this.play()
之前,海报图像显示正常。
我的代码:
<video loop="loop" onMouseOver="this.play();" onMouseOut="this.pause();" poster="/oceans-clip.thumb.jpg">
<source src="/oceans-clip.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="/oceans-clip.webm" type='video/webm; codecs="vp8, vorbis"' />
</video>
这是按预期工作的,但是我想在MouseOut 上恢复到海报图像,而不仅仅是暂停视频。 有什么好方法可以做到这一点?
我一直在搜索这个问题的解决方案,显然,
史蒂夫莱西的解决方案:
当然。 你可以做相当于 'video.src = "";
似乎适用于我的 OSX 10.9,在浏览器中:Safari 7.0、Firefox 26.0 和 Chrome 31。不过我还没有在移动设备上测试过。
我已经使用用 JS 创建的视频对象对其进行了测试:
var object = document.createElement("video");
/// ... some setup like poster image, size, position etc. goes here...
/// now, add sources:
var sourceMP4 = document.createElement("source");
sourceMP4.type = "video/mp4";
sourceMP4.src = "path-to-video-file.mp4";
object.appendChild(sourceMP4);
//// same approach add ogg/ogv and webm sources
现在当我想停止视频并再次显示海报时,我只是这样做:
object.pause();
object.src = "";
但是,这还不够,因为视频将无法再次播放。 为了让它在这一点之后可玩,我删除了“src”属性(同时保留“源”子对象原样):
object.removeAttribute("src");
在此之后它的工作原理:
这篇文章很旧,但我遇到了同样的问题并像这样解决了它。
onmouseout="this.load();"
我用过它,对我很好
$('container video').hover(function () {$(this).get(0).play();}
,function () {$(this).get(0).load();});});
这对我有用:
<div class="rollover">
<video class="thevideo" loop poster="" height="100" width="250">
<source src="" type="video/mp4" >
Your browser does not support the video tag.
</video>
</div>
<script>
var figure = $(".rollover").hover( hoverVideo, hideVideo );
function hoverVideo(e) {
$('video', this).get(0).play();
}
function hideVideo(e) {
$('video', this).get(0).pause();
v=$('video', this).get(0).currentSrc;
$('video', this).get(0).src = "";
$('video', this).get(0).src = v;
}
</script>
<script type="text/javascript">
function videostop() {
window.location.reload()
}
</script>
这不会真正停止您的视频,它会重新加载整个文档。 将显示“海报框架”。
里奇
PS我来自德国。 对不起,如果我的英语不好。 但我认为,我的 JavaScript 没问题 :-)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.