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
Related
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.
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.
I manage to make a script where I can change the video source without reloading the whole page, but the problem is that after the new source is loaded, the player is not and I only get a black box.
HTML:
<link href="//vjs.zencdn.net/4.12/video-js.css" rel="stylesheet">
<script src="//vjs.zencdn.net/4.12/video.js"></script>
<video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered" controls autoplay preload="auto" width="850" height="400" data-setup='{"example_option":true}'>
<source id="videoMP4" src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
</video>
<div class="menu1">menu1</div>
<div class="menu2">menu2</div>
<div class="menu3">menu3</div>
<div class="menu4">menu4</div>
JavaScript:
$(".menu1").click(function() {
document.getElementById("example_video_1").innerHTML = "<source src=\"http:\/\/video-js.zencoder.com\/oceans-clip.mp4\" type='video\/mp4' \/>";
});
$(".menu2").click(function() {
document.getElementById("example_video_1").innerHTML = "<source src=\"http:\/\/techslides.com\/demos\/sample-videos\/small.mp4\" type='video\/mp4' \/>";
});
$(".menu3").click(function() {
document.getElementById("example_video_1").innerHTML = "<source src=\"http:\/\/video-js.zencoder.com\/oceans-clip.mp4\" type='video\/mp4' \/>";
});
$(".menu4").click(function() {
document.getElementById("example_video_1").innerHTML = "<source src=\"http:\/\/techslides.com\/demos\/sample-videos\/small.mp4\" type='video\/mp4' \/>";
});
Full code and example: http://codepen.io/BeBeINC/pen/PqydVM
Use the .load() function. You should pause it to prevent the audio from keeping on playing.
var video = document.getElementById('example_video');
var source = document.getElementById('videoMP4');
$("ELEMENT").click(function() {
video.pause()
source.setAttribute('src', 'NEW MP4');
video.load();
video.play();
});
You can do it like that
var player = videojs(document.querySelector('.video-js'));
player.src({
src: 'videoURL,
type: 'video/mp4'/*video type*/
});
player.play();
You should change the video's source using the player's API, specifically the src() method:
yourPlayer.src("http://foo.com/bar.mp4");
just do it this after you filled other attributes by JS:
$('#player')[0].load();
I Faced Similar Problem But Solved it By Changing the Poster source dynamically first then accessing the vjs poster class and changing its style, have a look at code :
$('#videoPlayer video').attr('poster', "https://dummyimage.com/hd1080");
document.querySelector("vjs-poster")[0].style.backgroundImage = "https://dummyimage.com/hd1080";
I have multiple videos on my website that has multiple codecs for multiple browsers.
<video id="video2" width="480" height="270">
<source src="movies/vid2.ogv" type="video/ogg">
<source src="movies/vid2.webm" type="video/webm">
<source src="movies/vid2.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
I only need to show one video at a time. so i have
onClick="changevid(A)
the onClick is working fine, changing the vids. but how do i change all 3 of them?
vid1.ogv
vid1.webm
vid1.mp4
i can only change 1 by doing
var A = 'movies/vid1.mp4';
function changevid(q){
document.getElementById('video2').setAttribute('src', q);
}
Thanks
Maybe this helps:
var doc = document, bod = doc.body;
function E(e){
return doc.getElementById(e);
}
function changevid(q){
E('video2').src = q;
}
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', '');