Load video entirely, so no partial loading occurs - javascript

I've got a page, where I'm showing a video of around 7MB. I implemented a canplaythrough callback on the video. This seemed to work fine until i checked it out on someone's slow internet connection. What I'm actually doing is loading in one big video and skipping through the video to show different little parts of it.
But sometimes it then gets stuck halway and starts partial loading that part again. How can make sure the video is entirely preloaded and that browser won't reload any parts?

You can't. How the video is buffered is not defined in the specifications and it's entirely up to the browser vendors how they implement the buffering mechanism.
The buffering takes into account things such as preload time, network speed but also tries to prevent downloading huge files to the user's computer that would take up unnecessary space on the disk.
That being said - some browsers do currently have some issues with their buffering mechanism such as the Chrome browser which doesn't always work as expected. If you're using Chrome then try with another browser to check how that behave with your code and scenario.

Related

Best practices for loading videos on a web page?

Would like to understand how AirBnb is able to load a 20MB background video file so fast on their homepage. After inspecting their homepage on WebPageTest, I noticed that the video did not show up in any of the downloaded resources, which made it score so high. When I've tried this tactic, via loading the video asynchronously via AJAX, the video still shows up on WebPageTest as a downloaded resource, but just after the DOM loads. So I'm really not sure how AirBnb is able to make this work. Does anyone have an idea?
AirBnb isn't doing anything special here. They're just starting playback of media using progressive download, which just means playback starts while the video is still downloading.
On their CDN, they have uploaded some fairly large MP4 files with two important characteristics:
The indexing information (MOOV atom) has been moved to the beginning of the MP4 file
The video is encoded in a format and codec that your browser supports
Because of these characteristics, all the site has to do is tell your browser to begin playing the source URL, and it will do the right thing: it makes a web request to the CDN and begins downloading the file. As soon as enough data has been transferred to start playback, it does so.
Finally, I can't say for sure why WebPageTest doesn't show you the video MP4s that are driving the video, but they are certainly there, and the URLs look like https://a0.muscache.com/airbnb/static/Xxxxx-X1-1.mp4. I suspect they're looking at your User Agent to decide which file to send you, and are not sending any video at all to bots like Google and WebPageTest.
You're not getting the real story through WebPageTest. Instead of relying on a third party to evaluate the page in their environment, you should watch the traffic you are actually being sent using Fiddler or the Network tab on Chrome Developer Tools.

why does IOS and videojs make multiple calls to pull stream?

I have an mvc webpage with videojs on it streaming an mp4 file. when I run the page from a desktop, and debug the site, I can see that with a desktop view of the page, the video gets called twice for some reason, both calls seems to have a range-request of the entire filesize. this seems strange that its being called twice, but even stranger, if I call this same page from IOS (IPAD), I see 6 calls for the stream. the first two are usually requesting the first two bytes which makes sense based on my knowledge that IOS does this to determine if the stream is seekable. Then it makes 4 more calls to pull the stream each with a range-request of the entire filesize from what I can recall. Anyone know if this is normal for IOS and videojs use?
Yes, this is normal. the player is probing the file to determine characteristics. It is trying to find the location of the mdat and moov atoms. Even though it asks for the entire file, it will disconnect the TCP session as soon as it has the data it needs to seek with into file.

Multiple concurrent downloads from a webpage

Background
We have a website that delivers dynamic content via download to our customers. Currently this is done by simply making a request to another page which dynamically sets the response ContentType and streams out the file data.
The Problem
We have now been tasked with delivering multiple pieces of content at once at the click of a button (or as a page loads). We have tried various approaches:
1) Multiple iFrames on the page with a different download URL in each. This did not work in all browsers, and since our platform is targeted at mobile phones, many of the native phone browsers did not handle the iFrames at all.
2) Multiple AJAX requests for the content. This is flawed as the AJAX requests were simply returning the binary data and the page was trying to output all of this onto the page rather than deliver as a download.
3) Multiple JavaScript timeouts. This worked for up to 3 downloads, but was very unreliable because if the second Timeout function begun before the first one had started the download, then the whole thing would simply break and not continue.
At this point I'm fresh out of ideas. I tried Googling for similar solutions to the problem but didn't come up with anything and I'm starting to think that it's actually just not possible.
Note that since the content is target at mobile devices, zipping the files up and delivering all at once is not an option since the devices are often unable to decompress the content.
The question, then, is: Is there a way to reliably trigger a web browser to download multiple pieces of content at once?
It turns out that this really isn't possible on mobile devices. Most mobile browsers support the methods involved, but due to the way that each tab of a browser is threaded and paused, it was only possible to fire one download at a time, since any redirect action would interrupt the remaining javascript from processing.

How to download video in background HTML5 / JS

Is there a way to make a video download in the background (Possible on a different thread?) than I get my images and do webrequests?
Situation:
I show a video, video plays fine.
But, once I start getting 2 images at the same time from that server, the page won't response and will wait for my video to have finished loading, then it loads the images within a few seconds. (about 100kb per image).
If I try to open any other page on the same browser and the crashed page's server it won't load untill the crashed page is done loading, however any other site(For example google) will just load fine.
So is there a way to make the browser not want to download full video, or maybe just give priority to images?
This sounds like the server throttling your requests, as everything apart from scripts always load asynchronously in a browser.
It might be that you are only allowed so much bandwidth per second from the server - or so many connections - and that could be the reason why the server won't respond until your first request has finished.
Check your server configuration and perhaps have a play with it to exclude this possibility.
Maybe you can try a worker, it provides a way to execute background scripts (you will have to split your video and images in separate files), as you can see in the Use Cases it refers to "Prefetching and/or caching data for later use" as a possible scenario. Hope it helps.
More info here:
http://www.html5rocks.com/en/tutorials/workers/basics/#toc-examples

Extract audio from video stream using javascript

I want to extract audio from a video file using javascript, is it possible to make a mp3 file or any format so that i can play it in an audio tag in html5 ? if yes how? OR what API should I use ?
JavaScript is a script running at the client-end for handling user interactions usually. Long computations cause the browser to halt the script anyway and can turn the page unresponsive. Besides, it is not suitable for video encoding/decoding.
You should use a Java applet for video processing/audio extraction. That way, processing is still offloaded to the client. Processing on the server is expensive in terms of memory and processor cycles. Not Recommended.
Sooo, this is NOT an optimal solution. It is sort of terrible actually since you will forcing users to download a video without seeing it. What you could do is play the file as HTML5 video and just hide the video display then show controls as if it were just audio. This is sort of like playing a video, but just not watching the video while listening to the audio.
Checkout jPlayer: http://jplayer.org/
It will let you play an MP4 basically on any browser by telling it to use flash then falling back to HTML5 when you need it to. Then you can just style things how you want using CSS/HTML/Images.
You might want to try a small test first to see if the display:none; css style will also prevent the video's audio from playing. If that is the case you could also use height:0;;
Once again, this is sub-optimal since you are taking up the user's bandwidth. There are other solutions out there that could potentially strip out just the audio for you in a streaming environment.

Categories