Menu
I have a page with many videos and wish to play
each video on mouseOver and pause on mouseOut.
It is working with video1, but I want to work with video2 and so on.
<!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>
385
You need to pass a reference to the video you want to play/pause. f.ex:
<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>
Use the this keyword:
onmouseover="playPause(this)"
and in your Javascript:
function playPause(video) {
if (video.paused) {
video.play();
} else {
video.pause();
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
