CODEWITHSUNDEEP
javascripthtml
Mohamed Nageh Otafy
Mohamed Nageh Otafy

Reputation: 19

how to make my video play when hover on it with pure javascript

i try to do this with many different way but i didn't get the result i want so can anyone help 

<div style="width:500px;height:500px;">
    <video controls autoplay width="400" height="400">
        <source src="video/2.mp4" type="video/mp4">
    </video>    
</div>

and here is the only answer i found when i search but i dont understand it well and there is jquery on it i want to make it pure javascript 

var figure = $(".video");
var vid = figure.find("video");

[].forEach.call(figure, function (item,index) {
item.addEventListener('mouseover', hoverVideo.bind(item,index), false);
item.addEventListener('mouseout', hideVideo.bind(item,index), false);
});

function hoverVideo(index, e) {
vid[index].play(); 
}

function hideVideo(index, e) {
vid[index].pause(); 
}

Upvotes: 0

Views: 11846

Answers (2)

Alex Feinstein
Alex Feinstein

Reputation: 391

The answer is pretty simple: 

document.getElementById("myVid").addEventListener("mouseover", function() {
	this.play();
});

document.getElementById("myVid").addEventListener("mouseleave", function() {
	this.pause();
});
<div style="width:500px;height:500px;">
    <video id="myVid" controls autoplay width="400" height="400">
        <source src="https://www.w3schools.com/tags/mov_bbb.mp4" type="video/mp4">
    </video>    
</div>

Upvotes: 6

Roman Mahotskyi
Roman Mahotskyi

Reputation: 6625

This should work for you. You can find more information here about HTML5 video API.

const videoPlayer = document.querySelector('.videoplayer');

videoPlayer.addEventListener('mouseover', () => {
    videoPlayer.play();
});
<p>Hover canvas to play the video</p>
<video class="videoplayer" width="320" height="240">
  <source src="https://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4">
</video>

Upvotes: 1

Related Questions