2012-03-24 17 views
0

クリックしたときにページに大きなビデオが表示されるサムネイルのメニューがあるところにWordPressサイトをまとめています。ビデオDOMを使用して一時停止して再生します.mp4 onmouseover/onmouseout

私のクライアントは、カーソルがサムネイルの上にあるときにサムネイルが数秒間ビデオを再生し、カーソルがオフになったときにその開始状態に戻ることを望みます。

私はこの目的のためにボタンを使用しているインスタンスをw3schoolsで見ました。コマンドをonclickからonmouseoverに変更したとき、ビデオを再生/一時停止しました。私はビデオではなく、ボタンで直接行うことができるようにしたいと思います。私はonclickのからのonmouseoverにコードを変更する場所を見ることができます

<div style="text-align:center"> 
    <button onmouseover="playPause()">Play/Pause</button> 
    <br /> 
    <video id="video1" width="420"> 
    <source src="movie.mp4" type="video/mp4" /> 
    <source src="movie.ogg" type="video/ogg" /> 
    Your browser does not support HTML5 video. 
    </video> 
</div> 

<script type="text/javascript"> 
var myVideo=document.getElementById("video1"); 

function playPause() 
{ 
if (myVideo.paused) 
    myVideo.play(); 
else 
    myVideo.pause(); 
} 
</script> 

:ここ

は、W3Schoolsのからのコード(のほとんど)です。私は、ボタンからビデオ自体にトリガーを変更する方法を聞いていると思います。

答えて

1
<html> 
<head> 
</head> 
<body> 
<div style="text-align:center" onmouseout="playPause()"> 
    <video id="video1" width="160"> 
    <source src="movie.mp4" type="video/mp4" /> 
    <source src="movie.ogg" type="video/ogg" /> 
    Your browser does not support HTML5 video. 
    </video> 
</div> 

<script type="text/javascript"> 
var myVideo=document.getElementById("video1"); 

function playPause() 
{ 
if (myVideo.paused) 
    myVideo.play(); 
else 
    myVideo.pause(); 
} 
</script> 
</body> 
</html> 
関連する問題