2012-03-24 3 views
0

Я помещаю сайт WordPress вместе, где есть меню миниатюр, которые при нажатии будут отображать большое видео на странице.Использовать видео DOM для паузы и воспроизведения .mp4 onmouseover/onmouseout

Мой клиент хотел бы, чтобы миниатюры воспроизводили несколько секунд видео, на месте, когда курсор находится над миниатюрой, и верните его в начальное состояние при выключении курсора.

Я видел на w3schools экземпляр использования кнопок для этой цели. Когда я сменил команду onclick на onmouseover, он воспроизвел/приостановил видео. Я хотел бы иметь возможность сделать это прямо на видео, а не на кнопке.

Здесь (в большинстве случаев) кода из W3Schools:

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

Где вы можете увидеть, где я изменил код из OnClick для OnMouseOver. Я предполагаю, что я спрашиваю, как изменить триггер с одной кнопки на видео.

ответ

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> 

 Смежные вопросы

  • Нет связанных вопросов^_^