Question

我正在使用html5视频进行沙盒实验，并且想知道如果最终用户将视频暂停后再次显示海报图像？

我有视频设置，因此如果您将鼠标悬停在视频上可以自动播放，如果您将其悬停，则会停止播放。我希望它能回到海报图片。

Javascript

<script>

document.addEventListener('mouseover',hoverVideo,false);
var vid = document.getElementById('vid1');

function hoverVideo(a)
{    
    if(a.target == vid)
    {
        vid.play();
        this.addEventListener('mouseout',hideVideo,false);
    }

}
function hideVideo(e)
{
    if(e.target == vid)
    {
        vid.pause();
    }

}

</script>

HTML5

<video id="vid1" width="1000" height="418" 
poster="poster.png" loop="true" preload="auto"
controls class="video-js vjs-default-skin">

 <source src="my_video.mp4" type='video/mp4' >
 <source src="my_video.webm" type='video/webm' />
 <source src="my_video.ogv" type='video/ogg' />

</video>

Answer 1

试试这个（你需要包含jQuery）

function hideVideo(e)
{
    if(e.target == vid)
    {
        vid.pause();
        var poster = $(vid).attr("poster");
        $(vid).attr("poster", "");
        $(vid).attr("poster", poster);
    }

}

HTML5视频 - 悬停/关闭悬停返回海报图像？

1 个答案: