0

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

1 に答える 1

1

これを試してください（jQueryを含める必要があります）

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

}
于 2013-06-05T22:07:58.293 に答える