We Keep Coding

Several instances of HTML5 video not working properly

I have a web-page with 2 <video> elements on it
<video muted playsinline preload="auto" id="player1"></video>
<video muted playsinline preload="auto" id="player2"></video>
I'm setting the src for each of them via javascript, for the player1, and till 1 second for the player2. The player1 start playing, but when I'm setting the src for the player2 the first one comes to black, seems that I can't use more than one preloaded video tags on one page.
player1.src = <url1>;
player1.play();
//everything ok
setTimeout(() => {
player2.src = <url2> // brokes playback
}, 1000);
This only fails on old browsers and smart TVs like Samsung and LG, maybe there are some tricks for the old ones?
This is a just very simple example but it also not working (initiating 2 video players with preloaded content on the same page)
I tried to preload with XMLHTTPRequest but got the same issue
The original idea is a seamless transition from one video to another, one player is hidden, but with a predefined src, and when the first one fires "ended" I change the visibility of the second and start it, and switch players again and again. If preaload="none" all works but the video tag is not preloading the first frame and there is a lag between the videos switching.

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.

HTML5 Play movie from multiple parts without flashing screen

I have a video tag and a movie cutted in parts of 10 seconds each, with name: 1.webm, 2.webm ....... 1535.webm. I tried to make a js code which find when the video is ended and play the next one, but I have a problem: the screen flashes and the movie is not playing continuously. I need to play it exactly as a movie, with continous video.
Is there any options to do this? It doesn't matter if it is not in JavaScript or if it is a combination of many scripts and codes.
<video id="my_video" width="640" height="480" autoplay>
<source src="files/1.webm" type="video/webm">
</video>
<script>
var src = 0;
var video = document.getElementById("my_video");
document.querySelector("#my_video").addEventListener("ended", nextVideo, false);
function nextVideo() {
src = src + 1;
video.src = "files/" + src + ".webm";
video.play();
}
</script>

It becomes very difficult if you are changing the src of the video as it will load the entire video once src changes and hence you are facing flashing screen effect. It seems impossible to get seamless video by using video parts yet you can try it this way:
Pre-load all the videos using different elements for each video and set preload="auto" attribute to all the elements. You need to play with the visibility of the elements in such a way that you will play one video at a time. First video will be autoplayed. As the ended event fires, just change the visibility of the next element to be true and previous element to be false(Do not use dispay:block/display:none as I have observed that in some mobile devices, video tags having style display:none are not being pre-loaded by browser). Also maintain some background to the video just to avoid white background flash effect.
Refer this snippet:
var my_video = document.getElementById("my_video");
var my_video2 = document.getElementById("my_video2");
document.querySelector("#my_video").addEventListener("ended", nextVideo, false);
function nextVideo() {
my_video2.play();
my_video2.setAttribute('class', '');
my_video.setAttribute('class', 'hidden');
}
.hidden {
position: absolute;
top: -10000px;
left: -10000px;
}
video {
background: black;
}
<video id="my_video" width="640" height="480" preload="auto" autoplay controls>
<source src="test.mp4" type="video/mp4">
</video>
<video id="my_video2" width="640" height="480" preload="auto" controls class="hidden">
<source src="test2.mp4" type="video/mp4">
</video>
<button type="button" onclick="nextVideo()">Next</button>

May be this will help you we make two video tags and set first 10 sec movie on first video tag, second movie on second video tag and third on again first video tag this process done one by one.
check my link http://jsfiddle.net/qoch687a/2/
There is timeupdate event which triggers every sec and we check duration
video.ontimeupdate = function timeUp(e){
if(parseInt(e.originalTarget.duration - e.originalTarget.currentTime)==1){
document.getElementById("my_video1").src=videos[1];
document.getElementById("my_video1").play();
document.getElementById("my_video1").onloadeddata = function(){
clearInterval('intTime');
intTime = setTimeout(function(){document.getElementById("my_video").style.display="none";
document.getElementById("my_video1").style.display="block";},1000);
};
}
}