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);
};
}
}
Related
I have an html video which I need to start from the beginning. I have used
video.currentTime = 0;
That resets the video to starting place but I have also set poster image for the video. If the video is completely played then poster image shows on the video but when I reset it in the middle, the poster image is not displaying.
$("#splashvideo").get(0).pause();
$('#splashvideo').get(0).currentTime = 0;
<video src="Splash.mp4" playsinline width="100%" height="450px" id="splashvideo" muted poster="slideshow_placeholder.png">
</video>
A reload will do the trick
$("#slideshowaudio").get(0).load();
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>
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>
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.
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.