html5视频在MouseOut上重新显示海报图像 [英] html5 video redisplay poster image onMouseOut

问题描述

如何停止" HTML5视频播放并恢复为海报图像?在调用this.play()之前，海报图像将正确显示.

How can I 'stop' a html5 video playback, and revert to poster image? Until this.play() is called, the poster image is showing properly.

我的代码:

<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上的海报图像，而不仅仅是暂停视频.有什么好方法吗?

This is working as expected, however I want to revert to poster image onMouseOut instead of just pausing the video. What's a good way to do this?

推荐答案

spec 排除:

在显示视频帧之后，不应再次显示海报帧

the poster frame should not be shown again after a frame of video has been shown

即如果您想要与规范不同的行为，则需要自己实施，也许是通过使用将包含所需图像的视频叠加在元素上然后隐藏/显示它来实现的.

I.e. if you want behaviour different to the spec you'll need to implement it yourself, maybe by using an element that overlays the video which contains the desired image and then hide/show it.

这篇关于html5视频在MouseOut上重新显示海报图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！