Develop Reference

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();
}

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>

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>

Create a buffering video on seek, pause or play

I want to create a buffer gif when user seeks, play or pause the video. I am able to succeed a bit but I can'f figure out how to do this on seek. This is my code.
HTML:
<div class="row text-center">
<video width="320" height="240" controls id="video1" onplay="buffer(this.id)" poster="" class="">
<source src="http://distribution.bbb3d.renderfarming.net/video/mp4/bbb_sunflower_1080p_30fps_normal.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<br/>
<div class="row text-center">
<video width="320" height="240" controls id="video2" onplay="buffer(this.id)" poster="" class="">
<source src="http://www.html5videoplayer.net/videos/toystory.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
CSS:
video.loading {
background: black url("img/loader_old.gif") center center no-repeat;
z-index: 300000 !important;
}
JQUERY:
function buffer(id){
$('#'+id).on('loadstart', function (event) {
$(this).addClass('loading');
});
$('#'+id).on('canplay', function (event) {
$(this).removeClass('loading');
$(this).attr('poster', '');
});
}

You can set the value of poster attribute to .gif at html, remove value at canplay event, where you call $(this).attr('poster', '');
<div class="row text-center">
<video width="320" height="240" controls id="video1" poster="img/loader_old.gif" class="">
<source src="http://distribution.bbb3d.renderfarming.net/video/mp4/bbb_sunflower_1080p_30fps_normal.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<br/>
<div class="row text-center">
<video width="320" height="240" controls id="video2" poster="img/loader_old.gif" class="">
<source src="http://www.html5videoplayer.net/videos/toystory.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
$(function() {
$("video").each(function() {
$(this).on("canplay", function (event) {
$(this).attr("poster", "");
})
})
});

HTML / JavaScript Make a video play once a condition is met

For my website, I wanted a specific video to play, once a condition is met.
e.g (If x = 1, play the video)
I have this code in the HTML file:
<div id="video">
<video width="320" height="240" autoplay,>
<source src=video_mp4 type="video/mp4">
<source src=video_ogg type="video/ogg">
Your browser does not support the video tag.
</video>
</div>
And in the JavaScript file:
document.getElementById("video").innerHTML.source.src = video_mp4;
document.getElementById("video").innerHTML.source.src = video_ogg;
But it doesn't seem to work.

You can use the following :
<video id="video1" src="vid.mp4"></video>
<script>
function playVideo(){
var video= document.getElementById("video1");
video.load();
video.play();
}
</script>

HTML 5 video player external control

I'm using html5 video player to play some videos and trying to use external controls with javascript. manage to get the player play and pause. but i cannot get it to mute and unmute using the buttons. if someone can help with this matter its highly appropriated.
Here is the HTML code
<video id="myMovie" width="600" height="600" loop preload="auto" video poster="img.jpg" controls>
<source src="my-video-file.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<button id="playButton">Play</button>
<button id="volButton">Mute</button>
JavaScript Code
function playMymovie() {
var element = document.getElementById('myMovie');
var element = document.getElementById('pbutton');
playButton.addEventListener('click', PlayOrPause, false);
volButton.addEventListener('click', VolMute, false);
}
function PlayOrPause() {
if(!myMovie.paused && !myMovie.ended) {
myMovie.pause();
}else{
myMovie.play()
}
}
function VolMute(){
if(!myMovie.muted){
myMovie.muted(true);
}else{
myMovie.muted(false);
}
}
Thanks in advance.

<html>
<body>
<div style="text-align:center">
<button onclick="playPause()">Play/Pause</button>
<button onclick="muteUnMute()">Mute/UnMute</button>
<br>
<video id="video1" width="420">
<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();
}
function muteUnMute()
{
if( !myVideo.muted)
myVideo.muted='muted';
else
myVideo.muted=false;
}
</script>
</body>
</html>

Try this:
var videoObject = document.getElementById('myMovie');
videoObject.muted = !videoObject.muted;

Javascript HTML5 audio - Dont play sound if already playing?

I have set up some HTML audio on my site and I have set an autoplay function after a couple of seconds, however the sound seems to be loading twice? one starts playing straight after the other although, one is a ghost and cannot see a player for it.
How could I go about telling javascript not to start playing sounds if there are already sounds playing?
<audio controls="controls" onloadeddata="var audioPlayer = this; setTimeout(function() { audioPlayer.play(); }, 2000)" }>
<source src="http://www.alanis50.com/Music/music.mp3" type="audio/mp3"/>
<source src="http://www.alanis50.com/Music/music.ogg" type="audio/ogg"/>
</audio>
The above issue has been solved however I wanted to add a flash fallback for this audio for internet explorer and so added:
<div id ="audio">
<script>var readingMusic = false; </script>
<audio controls="controls" loop="loop" onloadeddata="var audioPlayer = this; if (!readingMusic){readingMusic = true;setTimeout(function() { audioPlayer.play(); }, 2000)}" }>
<source src="http://www.alanis50.com/Music/music.mp3" type="audio/mp3"/>
<source src="http://www.alanis50.com/Music/music.ogg" type="audio/ogg"/>
<embed type="application/x-shockwave-flash" flashvars="audioUrl=http://www.alanis50.com/Music/music.mp3&autoPlay=true" src="http://www.google.com/reader/ui/3523697345-audio-player.swf" width="400" height="27" quality="best" wmode="transparent"></embed>
</audio>
</div>
<div id="audiohide">
<audio controls="controls" loop="loop" onloadeddata="var audioPlayer = this; if (!readingMusic){readingMusic = true;setTimeout(function() { audioPlayer.play(); }, 2000)}" }>
<source src="http://www.alanis50.com/Music/music.mp3" type="audio/mp3"/>
<source src="http://www.alanis50.com/Music/music.ogg" type="audio/ogg"/>
<embed type="application/x-shockwave-flash" flashvars="audioUrl=http://www.alanis50.com/Music/music.mp3&autoPlay=true" src="http://www.google.com/reader/ui/3523697345-audio-player.swf" width="400" height="27" quality="best" wmode="transparent"></embed>
</audio>
</div>
But now the flash audio is behaving how the previous audio did obviously the javascript is not affecting the flash embed?

Can't you have a boolean telling the browser if there is already some music playing ?
Example with 2 tags:
<script>var readingMusic = false; </script>
<audio controls="controls" onloadeddata="var audioPlayer = this; if (!readingMusic){readingMusic = true;setTimeout(function() { audioPlayer.play(); }, 2000)}" }>
<source src="http://www.alanis50.com/Music/music.mp3" type="audio/mp3"/>
<source src="http://www.alanis50.com/Music/music.ogg" type="audio/ogg"/>
</audio>
<audio controls="controls" onloadeddata="var audioPlayer = this; if (!readingMusic){readingMusic = true;setTimeout(function() { audioPlayer.play(); }, 2000)}" }>
<source src="http://www.alanis50.com/Music/music.mp3" type="audio/mp3"/>
<source src="http://www.alanis50.com/Music/music.ogg" type="audio/ogg"/>
</audio>

Well, that's a part of your jScript.js.
It seems that problem is in this line:
location = base + "/#" + current.replace(base, "");
You navigating to the new url without leaving current page(if origins are the same and the only difference is in hashes). I recommend you to start playing audio after changing location origin.
So you might place your autoplay logick right after this location changes.