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

时间:2011-05-07 11:49:21

标签: javascript html5 video html5-video

如何'停止'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上的海报图片而不是暂停视频。有什么好办法呢?

6 个答案:

答案 0 :(得分:9)

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

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. 可以再次播放同一视频

答案 1 :(得分:8)

spec对此进行了规定:

  

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

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

答案 2 :(得分:1)

这篇文章很老但是我有同样的问题并且像这样解决它。

onmouseout="this.load();"

答案 3 :(得分:0)

我用过它,对我来说很好

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

答案 4 :(得分:0)

这对我有用:

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

答案 5 :(得分:-5)

您可以使用:

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

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

里奇

  

P.S。我来自德国。   对不起,如果我的英语不好。   但我想,我的JavaScript还可以: - )