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
Related
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.
Does someone know a technique to make asynchonous image parsing when multiple images are printed (base64) on a webpage ?
It causes Firefox to have small freeze on loading/parsing on a gaming machine (for more than 15 images 1.5MB), so I'm a bit worried of that.
Still I think giving an url and using a javascript async (lazy) image loading is better, if someone have some more informations tips, I'll be glad to hear it Thanks.
The answer is, there is no way to control browser parsing speed with printed base64 images (sended in html HTTP response). If you print a lot of images the browser will use more CPU to parse the webpage.
The solution if you have bin images is to call them separately, you will have to get an url to serve image data individually (no static files).
The problem with this is making the browser cache working : if not every time the page is loaded you will have to render every image on the page causing the webserver overheat.
Another solution would be to cache image on the server side, but still the client would have to download image every time consuming the webserver bandwidth.
Browser cache can be activated with http cache-control : https://css-tricks.com/snippets/php/intelligent-php-cache-control/
The best thing is to use cache-control, but also use cache on server side.
Of course this only apply for binary data, if you have image file just let your webserver to server image file naturally.
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.
Is it possible to blur a remote image using http://www.blurjs.com?
I have our images hosted on a remote CDN and we want to use blurjs to blur the image for a background effect. When we try and use blur js directly with the remote image javascript cannot read the file and throws a unable to read image data error.
The way i'm currently doing it is regenerating the image in php and then using blurjs, but it is very slow and consumes a lot of resources.
We've tried the css solution too with filters but the browers runs too slow when we do.
does anybody have a solution?
Your problem is that pixel access in canvas is not allowed for images loaded from a different domain than the one the page is hosted on. What you need is a proxy script that runs on your server which that allows your javascript to load images from other domains via your server. Of course the downside is that all traffic will also run through your server and that the time to retrieve the image will increase (since the image has first to be loaded to your server and then to the client) and there is unfortunately no way around that.
The good news is that this is a problem that Flash developers had to face many years ago already so it has been solved many times:
Here's for example a php script: http://www.abdulqabiz.com/blog/archives/2007/05/31/php-proxy-script-for-cross-domain-requests/
Here's a more recent implementation in Node.js http://codelikebozo.com/creating-an-image-proxy-server-in-nodejs
When leaving a website my user get a message you are now leaving, which redirects after 4 seconds. Can that time be used to somehow preload the target site's content, so that after the redirect the site appears faster?
If the site to be fetched is on your domain, you can parse the next file with JavaScript and request the assets.
If not, you can't figure out its assets (not via XHR anyway, most of the time) so you can't preload them. You could hack it by placing the site in a hidden iframe. You could also use your server as a proxy, to get a list of assets and pass it to your HTML to start preloading them.
You could try also using this meta tag...
<link rel="prefetch" href="/images/big.jpeg">
Source.
It is a lot of effort for arguably not much gain though.
You could start loading the site into an invisible <iframe>. If it's cached properly, this will reduce load time when the user actually enters the page.
This would however have all kinds of potential side effects, like autoplay music and videos starting in the background.
I would tend to leave this kind of preloading to the web browser (and/or the prefetch tag that #alex shows!)