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

How to hide text before video ends with javascript

I have video and text that I am displaying when user clicks play button (4 seconds). So my code looks like this:
$('video').on('play', function (e) {
$('#showText').delay(4000).show(0);
});
What I am trying to achieve is hide this text (#showText) 5 seconds before the end of the video. I didn’t find any solution for this, so if anybody can help with this I’ll be more than thankful.

To make this work you can use the standard events associated with media elements. Specifically play and timeupdate. The former you've already covered. The latter fires as the playback progresses. You can use it to check the current position and determine if it's less than 5 seconds from the end, like this:
var $showText = $('#showText');
$('video').on({
play: function() {
$showText.delay(4000).show(0);
},
timeupdate: function(e) {
if ((this.duration - this.currentTime) < 5 && $showText.is(':visible'))
$showText.hide();
}
});
#showText {
display: none;
}
video {
height: 175px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="showText">Lorem ipsum</p>
<video autobuffer controls autoplay>
<source id="mp4" src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" type="video/mp4">
</video>

You can use video.js to get length of video then you can hide any element at any second before video is ending
var myPlayer = videojs('example_video_1'); //defining videojs
<video id="example_video_1" data-setup="{}" controls="">
<source src="my-source.mp4" type="video/mp4">
</video> //end defining videojs
$('#showText').delay(4000).show(0);
var lengthOfVideo = myPlayer.duration(); // length Of Video in seconds
$(#showText).oneTime(lengthOfVideo-5, function() { // 5 second before video ends
$("showText").hide();
});

Cycle through audio using js

I'm trying to use a button to change the audio track to 1 of 2 being played in the browser, however, the method I found switches to the second track but doesn't change the audio played afterwards, it only restarts the second track. Here's my code:
function loadSong(){
var player=document.getElementById('player');
var source1=document.getElementById('player');
var source2=document.getElementById('player');
source1.src='/audio/mac+.mp3';
source2.src='/audio/mac-slowed.mp3';
player.load(); //just start buffering (preload)
player.play(); //start playing
}
HTML
<audio id="player" autoplay="autoplay" preload="auto" loop="loop">
<source id="source1" src="/audio/mac+.mp3" type="audio/mpeg">
<source id="source2" src="" type="audio/mpeg">
</audio>
<button onclick='loadSong()'>Switch the Music!</button>

Based on the information you provided in your original inquiry, this is most likely the best fit for you. Attached is a working JSFiddle for you review. You will need to update the src files with your own locally stored files.
HTML:
<audio id="source1" autoplay="autoplay" loop="loop" src='http://www.stephaniequinn.com/Music/Allegro%20from%20Duet%20in%20C%20Major.mp3'></audio>
<audio id="source2" loop="loop" src='http://www.stephaniequinn.com/Music/Pachelbel%20-%20Canon%20in%20D%20Major.mp3'></audio>
<button id="player">Switch the music to track # 2</button>
Javascript:
var player = document.getElementById('player');
var source1 = document.getElementById('source1');
var source2 = document.getElementById('source2');
player.onclick = function() {
curTrack = this.innerHTML.replace(/Switch the music to track # /, "");
if (curTrack == "1") {
nextTrack = "2";
source1.play();
source2.pause();
source2.currentTime = 0;
} else {
nextTrack = "1";
source2.play();
source1.pause();
source1.currentTime = 0;
}
this.innerHTML = "Switch the music to track # " + nextTrack;
}

You are overwriting the #player element look at your code you are saving the same selector to source1 and source 2 so change the selector of source one to source1 and source2

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

Playing corresponding videos to different links in HTML5 Video

I am using HTML5 video tag to play videos on my website. When a certain image is clicked I want it to pull up the videoplayer and play the corresponding video. Any ideas on how to do this and make it compatible across all browsers?
Heres the video player, So I want the src to change depending on what image is clicked
<video width="320" height="240" controls>
<source src="" class="videoPlayer">
<source src="" class="videoPlayer">
</video>
With this being the images clicked
<img src="images/1.jpg" class="boxImage" data-project="Project"
data-videos="images/Portfolio/Test.webm, images/Portfolio/Test.mp4">
<img src="images/2.jpg" class="boxImage" data-project="Project"
data-videos="images/Portfolio/Test2.webm, images/Portfolio/Test2.mp4">

var video = document.querySelector('video');
video.oncanplaythrough = function() {
video.play();
};
$('.boxImage').on('click', function() {
var data_videos = $(this).data('videos').split(',');
for (var i = 0, l = data_videos.length; i < l; i++) {
var mime_type = 'video/' + data_videos[i].split('.').pop();
if ( video.canPlayType(mime_type) ) {
video.src = data_videos[i];
break;
}
}
});
Demo