Используйте видео DOM для паузы и воспроизведения .mp4 onmouseover / onmouseout - PullRequest
Новая
       19

Используйте видео DOM для паузы и воспроизведения .mp4 onmouseover / onmouseout

0 голосов
/ 24 марта 2012

Я собираю сайт WordPress, где есть меню миниатюр, при нажатии на которое на странице отображается большое видео.

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

Я видел в 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 Ответ

1 голос
/ 24 марта 2012 
   <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>
...