9

多くのビデオを含むページがあり、各ビデオを で再生しmouseOver、 で一時停止したいと考えていmouseOutます。

video1 で動作していますが、video2 などで動作させたいと考えています。

<!DOCTYPE html> 
<html> 
<body> 

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

<script> 
var myVideo=document.getElementById("video1"); 

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

</body> 
</html>
4

4 に答える 4

9

Etienne Miret の回答に基づくと、最小限の実装では特定の機能はまったく必要ありません。

設定するだけonmouseover="this.play()"でonmouseout="this.pause()"うまくいくはずです：

<div style="text-align:center"> 
  <video id="video1" width="420" onmouseover="this.play()" onmouseout="this.pause()">
    <source src="mov_bbb.mp4" type="video/mp4">
    <source src="mov_bbb.ogg" type="video/ogg">
    Your browser does not support HTML5 video.
  </video>
  <video id="video2" width="420" onmouseover="this.play()" onmouseout="this.pause()">
    <source src="mov_bbb.mp4" type="video/mp4">
    <source src="mov_bbb.ogg" type="video/ogg">
    Your browser does not support HTML5 video.
  </video>
</div>
于 2013-10-03T13:57:31.863 に答える
2

再生/一時停止するビデオへの参照を渡す必要があります。例:

<div style="text-align:center"> 
  <video id="video1" width="420" onmouseover="playPause('video1')" onmouseout="playPause('video1')">
    <source src="mov_bbb.mp4" type="video/mp4">
    <source src="mov_bbb.ogg" type="video/ogg">
    Your browser does not support HTML5 video.
  </video>
  <video id="video2" width="420" onmouseover="playPause('video2')" onmouseout="playPause('video2')">
    <source src="mov_bbb.mp4" type="video/mp4">
    <source src="mov_bbb.ogg" type="video/ogg">
    Your browser does not support HTML5 video.
  </video>
</div> 

<script> 

function playPause(videoID)
{ 
var myVideo=document.getElementById(videoID); 

if (myVideo.paused) 
  myVideo.play(); 
else 
  myVideo.pause(); 
} 
</script>
于 2013-10-03T13:03:36.527 に答える