Videogular - video stops playing often - how to preload and indicate loading status - javascript

I have 86mb 1920x1080 video that I am playing online using videogular.
The video freezes often, taking 5-10 seconds to continue playing.
Is there a way to preload video completely and then play?
Is there a way to indicate how much has been loaded (as it's done on youtube?)
I've already tried preload:"auto",preload:"none" and preload:"preload".

Related

preload a second video while other is playing with videoJS

I am testing videoJS in a web app in chrome and measurement first buffering time (to start to play) and delay is ok but when I test in a different device, like a tv the delay increases to ~7s.
I am testing only HLS videos and I noticed that fragments are loaded much time early the video finish to play then I am asking if it's possible to start to buffer the second video once the current video is 100% downloaded and then the client does not notice that time delay to playback.

Show loading image when video buffer next frames

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.

html5 video seek performance

I'm writing a simple app to seek an html5 video in both directions by dragging mouse. I also need to overlay stuff on top of the video so I'm using html5 canvas. The video element stays hidden, I play the video and update the canvas image every 20 ms. This much has no performance issues.
However I want to seek the video when I drag the mouse. It turns out that I would need to seek the video every 20 ms which leads to a choppy performance. Another hack I tried was to fast forward the underlying video when I drag. This has almost perfect performance and is sufficient for my use case except I can't rewind and fast-forward the video.
My research says the only way right now to rewind an html5 video is to set the currentTime backwards frame by frame, but again I can't afford to do this every 20ms or the video gets choppy.
Is there any way around these limitations? It would be enough if I can just play the video backwards in normal speed.

Video Networkstate InternetExplorer

I'm trying to create a video with slides next to it using HTML5 and Javascript.
The problem with InternetExplorer is that it's video networkstate stays on 2 for a while. As long as it is downloading the video, it won't be downloading my slides next to the video.
As a fix I tried pausing the video if the preloaded image isn't loaded on the time it has to pick over the slides' spot. But however the video stays downloading (Taking about 300 seconds according to the network state) And once it's done the slides will load directly. (Taking 260 seconds according to the same thing, but as soon as the video is loaded they ARE loaded)
When ever I try to use myVideo.networkState in the console I get state 2(loading) when it's not working, and state 1 when it does. So it has something to do with the video.
So the question:
Is there a way to either give priority to the slides, so they WILL load
Or a way to let IE download both slides and video on the same time.
Or giving the video a limited speed, if this has to do with a speed problem.
Answer: Delete Internet Explorer, Download Google Chrome.

How can I stop the preload of a video (HTML5 - Javascript)

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" ....>

Categories