We Keep Coding

Stop playing ( not pause ) HTML5 video on mouseout

Is there any way we can make a HTML5 video to completely stop a video on mouseout?
By stop I mean resetting the video state, just as refreshing the page. All I could get is having the video on pause on mouseout, but this is not what I want.
Thank you.
jsbin:
https://jsbin.com/fenixinuku/edit?html,css,js,output
HTML:
<video class="myvideo" src="http://vjs.zencdn.net/v/oceans.mp4" width="auto" height="auto" alt=""></video>
JS:
$(document).ready(function() {
$(".myvideo").on("mouseover", function(event) {
$(this).get(0).play();
}).on('mouseout', function(event) {
$(this).get(0).pause();
});
})
EDIT:
Thank you guys, based on your answers I made an alternative to this by displaying the video poster as the first frame ( Thank you Terence Eden for suggestion).
The only small issue is that the image poster is flickering on mouseout..Any better solution ?
HTML:
<video class="myvideo" src="http://vjs.zencdn.net/v/oceans.mp4" width="auto" height="auto" alt="" poster="https://www.w3schools.com/images/w3html5.gif"></video>
JS:
$(document).ready(function() {
$(".myvideo").on("mouseover", function(event) {
$(this).get(0).play();
}).on('mouseout', function(event) {
this.load();
});
})
demo 2 jsbin: https://jsbin.com/kivisutici/1/edit?html,css,js,output

Removing the video src property and adding it again should work. Try this inside the mouseout event:
var video = $(this).get(0);
var source = video.src;
video.src = "";
video.src = source;

You can do two things.
First, set the current time to 0.
$(this).get(0).currentTime = 0;
That returns the player position to 0 mins, 0 seconds - as though you had refreshed the page.
Secondly, you can set the poster for the video. By default this is the first frame of the video - but you can set it to any external JPG that you want.

You need to change you mouseout to this
.on('mouseout', function(event) {
$(this).get(0).currentTime = 0
$(this).get(0).pause();
});
Demo

Please try the following and let me know if it worked for you.
// Link here: https://www.w3schools.com/tags/av_prop_currenttime.asp
$(".myvideo"). mouseout(function() {
$(this).get(0).currentTime = 0;
});
or
$(".myvideo"). mouseout(function() {
$(this).currentTime = 0;
});

This is the sample code for stop video, using pause function on mouse-out in HTML5.
<script>
function testover(e)
{
//e.src="movie.mp4";
e.play();
}
function testout(ee)
{
ee.pause();
ee.currentTime =0;
//ee.src=null;
}
</script>
<video width="320" height="240" onmouseover="testover(this)" onmouseout="testout(this)" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Please neglect if it is not useful.

How to change a children type using Javascript

I am using Video.js and I want to play both YouTube and mp4 videos. I have the following code for my player
<video id="my-video" class="video-js vjs-big-play-centered" data-setup='{ "controls": true, "autoplay": true, "preload": "auto" }' width="1250" height="900" poster="" data-setup='{" techOrder ": ["youtube "]}'>
<source src="https://www.youtube.com/watch?v=_Z_Se7eJNiM" type='video/youtube'>
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a web browser that
supports HTML5 video
</p>
Here is the code used to change the source whenever a link with the id (source_one) is clicked:
var a = document.getElementById('source_one');
a.addEventListener('click', function() {
document.getElementById("my-video").children[0].src = "http://example.com/video.mp4";
})
The Problem is that i cannot find a way to change the source type to video/mp4, using src changes the source of the video but does not change the type.

I just found out the Solution! Thanks for the answers so far.
var a = document.getElementById('source_one');
a.addEventListener('click', function(e) {
e.preventDefault();
var player = window.player = videojs('my-video');
var vidlink = $(this).attr('href');
player.src({
src: 'http://example.com/test.mp4',
type: 'video/mp4'
});
})

You could try this
document.getElementById("my-video").children[0].setAttribute("type", "video/mp4");

As 'Bas Pauw' said load() is the key.
Just an example for Javascript without libraries:
Courtesy w3schools.
<button onclick="myFunction()" type="button">Change Video</button><br>
<video id="myVideo" controls>
<source id="mp4_src" src="https://www.w3schools.com/tags/mov_bbb.mp4">
</video>
<script>
function myFunction() {
document.getElementById("mp4_src").src = "https://www.w3schools.com/tags/movie.mp4";
document.getElementById("myVideo").load();
}
</script>

You should change the source with Video.js's API.
videojs('my-video').src({
src: 'http://example.com/video.mp4',
type: 'video/mp4'
});
Directly manipulating a source element won't work when the player is initialised. You need to use the src() API so that Video.js can load the right tech for the source, e.g. Html5 or YouTube.

Change certain video source on click

I'am wondering how I could go about changing only one of the following two sources to webm and the other to .mp4 in my video tag:
HTML:
<video controls="controls" preload="auto" id="video" onclick="this.play();">
<source src="fragmenten/real_schade.mp4" type="video/mp4"> </source>
<source src="fragmenten/real_schade.webm" type="video/webm"> </source>
Your browser doesn't support the video element.
</video>
JQuery:
var bvideo = document.getElementById('background');
$("#car").on('click', function(){
bvideo.pause();
showPlaceHolder();
showVID();
$("#video").attr("src","fragmenten/real_schade2.mp4");
$('#video').attr("autoplay", "autoplay");
});
This only inserts a source into the tag directly, how can I change the two sources I've given with the video tag to change to .mp4 and .webm and not change both sources to one source / insert a video src into the tag

If you want to replace all sources dynamicall without changing the file extension you can do this:
$(document).ready(function () {
changeVideoTo("fragmenten/real_schade2");
});
function changeVideoTo(name) {
$("#video source").each(function () {
var oldSource = $(this).attr("src");
var fileExtension = oldSource.split(".")[1]
$(this).attr("src", name + "." + fileExtension);
});
}
Fiddle: http://jsfiddle.net/beznbxqc/2/

$("#video source:nth-of-type(1)").attr('src', videoFile);
$("#video video")[0].load()
Try this:

Try to use this code to change the first source:
$("#video source:first-of-type").attr("src","first/source.mp4");
and this to change the second source:
$("#video source:last-of-type").attr("src","first/source.webm");
I hope it works :D

video.js plugins not working

I'm trying to get any plugins from video.js to work, but I keep getting the errors as it pertains to videojs('video_example_1), saying videojs is not defined. I copied the code from a recent plugin just to see if I'm doing something wrong. The exact error I'm getting is:
TypeError: vjs is undefined
var video = videojs('video_example_1'); (line 41)
ReferenceError: videojs is not defined
Can someone help? Some code pasted below:
<link href="//vjs.zencdn.net/4.4/video-js.css" rel="stylesheet">
<link href="http://theonion.github.io/videojs-endcard/stylesheets/videojs.endcard.css"
rel="stylesheet">
<script src="//vjs.zencdn.net/4.4/video.js"></script>
<script src="http://theonion.github.io/videojs-endcard/javascripts/videojs.endcard.js">
</script>
<video
id="example_video_1" class="video-js vjs-default-skin" controls preload="auto"
width="640" height="264"
data-setup='{"example_option":true}'>
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
<source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
</video>
<script>
// Sync or Async, you decide.
function getRelatedContent(callback) {
var div = document.createElement('div');
var p = document.createElement('p');
p.innerHTML = "So Cool You'll HAVE to Click This!";
div.appendChild(p);
setTimeout(function(){
// Needs an array
callback([div]);
}, 0);
}
function getNextVid(callback) {
var div = document.createElement('div');
var anchor = document.createElement('a');
anchor.innerHTML = "Users will be taken to the VideoJS website after 10 seconds!"
anchor.href = "http://www.videojs.com/"
div.appendChild(anchor)
setTimeout(function(){
callback(div);
}, 0);
}
var video = videojs('video_example_1');
video.endcard({
getRelatedContent: getRelatedContent,
// getNextVid: getNextVid //uncomment this for auto-playing video
})
</script>

Try executing your whole code after DOM has been successfully loaded, using onload handler on body:
[...]
<body onload="myOnLoadHandlerHere">...</body>
[...]
JS script:
function myOnLoadHandlerHere() {
// Main logic here
}
It also seems that your video tag has id="example_video_1" but in your js code, you're trying to refer the id: video_example_1.

In line here:
var video = videojs('video_example_1');
video.endcard({
getRelatedContent: getRelatedContent,
// getNextVid: getNextVid //uncomment this for auto-playing video
})
replace to:
var video = videojs('video_example_1');
video.endcard({
getRelatedContent: getRelatedContent
})

use webkit-playsinline in javascript

How do I use webkit-playsinline in javascript instead of in html5 video tag? I want to use it just like using video tag control/autoplay attribute in javascript or if you guys have any other method that is working? I'm working on a PhoneGap iOS app that stream video.
Below is some approach that I have tried but none are working:
videoPlayer.WebKitPlaysInline = "webkit-playsinline";
videoPlayer.WebKitPlaysInline = "WebKitPlaysInline";
videoPlayer.webkit-playsinline = "webkit-playsinline";
videoPlayer.WebKitPlaysInline = "true";
videoPlayer.WebKitPlaysInline = true;
videoPlayer.webkit-playsinline = "true";
videoPlayer.webkit-playsinline = true;
My current code(js):
function loadPlayer() {
var videoPlayer = document.createElement('video');
videoPlayer.controls = "controls";
videoPlayer.autoplay = "autoplay";
videoPlayer.WebKitPlaysInline = true;
document.getElementById("vidPlayer").appendChild(videoPlayer);
nextChannel();
}
My current code(html):
<body onload="loadPlayer(document.getElementById('vidPlayer'));"><!-- load js function -->
<li><span class="ind_player"><div id="vidPlayer"></div></span></li><!-- video element creat here -->
Any helps are much appreciate. Thanks.

You can do this without jQuery:
var videoElement = document.createElement( 'video' );
videoElement.setAttribute('webkit-playsinline', 'webkit-playsinline');
You have to activate this functionality in your iOs application's WebView :
webview.allowsInlineMediaPlayback = true;
You can check this post for more details:
HTML5 inline video on iPhone vs iPad/Browser

You need to attach it to the video element and set it as video's attribute
such as :
<video class="" poster="" webkit-playsinline>
<source src="" type="video/ogg" preload="auto">
<source src="" type="video/mp4" preload="auto">
</video>
so you could do (with jQuery) :
$('video').attr('webkit-playsinline', '');