html5视频重新显示海报图片onMouseOut

Question

如何“停止”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>

这是按预期工作，但我想恢复到onMouseOut上的海报图片而不是暂停视频。这样做的好方法是什么？

Answer 1

spec对此进行了规定：

显示一帧视频后，不应再显示海报帧

即如果你想要与你自己需要实现它的规范不同的行为，可能是通过使用覆盖包含所需图像的视频然后隐藏/显示它的元素。

Answer 2

我一直在谷歌上搜索这个问题的解决方案，显然，

Steve Lacey的解决方案：

当然。你可以做相当于'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'属性（同时保留'source'子对象）：

object.removeAttribute("src");

在此之后它起作用：

1. 播放视频
2. 关于停止视频，海报将重新出现
3. 可以再次播放相同的视频

Answer 3

这篇文章很老但我遇到了同样的问题并且像这样解决了。

onmouseout="this.load();"

Answer 4

我用它，对我很好

$('container video').hover(function () {$(this).get(0).play();}
   ,function () {$(this).get(0).load();});});

Answer 5

您可以使用：

    <script type="text/javascript">
    function videostop() {
      window.location.reload()
    }
    </script>

这不会真正阻止您的视频，它将重新加载整个文档。将显示“海报框架”。

任贤齐

附：我来自德国。对不起，如果我的英语不好。但我想，我的JavaScript还可以:-)