We Keep Coding

How to use vid.onended to detect when a video is done playing using javascript

I am trying to create an HTML video playlist and currently I am using vid.onended to detect when a video is done playing (based of the current video src) and then play the next video when the video ends. This works perfectly for the first video but for some reason it never plays the second video and jumps straight to the third video.
My code:
//add video playlist functionality to auto play next video based on id
var vid = document.getElementById("urlVideo");
vid.onended = function() {
var video0 = "http://techslides.com/demos/sample-videos/small.mp4";
var video1 = "https://media.w3.org/2010/05/sintel/trailer.mp4";
var video2 = "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4"
if (vid.src = video0) {
vid.src = video1;
}
if (vid.src = video1) {
vid.src = video2;
}
};
<video id="urlVideo" width="100%" height="460" controls autoplay>
<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
What am I doing wrong?
Edit:
Answer by Alen Toma works perfectly.
I Also managed to do it according to the current video source based on a comment by Quentin, For anyone else looking for how to do it explicitly with the current video source as the variable/condition, please see
https://jsfiddle.net/redlaw/qjb5h7e9/9/

I did make a small example below, it should help.
Have a look at this JSFiddle.
//add video playlist functionality to auto play next video based on id
var videoSrc = [
"https://media.w3.org/2010/05/sintel/trailer.mp4",
"http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4"
]
var vid = document.getElementById("urlVideo");
var index = 0;
vid.addEventListener("ended", function() {
var currentSrc = videoSrc[index];
index += 1;
if (index >= videoSrc.length)
index = 0; // Make Loop and jump to the first video
vid.src = currentSrc;
vid.play();
console.log(currentSrc)
}, true);
<video id="urlVideo" controls autoplay>
<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
</video>

you must use an event listener for your video player like this code:
var vid = document.getElementById("urlVideo");
vid.addEventListener("ended", function() { /* your code*/ }, true);

Play audio when hovering image

I have a few images on my page and when I hover over them they should each play a certain sound. Also, I don't want audio players to be visible.
I tried this but it only works when I click on audio player before hovering image:
HTML
<img src = "Pkokoska.jpg" onmouseover="playSound1()">
<img src = "Pkonj.jpg" onmouseover="playSound2()">
<audio controls id="audio1"><source src="Zkokoska.wav" type="audio/wav"></audio>
<audio controls id="audio2"><source src="Zkonj.wav" type="audio/wav"></audio>
JavaScript
var sound1 = document.getElementById("audio1");
var sound2 = document.getElementById("audio2");
function playSound1() {
sound1.play();
}
function playSound2() {
sound2.play();
}

You have to add controls attribute in the audio tag to activate the controlling functions such as play , plause ,etc.. for that element
<audio controls id="abc> ... </audio>
You can also hide the controls tab by ussing css property dsiplay:none
var sound1 = document.getElementById("audio1");
var sound2 = document.getElementById("audio2");
function playSound1() {
sound2.pause();
sound2.currentTime = 0;
sound1.play();
}
function playSound2() {
sound1.pause();
sound1.currentTime = 0;
sound2.play();
}
audio{
display:none;
}
<img src = "https://cdn.sstatic.net/Img/unified/sprites.svg?v=e5e58ae7df45" onmouseover="playSound1()">
<audio id="audio1" controls><source src="https://www.learningcontainer.com/wp-content/uploads/2020/02/Kalimba.mp3" type="audio/wav"></audio>
<img src = "https://cdn.sstatic.net/Img/unified/sprites.svg?v=e5e58ae7df45" onmouseover="playSound2()">
<audio id="audio2" controls><source src="https://www.learningcontainer.com/wp-content/uploads/2020/02/Kalimba.mp3" type="audio/wav"></audio>

I don't know if this will work on pure javascript but am sure it will with JQuery
function playSound1() {
sound1.trigger('play');
}
function playSound2() {
sound2.trigger('play');
}

link 4 video element to one source [duplicate]

I currently have 2 video elements on my html-page.
Both embed exactly the same .mp4 video from the same URL.
Is there any way to tell the browser to duplicate the rendered video from the first video element instead of letting the browser download both videos?
You can cleary see that the two videos are loaded seperated as they have a different buffering time before playback sometimes and the videos dont play synchronized everytime.
My Code:
<video autoplay id="previewVideo" data-videoid="JYpUXXD4xgc">
<source src="video.php?videoid=JYpUXXD4xgc" type="video/mp4"/>
</video>
<video autoplay id="bigVideo" data-videoid="JYpUXXD4xgc">
<source src="video.php?videoid=JYpUXXD4xgc" type="video/mp4"/>
</video>

This can be done in some very easy steps via Javascript and the Canvas Element:
HTML:
<video autoplay id="previewVideo" data-videoid="JYpUXXD4xgc">
<source src="video.php?videoid=JYpUXXD4xgc" type="video/mp4"/>
</video>
<canvas id="bigVideo"></canvas>
JavaScript:
document.addEventListener('DOMContentLoaded', function() {
var v = document.getElementById('previewVideo');
var canvas = document.getElementById('bigVideo');
var context = canvas.getContext('2d');
var cw = Math.floor(canvas.clientWidth);
var ch = Math.floor(canvas.clientHeight);
canvas.width = cw;
canvas.height = ch;
v.addEventListener('play', function() {
updateBigVideo(this, context, cw, ch);
}, false);
}, false);
function updateBigVideo(v, c, w, h) {
if (v.paused || v.ended) return false;
c.drawImage(v, 0, 0, w, h);
setTimeout(updateBigVideo, 20, v, c, w, h);
}
The canvas fetches the image of the video and displays it again on the BigVideo.
The updateBigVideo() function is called every 20ms, resulting in a framerate of about 50 FPS.
Read more

First, make the <video> element using JavaScript and then put it in the places you want.
var video1 = document.createElement("video");
video1["data-videoid"] = "JYpUXXD4xgc";
var sourceElem = document.createElement("source");
sourceElem.src = "video.php?videoid=JYpUXXD4xgc";
sourceElem.type = "video/mp4";
video1.appendChild(sourceElem);
var video2 = video1.cloneNode(true); //This makes a copy of the element, but makes sure it's not treated as the same element. This means you can add video1 AND this _different_ element to the document. However, unfortunately, everything still needs to get loaded again. I think this is the easiest way to copy an element over, though.
video2.id = "bigVideo";
video1.id = "previewVideo";
document.addEventListener("DOMContentLoaded", function() {
//Now put video1 and video2 where you want.
});

Experimental feature of interest:
<video id="vid" src="test.mp4" autoplay loop muted></video>
<div style="background:-moz-element(#vid); background-size: cover; width: 1280px; height: 720px; "></div>
(firefox only and with -moz- prefix as of 2023)
https://developer.mozilla.org/en-US/docs/Web/CSS/element
https://w3c.github.io/csswg-drafts/css-images-4/#element-notation

A simple solution can be to add a value to the end of the url with #anything
Since you are loading the video in one video element and want to load it again in a different video element, you can arrange it like below with a unique url:
<video autoplay id="mainVideo">
<source src="video.php?videoid=JYpUXXD4xgc&item=1" type="video/mp4"/>
</video>
<video autoplay id="previewVideo">
<source src="video.php?videoid=JYpUXXD4xgc&item=2" type="video/mp4"/>
</video>

Most Optimal solution
let videoPlayCount = 1;
let video = document.getElementById('amplify-mould-video');
video.addEventListener('ended',videoHandler,false);
function videoHandler() {
if(videoPlayCount < 2){
videoPlayCount++;
video.play();
}else{
video.pause();
video.removeEventListener('ended',videoHandler)
}
}
<video id="video" muted="" autoplay="" controls>
<source src="#" type="video/mp4">
</video>

Changing video src via javascript

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

Control one video when start playing another video in javascript

I have a page with two videos where the both videos are playing together. What I am doing is I am playing one video and I am playing another video without pausing previous one. Now, what I want is, the previous video should be paused when we are start playing another video. Please help in this regards. This should be taggle...

HTML
<video class="video" autobuffer controls>
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" />
</video>
<video class="video" autobuffer controls>
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg" />
</video>
jQuery
$('.video').on('play', function () {
$('.video').not($(this).get(0)).each(function () {
$(this).get(0).pause(); //Stops all videos except the current
});
});
DEMO jQuery
without jQuery
//add Event listener for all videos
var videos = document.getElementsByClassName('video');
for(var i = 0; i < videos.length; i++){
videos[i].addEventListener('playing', function(){ //on "play"...
controlVideos(this); //..call controlVideos
});
};
function controlVideos(current){
for(var i = 0; i < videos.length; i++){
if( videos[i] != current) videos[i].pause(); //stop video if it's not the current
}
}
DEMO without jQuery