how to change video.src when watching a video
current = video.currentTime;
video.src = '2.mp4';
video.currentTime = current;
video.play();
Everything is working. But the video is interrupted for a moment.
How to change video without interrupting viewing. Youtube dynamically changes video with automatic quality change
youTube uses something called Adaptive Streaming - a fragmented MP4 structure allows them to change quality up/down quickly and seamlessly because they are only loading content in very small chunks (about 2 seconds). If you want to do that, they you would need to look at a player that supports HLS or (better for the future) MPEG-DASH (eg jwPlayer) along with a suitable encoding solution (eg Encoding.com)
If you want to change source to a new video seamlessly then the best way to do that is to have two video elements on the page, with the second source loaded, buffered, and paused (or update the currentTime to keep them in sync) and then when you want to switch toggle the visibility on the two video elements. There will still be a slight transition (especially if the two playheads are not in the same position).
Related
I'm looking for the best way to embed a video file on my website.
What do i have to consider to make it fast?
Do i have to load up different video files (size and format) and let e.g. JS pick the right one depending on screen-size? Or is the browser doing this automatically?
Do you have some example code lines for me?
Thanks
If you leave the video tag without a source, you can then inject the source based on the screen size (e.g. 720p for smaller screens 1080p for bigger screens). Of course, this means you have to create 'x' versions of the video (one for each screen size).
Another approach is to do video streaming. You'll need a JavaScript player - but just like Netflix, you can have multiple sizes and bitrates, and the player will adjust the video playback on each device based on screen size and network speed. One huge advantage here is that it can adjust during playback to a different version to ensure that the video continues to pay.
There are services that will do this for you - just upload the video, and you'll get a link for the player that you can embed on your page - api.video is one.
I' using html5 video. I need to show the loading image when video buffering next frame like a youtube when video is stop and downloading next frames youtube show a loading image which is circle gif image and when video download enough frame to start it loading image disappear.
I'm not asking about first time video start.
I know I can use poster while video is not starting or I can use event loadstart and canplay.
These things work fine when video is starting first time. But problem is that I want loading image when video is stop while playing due to buffering next frame.
So, what I event use or how can I do this.
Thanks.
To achieve this, you may want to listen to the corresponding events from the video element. A list of available events can be found at w3schools.com.
The two events of interest for your goal are stalled and waiting, once they are fired you can display your loading animation.
After looking through the YouTube IFrame API, I haven't been able to find anything that can help me.
My goal is to "hide" the loading screen a YouTube video has; i.e. this black screen with a spinning wheel. While it only appears for a brief second and doesn't bother me, it's bothersome when trying to use a YouTube as the background of an element.
My approach to solving this problem was to have a picture of the first frame of the YouTube video overlap the video and then hide it when video starts playing. I originally thought I'd be able to use onStateChange and watch for the YT.PlayerState.PLAYING value so I can hide the image but this event is triggered when it is about to start playing; in other words, it hides the images when the video is about to start playing which is when the loading screen appears.
Are there any other approaches to this or am I stuck with the brief loading screen or would a self-hosted video be the better approach? I wanted to avoid self-hosting the video because of bandwidth.
set the background of the iframe container to black and set the iframe opacity to 0, once it starts playing set the opacity back to 1
Host the video and use an API where you can; customize the media player, hide / show / customize load screens, cue points, start poster / end poster, etc. Or else your spending your time hacking youtube API capabilities with funky javascript.
JW player: http://www.jwplayer.com/
Flow Player: https://flowplayer.org/docs/cuepoints.html
And many others you could check out.
video.js, popcorn.js, etc etc.
<div id="player" style="background: #FFFFFF; opacity: 0;"></div>
// 2. This code loads the IFrame Player API code asynchronously.
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
// 4. The API will call this function when the video player is ready.
// 5. The API calls this function when the player's state changes.
// The function indicates that when playing a video(state=1),
// the player should play for six seconds and then stop.
if (event.data === 1) {
console.log('video plays');
document.getElementById("player").style.opacity = "1";
}
Hey all I wonder if you guys know some trick that could help me out. What I have implemented is a slider that controls the seek position of an HTML5 video via the currentTime property. What I would like to have happen is as the user is dragging the slider the video is updating in real time.
What I have works but the video players image doesnt update to each frame as I set the current time. Any thought?
slide: function(e, ui){
seeksliding = true;
$gVideo[0].currentTime = ui.value;
},
Modern browsers are generally very good at seeking quickly, even to the point where you can synchronize two or more videos using Javascript, with the same kind of functionality you're describing. (Firefox around version 4-5 would take a few extra milliseconds and lose sync, but it's better now.)
The code you have should work, as long as ui.value is between zero and the duration of the video. But you may run into problems if a) the video is not loaded or b) there is something up with the encoded video file.
First, make sure the browser can play the video and seek without any Javascript controls. Just try opening up the file in the browser, first straight off your hard drive and then off the network. If you can't seek with the native controls, you can't seek with Javascript. I've sometimes seen seeking errors solved by re-encoding a video without B-Frames.
Next, see if the video is loaded when you're trying to seek. You can speed this up by adding a preload attribute to the video tag. And make sure the slider event isn't enabled until the browser has the video's duration, by putting the slider code inside a loadedmetadata event.
I have a web page with a video player preloading 3 videos (low, med, and high quality of the same video). Then, when the user clicks on one the button corresponding to the desired version, the video opens.
What I would like to do is to then stop the preloading of the two other videos.
Is that possible? In other words, can the "preload" attribute of the HTML5 Video tag be cancelled or stopped on the fly with some Javascript ?
I just came up with a solution to a problem I had that resembles your own. I am preloading a list of movies on my page, in series, but I need to be able to jump to one of them and prioritize it ahead of whatever might have already been preloading, in order to play it as quickly as possible.
I have a div#prebuffer element that holds the preloaded videos, as they are buffered. When I need to forget about preloading, I simply do this:
var $video = $('#prebuffer video:last');
$video.find('source').attr('src', '');
$video[0].load();
// it has now stopped preloading.
// and then, because I don't want this half-loaded broken cruft hanging around:
$video.remove();
It's slightly ugly, but I wasn't able to find a nicer way. And it gets the job done.
With jQuery, you can try:
$('#videoPlayerId').removeAttr('preload');
I don't know that it will stop a video that's already preloading.
From a UI perspective, why are you trying to preload all 3 videos at the same time? This will slow down the loading speed of all three; if you only preload one of them, more of the video will have a chance to buffer before the user starts viewing it.
I would suggest preloading one of the videos of a default quality and only loading a different quality video if the user selects it. This is the behaviour used by YouTube, Netflix, and others.
There is dedicated tag nowadays:
<video preload="none" ....>