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.
Related
I have an app with an animated UI realised via APNG images.
Each block has 2 APNG images and one PNG one:
Appearing (APNG)
PingPong (APNG)
Static (PNG)
I need to play the second animation right after the first one is finished and only make visible the PNG image after a touch event. I've done it via setTimeout but, unfortunately, after second page refresh a browser completely ignores some animations, some of them start jittering, some disable in an inappropriate moment.
How can I fix the problem?
And can I catch the moment when APNG animation has finished? Do APNG images emit any events?
To check the problem, open the app on mobile device and scan the code.
Browsers don't have any built-in support for treating APNGs as anything other than an image: there is no way to determine when an APNG has started or stopped playing. You could probably fix the issue by just converting the APNGs to an actual video file format, and embedding the images with <video> instead, since that has an API for controlling playback. Alas, it doesn't seem that any browsers support treating APNGs as video so you'll need to convert it to another video format, such as WebM.
If you are really committed to not converting your APNGs to a video file format, you could work around the limitation in browsers by using a library such as pngjs to decode the APNG, extracting the fdAT chunks, and then manually animating through those extracted frames (each frame in an APNG is itself a (non-animated) PNG).
Please see this site: (works for sure in Firefox): http://www.cnn.com/2016/02/01/politics/iowa-caucuses-2016-highlights/index.html
There's a video and after you scroll the page down it gets smaller and goes to the right sidebar and keeps playing from the exact minute it was playing before.
I see that this video is not an iframe. I need to do such thing for Vimeo's iframe video. How can this be achieved?
I'm trying to take a HTML for the video and then append it but it doesn't work properly.
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.
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".
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" ....>