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

HTML5 audio on IOS: how can currentTime be less than initial value?

I have to play a short fragment of bigger audio. I use currentTime to set starting point in time, and timeupdate event to stop audio when required.
I noticed that on few early timeupdate events sometimes currentTime is less than its initial value, despite there is (obviously) no "rewind" actions.
Here is code example:
var start = 1;
var end = 1.3;
var audio = document.getElementById('audio');
audio.addEventListener('timeupdate', function () {
console.log(audio.currentTime);
if (audio.currentTime < start || audio.currentTime > end) {
audio.pause();
}
});
audio.currentTime = start;
audio.play();
For example, output of console log can be this:
1
0.85
0.85
1
1.02
...
Here's an example.
Tested on iPad with iOS 11.4.1. This problem appears only on very short time ranges ~0.3sec.

At first you have a wrong question because you want that your script works on iOS. And because of this your question in title is irrelevant. We have a lot of bugs on iOS and the iOS developers do not want to correct them. It is a bug. Write to support from iOS and ask there "How is it possible?".
At second you have two questions in your post because your script does not work on iOS like you it want.
I wrote for you the solution. Make sure you are not trying to call the audio before the audio element has metadata loaded (first mistake). Then you have the second mistake: instead of:
if(audio.currentTime < start || audio.currentTime > end) //your mistake
you have to write:
if(audio.currentTime >= end)
The solution (it works on iOS too)
var start = 1,
end = 1.3,
audio = document.getElementById('audio'),
button = document.getElementById('button'),
log = document.getElementById('log');
audio.addEventListener('timeupdate', function()
{
writeLog(audio.currentTime);
//your mistake: if(audio.currentTime < start || audio.currentTime > end)
if(audio.currentTime >= end)
{
audio.pause();
}
});
function writeLog(value)
{
var div = document.createElement('div');
div.innerHTML = value;
log.insertBefore(div, log.firstChild);
}
audio.addEventListener('loadedmetadata', function()
{
audio.pause();
button.removeAttribute('disabled');
});
button.addEventListener('click', function()
{
log.insertBefore(log.lastChild.cloneNode(!0), log.firstChild);
audio.currentTime = start;
audio.play();
});
#log
{
width:100%;
height:18em;
overflow-y:auto;
font:3em 'Courier New';
background:#069;
color:#7e0
}
#log div:last-child{display:none}
<!--
For this link from your example (on jsfiddle.net) is only a download is possible, but not using as source:
http://techslides.com/demos/samples/sample.m4a
-->
<audio id="audio" preload="auto">
<source src="http://techslides.com/demos/samples/sample.mp3" type="audio/mpeg"/>
<source src="http://techslides.com/demos/samples/sample.ogg" type="audio/ogg"/>
<source src="http://techslides.com/demos/samples/sample.aac" type="audio/aac"/>
</audio>
<button id="button" disabled style="width:9em;height:3em;font-size:3em">Play</button>
<br><br>
<div id="log"><div><hr></div></div>
The snippet on SO does not work because it is in sandbox.
See this working example on codepen.io.

How to track <video> playback time using js?

I need to track video playback time, so at 3 second I need to display a text over it. Thank you for the help!

Say you have this HTML:
<video id="myvideo" controls>
<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
</video>
<div id="video_counter"></div>
You could use this JavaScript to track play time:
var videoElement = document.getElementById("myvideo");
var totalTimePlayed = 0;
var lastUpdatedTime = 0;
videoElement.addEventListener("timeupdate", function(event) {
var newTime = videoElement.currentTime;
var timeDiff = newTime - lastUpdatedTime;
if (timeDiff > 0) {
totalTimePlayed += timeDiff;
// feel free to do something else here
document.getElementById("video_counter").innerText = totalTimePlayed + " seconds played.";
}
lastUpdatedTime = newTime;
});
This adds up time played in seconds in the totalTimePlayed variable, and avoids subtracting time if the user seeks backward (but does not avoid excessive time tracked if the user seeks forward).
Here it is running in codepen.

Is it possible to embed actions in html5 video?

Is there any way to play a video in html5, stop and execute javascript at known points within the video?

Yes, try this. You have to use the currentTime property. Start with that and start your javascript functions from there. Is that what you're looking for?
var vid = document.getElementById("video");
//Add a timeupdate listener
video.addEventListener("timeupdate", function(){
//Check for video properties from within the function
if (this.currentTime == 5)
this.pause();
//cal javascript
}
}

Looking at the accepted answer over here it looks like it is possible.
To pause the video you just do this:
var mediaElement = document.getElementById("video"); // create a reference to your HTML5 video
mediaElement.pause(); // pauses the video
If you want to play the video, do this:
mediaElement.play(); // plays the video
To get the current time in the video, do this:
mediaElement.currentTime; // gets the current time
Here's an example linking them all up:
var mediaElement = document.getElementById("video");
if(mediaElement.currentTime == 35){
mediaElement.pause();
// do whatever else you would like
mediaElement.play();
}
The MDL documentation is here, there are plenty of other properties you might find helpful.
Hope this helps!

Yes, by doing like this you can.
Note that you have to look for a time using bigger than > bigger than (as the chance to match an exact millisecond is almost zero), and have a variable in one way or the other to know which ones is done.
window.addEventListener('load', function() {
var cur = document.querySelector('#cur'),
vid = document.querySelector('#vid')
})
var appDone = {"done7":false,"done4":false}
vid.addEventListener('timeupdate', function(e) {
if (e.target.currentTime > 7 && !appDone.done7) {
appDone.done7 = true;
e.target.pause();
//do something
cur.textContent += ", " + "done7 once";
e.target.play();
}
if (e.target.currentTime > 4 && !appDone.done4) {
appDone.done4 = true;
e.target.pause();
//do something
cur.textContent += ", " + "done4 once";
e.target.play();
}
})
<video id="vid" width="320" height="176" controls>
<source src="http://www.w3schools.com/tags/mov_bbb.mp4" type="video/mp4">
<source src="http://www.w3schools.com/tags/mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
<p id="cur"></p>

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