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

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);
    }

}