We Keep Coding

how to play videos one after another without gap

I have a folder with several hundred mp4 files of 2sec duration each.
I would like to play them one after the other without any glitch between them.
I have tried what is advised in Playing videos one after another in html5 but this does not solve the glitch problem between video transitions.
<video width="256" height="192" id="myVideo" controls autoplay>
<source src="../uploads/VID_190923141334_20190923_141336.mp4" id="mp4Source" type="video/mp4">
Your browser does not support the video tag.
</video>
<script type='text/javascript'>
var player=document.getElementById('myVideo');
var mp4Vid = document.getElementById('mp4Source');
player.addEventListener('ended',myHandler_ended,false);
function myHandler_ended(e)
{
mp4Vid.src = "../uploads/VID_190923141334_20190923_141338.mp4";
player.load();
player.play();
}
</script>
Can anyone point me to the right direction in order to eliminate the glitch in each video transition?

The "2 players 1 hidden" method is not stable: it does not work on mobile devices, and it will lag on older/slower computers when switching one player to another. I wanted to create a live stream with this method, but it's an ugly DIY, don't do that.
There is an HTTP Live Streaming (HLS) standard and with it you can continuously play small m3u8 (.ts) chunks (it is supported by videoJS and OBS also has m3u8 recording support).
I made live streams on Sia Skynet, which is a static (non-modifiable) decentralized storage for files (like IPFS, but different). Here you can find some demos & the source code: https://github.com/DaWe35/Skylive

One approach is to have two video elements and players on your page - this approach is often used for pre, mid and post roll adverts, which are often from a different source than the main video itself.
The two video elements are in the same place on the page, one over the other.
You play the first video and when you are near the end of it preload and then pause the second video but keep the player hidden.
At the point where the first video ends, you hide the first player and show and start the second player.
You then again preload and pause the next video in the player you have just hidden and it becomes the one ready to start when the one now playing is finished.
The snippet below hides the second video until the first has ended and then plays the second one hiding the first. This is just a rough outline you can play with where you cue the movies to etc. If you leave your pointer over the video you can watch the timeline - films fade in and out so it may not be obvious it is playing.
Hover over the video ion the snippet while it is playing to see the time as it switches from one to the other.
var vid1 = document.getElementById("MyVid1");
var vid2 = document.getElementById("MyVid2");
vid2.style.display = "none"
vid1.onloadeddata = function() {
vid1.currentTime = 872;
vid1.play()
};
vid2.onloadeddata = function() {
vid2.currentTime = 10; //Just to illusrate as begining is black screen
vid2.pause()
};
vid1.onended = function() {
vid2.play()
vid1.style.display = "none"
vid2.style.display = "block"
};
<video id="MyVid1" width="320" height="176" controls preload="auto">
<source src="http://peach.themazzone.com/durian/movies/sintel-1024-surround.mp4" type="video/mp4">
Your browser does not support this video format
</video>
<video id="MyVid2" width="320" height="176" controls preload="auto">
<source src="http://ftp.nluug.nl/pub/graphics/blender/demo/movies/ToS/tears_of_steel_720p.mov" type="video/mp4">
Your browser does not support this video format
</video>

Autoplay video after hovering the cursor does not work

I have a video page and I use photos as thumbnails. I want to convert photos to video playback in .webm format. I wrote a script that, when you hover over a photo element, adds and plays a video tag.
$(function(){
$('.item-image').hover(function(){
$('.item-image video').remove();
$v = $(this).attr('v');
if ($v){
$p = '<video src="'+$v+'" class="p" ></video>';
$(this).append($p);
}
$(this).children('video').play();
}, function(){
$(this).children('video').remove();
});
});
Unfortunately, when hovering, the autoplay does not work. You must first click in the video to play.
I noticed that after clicking and refreshing the page, playing the video after hovering the cursor works correctly. Do you have any idea why it does not work as it should?

I found a solution.
It was enough to add a muted to video tag
<video src="URL" loop muted autoplay class="p" ></video>

Html5 video Scroll video

I've a problem with the scroll control of video. I took this code : http://codepen.io/ollieRogers/pen/lfeLc/.
var frameNumber = 0, // start video at frame 0
// lower numbers = faster playback
playbackConst = 500,
// get page height from video duration
setHeight = document.getElementById("set-height"),
// select video element
vid = document.getElementById('v0');
// var vid = $('#v0')[0]; // jquery option
// dynamically set the page height according to video length
vid.addEventListener('loadedmetadata', function() {
setHeight.style.height = Math.floor(vid.duration) * playbackConst + "px";
});
// Use requestAnimationFrame for smooth playback
function scrollPlay(){
var frameNumber = window.pageYOffset/playbackConst;
vid.currentTime = frameNumber;
window.requestAnimationFrame(scrollPlay);
}
window.requestAnimationFrame(scrollPlay);
And it work in all browsers with the video of codepen but when I put my test video, it's not smooth, I try a lot of differents codecs or formats (example with my test video : http://www.dugautiertheo.fr/videoscroll/).
I don't know why but it work fine and very smooth on Safari only.
Can you help me ?
Thank you

Per the first comment listed, it does appear to be something with the video. However, one additional thing to try would be to supply multiple video source files per the code provided in codepen.io this way you let the browser decide what is the best video type/codec to use. As shown below:
<video id="v0" tabindex="0" autobuffer="autobuffer" preload="preload">
<source type="video/webm; codecs="vp8, vorbis"" src="http://www.html5rocks.com/tutorials/video/basics/Chrome_ImF.webm"></source>
<source type="video/ogg; codecs="theora, vorbis"" src="http://www.html5rocks.com/tutorials/video/basics/Chrome_ImF.ogv"></source>
<source type="video/mp4; codecs="avc1.42E01E, mp4a.40.2"" src="http://www.html5rocks.com/tutorials/video/basics/Chrome_ImF.mp4"></source>
<p>Sorry, your browser does not support the <video> element.</p>
</video>

Problems arise, when grabing single frames in an highly compressed video container format like .mp4 etc with js. Our solution was to provide the video as a .json in a lottie animation:
scroll video example
You can check the source code.

Hide (not remove) HTML5 video controls

Every question on the subject explain how to remove the controls of an HTML5 video element.
videoElement.removeAttribute('controls');
But browsers, Firefox and Chrome, have a way of just hiding the controls which makes them disappear when cursor is not moving and the video is playing. And makes them appear again if you move the cursor or when video stops playing.
<video controls><source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
Video test file: http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4
If you play the above video, and leave it alone without moving the cursor, the controls will disappear. The if you move the cursor again they'll appear again. They'll also appear upon pausing or video finishing.
Very much like popular native or desktop video players.
This is what I want. I want to hide the controls the same way they would automatically hide if the video were playing and the cursor hasn't moved for a while.
Is there a way to achieve this without removing the controls entirely?

Try this:
$("#myvideo").hover(function() {
$(this).prop("controls", true);
}, function() {
$(this).prop("controls", false);
});
// if always hide
$("#myvideo2").click(function() {
if( this.paused)
this.play();
else
this.pause();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<video id="myvideo" width="200" >
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4">
</video>
<br/>All time hide controls:<br/>
<video id="myvideo2" autoplay width="200" >
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4">
</video>

Put a div over the video and hide/show that, you answered your own question;
I want to hide the controls the same way they would automatically hide if the video were playing and the cursor hasn't moved for a while.
Also take a look at this;
Styling HTML5 Video Controls

I'm using videojs.com library and the solution was to add
.vjs-control-bar {
display:none !important;
}
to the stylesheet.

You can set event listener on your video and remove controls on play
<video id="video">
<source src="http://example.com/video.mp4" type="video/mp4"/>
</video>
<script>
video.addEventListener('play', () => {
video.setAttribute('controls', 'true');
});
video.addEventListener('pause', () => {
video.removeAttribute('controls')
});
</script>

use this:
video::-webkit-media-controls {
display: none;
}

you don't need javascript. use CSS.
Display:none on the controls.

How to add loader image to HTML5 video?

Along with the poster image I want a loader image(an animated gif) to be displayed while the video is being downloaded. How is it possible ?

A cheap way could be to use an animated GIF in the poster attribute which will be replaced when the video begins to play. Example:
<video poster="loading.gif" preload="auto" controls autoplay>
<source type="video/mp4" src="video.mp4"/>
</video>

Here is my solution for this problem since pixelearth's answer doesn't seem to work on firefox (probably a problem with the fake poster)
HTML
<video id="video1" height="236" preload="auto" controls>
<source src="yourVideo.mp4">
Your browser does not support HTML5 video.
</video>
JS
$('#video1').on('loadstart', function (event) {
$(this).addClass('background');
$(this).attr("poster", "/your/loading.gif");
});
$('#video1').on('canplay', function (event) {
$(this).removeClass('background');
$(this).removeAttr("poster");
});
CSS
video.background {
background: black
}
With this answer you don't have to mess around with fake poster or abuse attributes for purposes that they were not made for. Hope this helps.
P.S. You could of course add some more events to add the poster attribute e.g. if it can't play further in the middle of the video and needs more buffering
You can find a jsfiddle which shows my code here

It took me a way too long to actually figure out how to do this, but I'm going to share it here because I FINALLY found a way! Which is ridiculous when you think about it, because loading is something that all videos have to do. You'd think they would have taken this into account when creating the html5 video standard.
My original theory that I thought should have worked (but wouldn't) was this
Add loading bg image to video when loading via js and css
Remove when ready to play
Simple, right? The problem was that I couldn't get the background image to show when the source elements were set, or the video.src attribute was set. The final stroke of genius/luck was to find out (through experimentation) that the background-image will not disappear if the poster is set to something. I'm using a fake poster image, but I imagine it would work as well with a transparent 1x1 image (but why worry about having another image). So this makes this probably a kind of hack, but it works and I don't have to add extra markup to my code, which means it will work across all my projects using html5 video.
HTML
<video controls="" poster="data:image/gif,AAAA">
<source src="yourvid.mp4"
</video>
CSS (loading class applied to video with JS)
video.loading {
background: black url(/images/loader.gif) center center no-repeat;
}
JS
$('#video_id').on('loadstart', function (event) {
$(this).addClass('loading')
});
$('#video_id').on('canplay', function (event) {
$(this).removeClass('loading')
});
This works perfectly for me but only tested in chrome and safari on mac. Let me know if anyone finds bugs and or improvements!

You could attach a listener to the video's loadstart event and use it to overlay an animated GIF on top of the video element, then hide the loading overlay once the loadeddata event fires. See The W3C's media events draft for a list of events you can hook into.
They also have a demo page for media events.

This is quite complicated, you must listen to various video events to show/hide & update width of the loader image correctly. Those events include (but may not limited to): loadstart, progress, loadeddata, waiting, seeking, seeked. You can use a certain open source player (e.g. jPlayer) or download its source to examine further.

<video
id="mainVideo"
width="100%"
style="max-width: 100%; max-height: 100%;"
preload="auto"
autoplay="autoplay"
(loadeddata)= "checkVideoLoaded()"
>
<source [src]="assets?.video?.urlMP4" type="{{videoType}}">
</video>
on isVideoLoaded flag show and hide loader
this.isVideoLoaded = false;
checkVideoLoaded(){
this.isVideoLoaded = true;
}