We Keep Coding

Not able to dynamically change source of the HTML5 Video with Javascript

Been trying to change the source video of an HTML5 video (after clicking a button). However I run into errors. Code and errors below:
Relevant HTML:
<video id="video2" playsinline controls muted preload="auto" style="z-index: -1; position: absolute;">
<source src="exercise_media/vid_exercise_sample_1.mp4" type="video/mp4" >
</video>
(regarding the z-index stuff - this video plays then is grabbed by a canvas which re-draws it, as part of the overall application. Probably not relevant but figured I'd mention it.)
Relevant Javascript. Initiates the video, plays it fine. It's a little esoteric because I started from someone else's sample.
loadCompanionVideo();
export async function loadCompanionVideo() {
setStatusText('Setting up companion video...');
try {
video2 = await loadVideo2();
} catch (e) {
let info = document.getElementById('info');
info.textContent = '(video player) this device type is not supported yet, ' +
'or this browser does not support video capture: ' + e.toString();
info.style.display = 'block';
throw e;
}
}
async function loadVideo2() {
const video2 = await setupVideo2();
return video2;
}
async function setupVideo2() {
const video2 = document.getElementById('video2');
video2.width = videoWidth2; // some external numbers
video2.height = videoHeight2; // just to customize width and height; works fine
return video2;
}
So this is fine, my first video exercise_media/vid_exercise_sample_1.mp4 plays just fine. However, I want to change the video source to exercise_media/vid_exercise_sample_2.mp4, same format, located in same folder, etc. (I made sure this video is fine by hard-coding it into the HTML above, and it also plays just fine.)
Here's what I've been trying for changing it:
function buttonFunctionChangeVideoSrc() {
document.getElementById("video2").pause();
//document.getElementById("#video2 > source").src = "exercise_media/vid_exercise_sample_2.mp4";
document.getElementById("video2").src = "exercise_media/vid_exercise_sample_2.mp4";
document.getElementById("video2").load();
document.getElementById("video2").play();
}
To no avail, neither ("#video2 > source").src nor ("video2").src work. In the first case, the error is:
Uncaught TypeError: Cannot set property 'src' of null
at HTMLButtonElement
The video pauses and stays frozen.
In the second case, trying video2.src directly (same as document.getElementById("video2")), the error is
Uncaught (in promise) DOMException: Failed to load because no supported source was found.
The video portion of the screen goes white/blank.
Play/pause functionality works fine, so I know I have a valid reference to my video2 object. But I cannot seem to change the source. And I also know that the other source video works just fine, as I can hard-code it into the HTML and play it without issue. But I cannot seem to dynamically switch between them.
Any help is much appreciated.
Adding more of my code to take a look at. Don't worry about the pose stuff, it's for my application to analyze the videos, and works fine when I just have one video side by side the webcam (that's what my application does).
The problem is that I cannot change the video2 source to a different MP4. In fact the only way I can have it play an MP4 at all is if I explicitly set it in the HTML.
HTML:
<div id="canvases" class="canvas-container">
<div id='main' style='display:none'>
<video id="video" playsinline style=" -moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
display: none;
">
</video>
<canvas id="output" class="camera-canvas"></canvas>
<canvas id="keypoints" class="camera-canvas"></canvas>
<video id="video2" playsinline controls muted style="z-index: -1; position: absolute;"
>
<source id="source2" src="exercise_media/vid_exercise_sample_1.mp4" type="video/mp4" >
<!-- hard-coding the src in source is the ONLY way I can play a video here at all... -->
</video>
<canvas id="output2" class="camera-canvas2"></canvas>
<canvas id="keypoints2" class="camera-canvas2"></canvas>
<canvas class="illustration-canvas"></cavnas>
<canvas class="illustration-canvas2"></cavnas>
</div>
Javascript:
export async function bindPage() {
setupCanvas();
setupCanvas2();
buttonSetup();
toggleLoadingUI(true);
setStatusText('Loading AI models...');
posenet = await posenet_module.load({
architecture: defaultPoseNetArchitecture,
outputStride: defaultStride,
inputResolution: defaultInputResolution,
multiplier: defaultMultiplier,
quantBytes: defaultQuantBytes
});
setStatusText('Loading FaceMesh model...');
facemesh = await facemesh_module.load();
facemesh2 = await facemesh_module.load();
setStatusText('Loading Avatar file...');
let t0 = new Date();
await parseSVG(Object.values(avatarSvgs)[0]);
setStatusText('Setting up camera...');
try {
video = await loadVideo();
} catch (e) {
let info = document.getElementById('info');
info.textContent = '(web cam) this device type is not supported yet, ' +
'or this browser does not support video capture: ' + e.toString();
info.style.display = 'block';
throw e;
}
try {
video2 = await loadVideo2();
} catch (e) {
console.log("Error loading companion video :: "+e);
}
console.log(video2); // shows the full html
playpauseFunction(); // start video2
toggleLoadingUI(false);
detectPoseInRealTime(video, posenet); //actual application, works fine
}
async function loadVideo2() {
const video2 = await setupVideo2();
return video2;
}
async function setupVideo2() {
const video2 = document.getElementById('video2');
//video2.setAttribute("src", vid_url_1); //does not work
//document.getElementById("source2").src = vid_url_2; // does nothing
videoWidth2orig = video2.videoWidth;
videoHeight2orig = video2.videoHeight; // gives the actual e.g. 640 x 360
//.. I do some stuff below to set video2 width/height, works fine
return video2;
}
function playpauseFunction() {
try {
if (playpause == true) {
video2.pause();
playpause = false;
//alert("Workout paused. Click Play/Pause to resume.");
} else if (playpause == false) {
video2.play();
playpause = true;
}
} catch (e) {
console.log("playpauseFunction exception :: "+e);
}
}
Now, like I said, if I hard-code into HTML the src of <source> tag, i.e. <source id="source2" src="exercise_media/vid_exercise_sample_1.mp4" type="video/mp4" > the application runs fine and looks like the following:
(Works fine, the webcam plays in real-time next to the video, and I have my skeletal tracking running on the rightside video as it plays.)
What I want to do is click on e.g. "Exercise Sample 2" and change the rightside video, obviously. Nothing I've tried has worked, such as:
function setupExercise2() {
video2.setAttribute('autoplay', 'true');
document.getElementById("source2").src = "exercise_media/vid_exercise_sample_2.mp4";
//video2.setAttribute("src", "exercise_media/vid_exercise_sample_2.mp4"); // have tried both, neither work
video2.load();
const playPromise = video2.play() // trigger video load
console.log(playPromise);
if ( playPromise !== undefined ) {
playPromise.then(() => {
// video should start playing as soon as it buffers enough
}).catch(error => {
// playback failed, log error
console.log(error);
})
}
}
Specifically for the first line (uncommented), the console says:
Promise {<pending>}__proto__: Promise[[PromiseState]]: "pending"[[PromiseResult]]: undefined
The right side video turns white and nothing plays. If I try instead with video2.setAttribute line uncommented, then the console logs:
Promise {<pending>}
__proto__: Promise
[[PromiseState]]: "rejected"
[[PromiseResult]]: DOMException: Failed to load because no supported source was found.
code: 9
message: "Failed to load because no supported source was found."
name: "NotSupportedError"
__proto__: DOMException
To be clear, I can hard-code in any of the vid_exercise_sample_{2,3,..}.mp4 into the html and they play and run just fine, so I don't believe that's the issue.
Hopefully I've provided a pretty full picture now!

The following example code shows a video .src being updated dynamically.
There are two buttons used to switch between the different sources.
It has been tested on Windows PC using Chrome, Edge and Firefox browsers.
<!DOCTYPE html>
<html><head> <meta content="text/html;charset=utf-8" http-equiv="Content-Type"> </head>
<body>
<video id="video2" width="600" height="480" controls style="z-index: 1; overflow:hidden; position: absolute; top: 10px; left: 10px">
<source type="video/mp4">
</video>
<canvas id="myCanvas" width="600" height="480" style="z-index: 1; overflow:hidden; position: absolute; top: 10px; left: 640px">
</canvas>
<div style="z-index: 1; overflow:hidden; position: absolute; top: 510px; left: 10px">
<button onclick="ChangeVideoSrc( 1 )">Play Video 1</button>
<button onclick="ChangeVideoSrc( 2 )">Play Video 2</button>
</div>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var timer_DrawCanvas; //# updated later in code
//# Example video links that work on my testing...
vid_url_1 = "https://seed191.bitchute.com/pupNZR0eMW9M/4CU38o2lkgyj.mp4";
vid_url_2 = "https://seed171.bitchute.com/VBdNMrOHylJh/2BMyQPl6BSpZ.mp4";
//# Try your own links if the above works...
//vid_url_1 = "exercise_media/vid_exercise_sample_1.mp4"
//vid_url_2 = "exercise_media/vid_exercise_sample_2.mp4"
//# Set initial starting vid SRC (used on page load)
const myVid = document.getElementById("video2");
myVid.setAttribute("src", vid_url_1);
//# Setup event listeners
myVid.addEventListener("canplay", handle_Media_Events);
myVid.addEventListener("loadeddata", handle_Media_Events);
myVid.addEventListener("play", handle_Media_Events);
myVid.addEventListener("pause", handle_Media_Events);
myVid.addEventListener("ended", handle_Media_Events);
function drawVideo()
{
ctx.drawImage(myVid, 0, 0, 600, 480);
}
function ChangeVideoSrc( vidNum )
{
myVid.src = window[ "vid_url_" + vidNum ];
myVid.load();
}
function handle_Media_Events()
{
//# if enough data to begin playback
if ( event.type == "canplay" ) { myVid.play(); }
//# if first frame is available
if ( event.type == "loadeddata" )
{ ctx.drawImage( myVid, 0, 0, 600, 480 ); } //# draws re-sized
if ( event.type == "play" )
{ timer_DrawCanvas = setInterval( drawVideo, 30 ); }
if ( (event.type == "pause") || (event.type == "ended") )
{ clearInterval( timer_DrawCanvas ); }
}
</script>
</body>
</html>
Hopefully this will give you a reference point towards achieving the quest of "dynamically change source of the HTML5 Video with Javascript". The quest continues...
Ask anything when you've had chance to test the code.

Just tried out a quick snippet and it works without a bother.. So weird..
what I used
const v = document.getElementById("vid");
const s = document.getElementById("src");
function changeVideo() {
s.src = 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4';
v.load();
v.play();
console.log(s,v);
}
document.getElementById("change").onclick=changeVideo;
<video id="vid" controls autoplay style="width:75%">
<source id="src" src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" type="video/mp4">
</video><br/><br/>
<button id="change">Change the video</button>
must be missing something. I'd be able to say for sure if I saw a live example, but that's completely up to you.
Otherwise found this on W3
'Warning: Don't make your function asynchronous with the async keyword. You'll lose the "user gesture token" required to allow your video to play later.'

You're trying to change the source of the <video> element, not the <source> element..
For a quick solution just add an 'id' to that element and change the 'src' property accordingly.
<source id="video2source" src="yoursource.vid">
JS
document.getElementById('video2source').src = 'newsource.vid';
Keep in mind, a good practice is to store DOM references in variables. Makes it easier for the browser if you don't perform JS DOM reads all the time.
const vid2src = document.getElementById('video2source'); // define variable in the global scope
vid2src.src = 'newsource.vid'; // use the reference everywhere else
Hope this helps! =)
Edit..
Question with a similar problem:
changing source on html5 video tag
Edit numero dos...
Because the play() method is asynchronous, lets try an async solution. =)
const video = document.getElementById("video2");
video.setAttribute('autoplay', 'true'); // just in case
/// ... your previous code ... switch source, and so on and so on
const playPromise = video.play() // trigger video load
console.log(playPromise); // just check what the console tells you
if ( playPromise !== undefined ) {
playPromise.then(() => {
// video should start playing as soon as it buffers enough
}).catch(error => {
// playback failed, log error
console.log(error);
})
}

When async is great and all, using it everywhere is not the best idea.. And some methods(like load() and play() are already asynchronous).
In this fiddle:
https://jsfiddle.net/azdpu3Ly/13/
I used a timer to trigger the change of video source through your setupVideo2 function. But as soon as I add await to the function call, it stops working.
So make sure to NOT call your functions related to the video with an await or follow it with .then(). Synchronous code will work just fine and you won't gain anything with the former..

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.

HTML5 Video Slideshow not working on Mac FF or Safari

Here's my jsfiddle for review: http://jsfiddle.net/Z2Nq8/81/
The code works perfect in Chrome on my Mac. Firefox and Safari don't. I had another contributor who did the code edits, and he says everything is working on Windows. Please review and let me know if you see something that I'm doing wrong. Thanks!
js:
$(function () {
var $videos = $('.video'),
numVideos = $videos.length,
counter = 0;
setInterval(function () {
++counter;
var $currentVideo = $('.video[data-state="playing"]'),
$nextVideo = $currentVideo.next();
$currentVideo.attr('data-state', '');
if (counter == numVideos) {
counter = 0;
$nextVideo = $videos.first();
}
$nextVideo.attr('data-state', 'playing');
$currentVideo.toggleClass('hidden');
$nextVideo.toggleClass('hidden');
$currentVideo.find('video')[0].pause();
$currentVideo.find('video')[0].currentTime = 0;
$nextVideo.find('video')[0].play();
}, 3000); // do this every 3 seconds
});
And for some reason my HTML and CSS code won't display here (i've added 4 spaces and tried quotations) so, you'll have to look at jsfiddle (see above).
Thanks for helping this noob!
S

I have tested your fiddle and I can see straight away that on Firefox won't work because you are using mp4. You can embed an alternative format for the video and you can use .ogg for firefox and opera.
Check this MDN resource: https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats?redirectlocale=en-US&redirectslug=Media_formats_supported_by_the_audio_and_video_elements
<video controls>
<source src="somevideo.webm" type="video/webm">
<source src="somevideo.mp4" type="video/mp4">
I'm sorry; your browser doesn't support HTML5 video in WebM with VP8 or MP4 with H.264.
<!-- You can embed a Flash player here, to play your mp4 video in older browsers -->
</video>

Modified the fiddle a bit. It works on Safari, but to get more support you also need to include webm & ogg.
http://jsfiddle.net/me2loveit2/Z2Nq8/82/
var content = [
['http://bwpcommunications.com/videobg/001.mp4','Let\'s get together and discuss your brand.'],
['http://bwpcommunications.com/videobg/002.mp4','Let\'s build a strategy together face to face.'],
['http://bwpcommunications.com/videobg/003.mp4','Let\'s create a compelling campaign and tell your story.']
];
var numVideos = content.length,
counter = 0,
$video = $('#bgvid');
$title = $('#title');
setInterval(function () {
++counter;
if (counter == numVideos) {
counter = 0;
}
$video.attr('src',content[counter][0]);
$title.html(content[counter][1]);
}, 5000); // do this every 3 seconds

Adding audio to click event

I want to add a sound clip to a button on a game I am creating. Currently It doesn't do anything and I don't know why.
At the moment In the script I have...
var audio = $(".mysoundclip")[0];
$(".minibutton").onclick(function() {
audio.play();
});
In the HTML I have...
<audio id="mysoundclip" preload="auto">
<source src="http://www.wav-sounds.com/cartoon/bugsbunny1.wav"></source>
</audio>
Then I have CSS for .minibutton.
Any ideas why it won't work?

Your jQuery had some simple errors in it.
HTML
<audio id="mysoundclip" preload="auto">
<source src="http://www.wav-sounds.com/cartoon/bugsbunny1.wav"></source>
</audio>
<button type="button">play</button>
jQuery
var audio = $("#mysoundclip")[0];
$("button").click(function() {
audio.play();
});​
Fiddle: http://jsfiddle.net/iambriansreed/VavyK/
​

Maybe I'm a too suspicous.. but
http://www.sound-effect.com/sounds1/animal/Saf/Tiger1.wav "The requested URL was not found on this server"
If that's just a typo, you should also try to figure out which audio types a browser is capable to play:
myApp.htmlAudio = (function _htmlAudioCheck() {
var elem = document.createElement('audio'),
bool = false;
try {
if( !!elem.canPlayType ) {
bool = new Boolean(bool);
bool.ogg = elem.canPlayType('audio/ogg; codecs="vorbis"');
bool.mp3 = elem.canPlayType('audio/mpeg;');
bool.wav = elem.canPlayType('audio/wav; codecs="1"');
bool.m4a = ( elem.canPlayType('audio/x-m4a;') || elem.canPlayType('audio/aac;'));
}
} catch(e) { }
return bool;
}());
Now we can check like
if( myApp.htmlAudio && myApp.htmlAudio.wav ) {
}
if the browser is able to playback .wav files for instance.
However, I never saw a nested source element for audio elements. That should be named track if anything. But you don't really need that here, you can just have a src attribute on the audio element itself. Example: http://jsfiddle.net/5GUPg/1/

Html5 changing video fail in Safari

I included a videos with html5, and I have a menu that change the video.
The menu runs well in Firefox, Opera and Chrome but not in Safari.
I have this html code:
<div id="tele">
<video id="v" width="254" height="204">
<source id="ogg" src="/media/joies.ogv" type="video/ogg" />
<source id="mp4" src="/media/joies.mp4" type="video/mp4" />
<source id="webm" src="/media/joies.webm" type="video/webm" />
<object id="flash" type="application/x-shockwave-flash"
data="player.swf?file=joies.mp4">
<param id="flash2" name="movie" value="player.swf?file=joies.mp4" />
</object> </video>
</div>
<li><a href="#" class="activo"
onClick="changeVideo('/media/joies.ogv','/media/joies.mp4','/media/joies.webm','player.swf?file=joies.mp4','player.swf?file=joies.mp4')">1</a>
And this Javascript:
function changeVideo(v,x,w,y,z) {
document.getElementById("ogg").src=v;
document.getElementById("mp4").src=x;
document.getElementById("flash").data=y;
document.getElementById("flash2").value=z;
document.getElementById("webm").src=w;
var video = document.getElementById('v');
video.load();
video.play();
}
To visit the web: http://81.35.152.41:8888/index.php/ca/static/zapping#
Why the menu to change video not runs in Safari?
Thanks
Regards

put the mp4-node on top of the others, then it might work.
if that does not work, remove the source-nodes completely and use the src attribute of the video-node. Then add a check for compatible codecs to changeVideo() --> video.canPlayType("video/mp4") (for each type, best in a loop)
in IE9 that fixed problems for me. tested Safari later so dunno if it has the same problem.
I use this function for source-testing:
var VIDEO = document.getElementById("myVideo");
function listSource(source,sources) {
var type,
ext = source.split('.').pop();
switch(ext) {
case "mp4":
case "m4v":
ext = "mp4";
type = "video/mp4";
break;
case "webm":
type = "video/webm";
break;
case "ogv":
type = "video/ogg";
break;
default:
console.log('invalid file extension: '+source);
return sources;
}
if( !VIDEO.canPlayType(type) ) {
return sources; // only add video to list if the current browser can actually play it
}
sources.push({ src: source, type: type });
return sources;
}
var sources_ok = [];
var sources = ["http://domain.com/test.mp4", "http://domain.com/test.webm", "http://domain.com/test.ogv"]; // example
for(var i=0,maxi=sources.length;i<maxi;i++) {
sources_ok = listSource(sources[i],sources_ok);
}

If you change a video's source after it has already loaded, safari will not load the video. You must Clone the video, delete the original and append the cloned container in its place.