html5视频重新显示海报图像onMouseOut答案

【问题标题】：html5 video redisplay poster image onMouseOuthtml5视频重新显示海报图像onMouseOut
【发布时间】：2011-05-07 11:49:21
【问题描述】：

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

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

【问题讨论】：

标签： javascript html video html5-video

【解决方案1】：

spec 排除了这一点：

一帧视频播放完毕后，海报帧不应再次显示

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

【讨论】：

所以没有办法“卸载”视频，并使用 javascript 恢复到初始状态？
当然。你可以做相当于 'video.src = "";'。
你也可以直接说video.load()
如果您有自定义控件，Video.load() 会中断缓冲区事件。

【解决方案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' 属性（同时保留了 'source' 子对象）：

object.removeAttribute("src");

在此之后它起作用了：

播放视频
停止视频后，海报将重新出现
可以再次播放相同的视频

【讨论】：

element.src = ''; element.removeAttribute('src'); 确实可以在所有浏览器中使用。谢谢！
嘿 Sinisa，我在我的 html 视频中使用了你的方法。但它仍然不会回到图像部分。这是demo 你介意看看吗？谢谢！特别是看看 JS resetVideo() 方法。！谢谢！
@JavaLeave 我检查了，我不确定一旦您单击并开始播放视频，是否会处理下一次单击事件。我可以看到 vid 和 vid2 和 vid3 都指向同一个 div。是这样打算的吗？即使我把回报;在 imageClickPlay() 函数中点击时视频仍然播放？
@Sinisa imageClickPlay() 函数假设当您单击图像时，视频将播放或暂停。
@JavaLeave 我明白了，但我对这个问题的理解是如何在视频停止时返回海报，对吗？（抱歉回复晚了，很久才登录这里）

【解决方案3】：

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

onmouseout="this.load();"

【讨论】：

非常简单但出色的解决方案，正是我想要的！

【解决方案4】：

我用过，对我很好

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案6】：

您可以使用：

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

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

里奇

附：我来自德国。对不起，如果我的英语不好。但我认为，我的 JavaScript 没问题 :-)

【讨论】：

这不是 OP 要求的。
重新加载整个文档是多余的。它会擦除页面上的其余内容。