CODEWITHSUNDEEP
domvideoplaybackonmouseover
Adam
Adam

Reputation: 1022

Use video DOM to pause and play .mp4 onmouseover/onmouseout

I'm putting a WordPress site together where there is a menu of thumbnails that, when clicked, will display a large video on the page.

My client would like for the thumbnails to play a few seconds of the video, in place, when the cursor is over the thumbnail, and return to its start state when the cursor comes off.

I'd seen on w3schools an instance of using buttons for this purpose. When I changed the command from onclick to onmouseover, it played/paused the video. I'd like to be able to do it directly on the video and not a button.

Here is (most of) the code from 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>

Where you can see where I changed the code from onclick to onmouseover. I guess what I'm asking is how to change the trigger from a button to the video itself.

Upvotes: 0

Views: 1834

Answers (1)

Adam
Adam

Reputation: 1022

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

Upvotes: 1

Related Questions