html5视频在MouseOut时重新显示海报图像

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>

这按预期工作，但是我想在MouseOut 上恢复到海报图像，而不是仅仅暂停视频。有什么好的方法可以做到这一点？

Answer 1

规范排除了这种情况：

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

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

Answer 2

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

史蒂夫·莱西的解决方案：

当然。您可以执行相当于 '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");

此后它可以工作：

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

这对我有用：

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

Answer 6

您可以使用：

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

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

里奇

PS我来自德国。
抱歉，如果我的英语不好。
但我认为，我的 JavaScript 没问题:-)