Is there a single universal way to load all assets before using them? I am wanting to load some images, audio files, and a few .swf files before my app starts. Currently, I load the images by creating new <img> elements and setting the src to the image path, for the audio files I add the preload="auto" attribute in the <audio> tag and I perform an ajax request to load the .swfs.
Is there any problem (re some browsers not caching etc.) with the way I am currently loading my files and is there a 'best practices' way of collectively preloading all these file types before I display my content?
Yes. Actually, this has been made into a standard. Here is the relevant RFC. A move to standardise this for HTML5 is in works
Most modern browsers support prefetching. Here is a brief summary of how they are used:
Firefox
As per MDN, you can use the <link> tags in head of the document,
<link rel="prefetch" href="/assets/my-preloaded-image.png">
as well as set HTTP Link header with the request, or within the HTML as a meta tag.
Link: </assets/my-preloaded-image.png>; rel=prefetch
<meta http-equiv="Link" content="</assets/my-preloaded-image.png>; rel=prefetch">
enter code here
Not only this, but you can also give navigation hints within the page, such as what will be the next page, etc.
<link rel="next" href="2.html">
IE 11
In Internet Explorer too there is the Prefetch header. You can set like so:
<link rel="prefetch" href="http://example.com/style.css" />
You can even prefetch (pre-resolve) DNS queries
<link rel="dns-prefetch" href="http://example.com/"/>
Or, prerender a web page (a-la Google Instant)
<link rel="prerender" href="http://example.com/nextpage.html" />
Chrome
Chrome also does the same things as Firefox and IE in this regard.
Safari
I have not been able to find solid proof of whether Safari supports these things. But reading up on many sources, I suspect they do, just that probably Apple is not so eager to market Safari as Microsoft is pushing IE11 (just an opinion).
Have fun. :)
Sources:
http://msdn.microsoft.com/en-us/library/ie/dn265039%28v=vs.85%29.aspx
https://developer.mozilla.org/en/docs/Link_prefetching_FAQ
http://davidwalsh.name/html5-prefetch
https://developers.google.com/chrome/whitepapers/prerender
https://docs.google.com/presentation/d/18zlAdKAxnc51y_kj-6sWLmnjl6TLnaru_WH0LJTjP-o/present#slide=id.g120f70e9a_0140
Update: After compiling this answer, I stumbled upon a similar answer on SO, which gives more details on the topic. Please do have a look.
How can I preload a page using HTML5?
Prealoding the assets, is one of the hardest as well as simplest tasks in a FLASH or HTML5 project because we have done FLASH to HTML5 conversion projects.
The easiest kinds of preloaders are static preloaders used to load the movie in which they exist. For these preloaders, all you need to do is stop the movie on a preloader screen, usually the first frame of the movie, and keep it there until you are able to determine that the movie has been completely loaded into the Flash player.
The Preloader also stops any flickering or delay when changing uncached images on a web page since the same image has to be downloaded from the server every time it is needed to be displayed.
We have used jQuery HMTL5 Loader in our web apps(HTML5), you can see the Github Repo here.
This plugin needs a JSON file to get the files that it has to preload, and it can preload images, html5 video and audio sources, script and text files. In addition to this, it has a different type of loaders (circular,line, big counter,etc) and additional features so on.
It is implemented like this.
<script>
var loaderAnimation = $("#html5Loader").LoaderAnimation();
$.html5Loader({getFilesToLoadJSON:'json file',
onUpdate: loaderAnimation.update,
debugMode:false
});
</script>
Its working perfectly in different browsers including Chrome, FireFox, Safari, Opera, etc and in mobile browsers.
Note: We have used this for our HTML5 web applications which runs in different platforms including android and iOS.
You can use a PreloadJS library (it is part of CreateJS suite). It's lightweight, easy to use and quite powerful in terms of configuration. It allows queueing, multiple connections, pausing, etc. It offers access to (progress, complete, etc) events.
If you have some Actionscript experience this tool should be quite straight forward for you.
Try using $(window).load(function(){ /* Use any of your resources */ });.
I tried this and working for me. this. Since this is a plain javascript api, you can also use like window.onload=function(){/* JavaScriptCode */}; I believe.
I been really happy with PxLoader: http://thinkpixellab.com/pxloader/
It's an extremely easy to use, lightweight preloader for use in HTML5 apps. You can download images, audio, or any other file-type. It lets you monitor completed events as well.
It's free to use (MIT license) and forkable on GitHub.
There are some good demos and script samples here: http://thinkpixellab.com/pxloader/#sample1
Related
I'm working on a project with kinetic typography where the user can write something and download it on a video format but I'm having trouble generating the (video) file.
I thought of screen capturing but most browsers are blocking those features due to security concerns (and I wanted to add audio later on).
I've looked into https://www.w3.org/TR/screen-capture/ but its documentation doesn't say much nor gives examples.
I've seen https://mgechev.github.io/jscapture/ but it only works with versions bellow Chrome 37.
I've seen https://github.com/spite/ccapture.js but it only records canvases and I'm working with text.
How can I generate a video client-side (preferably) on a browser?
I was wondering if any of you know some libraries that will help/improve the response of IE >= 7 for a website that I have to modify.
I already loaded the modernizr library, but I know that there are some libraries ment to help IE behave as a modern browser should. So, what do you recommend? What options do I have?
I'm really sick of spending hours trying to fix a 1 thing for X Version of IE.
I don't think it's that simple. I don't know of a single library that makes them all act "normal". A few I use are:
Modernizr can help with new html5 elements in older browsers
jQuery for cross browser DOM manipulation
jQuery UI for cross browser theming
But there is no silver bullet library that works everywhere all the time. Sometimes you will have to adjust the UI based on the browser capabilities. One common method of doing so is called progressive enhancement.
Progressive enhancement is a strategy for web design that emphasizes
accessibility, semantic HTML markup, and external stylesheet and
scripting technologies. Progressive enhancement uses web technologies
in a layered fashion that allows everyone to access the basic content
and functionality of a web page, using any browser or Internet
connection, while also providing an enhanced version of the page to
those with more advanced browser software or better bandwidth.
Check out ie7.js http://code.google.com/p/ie7-js/ its not perfect, but it can help with some issues.
You can tell users they need to install Google Chrome Frame https://developers.google.com/chrome/chrome-frame/
"Google Chrome Frame is an open source plug-in that seamlessly brings Google Chrome's open web technologies and speedy JavaScript engine to Internet Explorer"
I use CSS3Pie. This is a .htc file you place on the server which provides poly-fills for many CSS3 styling elements such as border-radius, text shadows, box shadows and gradients. It's quite handy in that is solves many of the same problems for IE8 and IE9 as well.
It can a be a little tricky to set up in that you sometimes need to define a MIME type on your server for .htc and you have to ensure that you set the path in your CSS file to where the .htc file resides, other than that, it's great.
I don't think there's a general fix-all solution for your problem.
I recommend trying this tool called dynaTrace AJAX Edition (http://www.compuware.com/application-performance-management/ajax-performance-testing.html), the free version is more than enough to help you.
What you do is:
Start a session and choose your IE browser
Open and click through your web application
Close the browser
Double-click the "Timeline" on dynaTrace.
You'll see a breakdown of your site's performance so you can identify which Javascript is the problem.
You'll also see if the slowdown is simply because your loading external resources which are unavailable - something which I've found IE to handle poorly.
I have created an browser-based application with the use of HTML & javascript, where some videos are embedded into it.
Now to access the application even faster, we wish to access the videos from cache(if available) so as to avoid buffering when accessed by the end-user.
Constraints are : app is used mainly on iPhone / iPad through default Safari-browser and javascript/jQuery solution is needed so as to achieve the requirement ASAP. Also the video sizes are upto 22MB.
Is it possible to access such big videos to be managed by cache on iPad, can those be accessed from javascript or jQuery ?
File caches are the browsers responsibility (or servers/applications). You can use Cache-control HTTP headers for some measure of control:
http://condor.depaul.edu/dmumaugh/readings/handouts/SE435/HTTP/node24.html
but in the end it's highly dependent on which browsers you are using. I would suggest looking up top "most used" browsers in iPad and research how their file cacheing works.
An alternative suggestion, perhaps you should use HTML5 "client-side storage"?
http://www.webreference.com/authoring/languages/html/HTML5-Client-Side/index.html
I have a JavaScript function that loads a flash movie into a webpage div using swfobject.embedSWF().
I want to be able to, alternatively, load a .mov file into the same div, in the event that this is the file found instead of the .swf.
Is there a close equivalent to swfobject.embedSWF for the purposes of embedding a .mov file? If not, what is an efficient route to doing this using JavaScript?
QTObject might do what you need and it's from the same author as SWFObject. It's old though, so I'm not sure if it will work well in modern browsers.
EDIT I searched and found reports of it working fine in IE7, Firefox 2 and Opera 9, so you might just be in luck. Just make sure you test it thoroughly.
I've been experimenting with the audio and local storage features of html5 of late and have run into something that has me stumped.
I'd like to be able to cache or store the source of the audio element locally to enable speedier and offline playback. The problem is I can't see how this is possible with the current implementation.
I have tried the following using WebKit:
Creating a manifest file to set up local caching but the audio file appears not to be a cacheable item maybe due to the way it is stream or something
I have also attempted to use javascript to put an audio object into local storage but the size of the mp3 makes this impossible due to memory issues (i think).
I have tried to use the data uri and base64 to use the html as a audio transport that can be cached but again the filesize makes this prohibitive. Also the audio element does not seem to like this in WebKit (works fine in mozilla)
I have tried several methods of putting the data into the local database store. Again suffering the same issues as the other cases.
I'd love to hear any other ideas anyone may have as to how I could achieve my goal of offline playback using caching/local storage in WebKit.
I've been trying to do this myself, on the iOS (for iPhone / iPad) but it refuses to cache audio files in offline, even if in Cache Manifest.
It does not error, but instead simply pretends to have played the audio element if invoked via JavaScript without a control. If it's embedded with a control, it displays an alternate control that says "Cannot play audio file.". It works fine if the application is able to go online.
It seems not to cache the audio, playing another sound resource seems to cause it to clear the previous resource from memory - this is pretty worthless functionality even when online.
I have experimented with base64 encoding the audio as data URI's. This works in Safari on the desktop (at least for fairly short samples of around 20-30k that I've been using) but seems not to be supported at all on iOS - it silently does nothing, which is highly annoying.
I don't know about other vendors - Google Chrome used to not support data URI's for audio but perhaps they fixed it... - it seems like it's not possible for now though.
Update: Minor discrepancy with iPhone OS 3.x (tested with 3.1.2): If an audio element is specified in an offline web app but it doesn't have a control, it displays a non-interactive control with a non-animated spinner on it (which it definitely shouldn't do). I assume this is fixed in iOS 4.x (which should be out next week).
So it's been a while since I asked this question and I thought i'd give some info about how we solved it. Basically we encoded the data into PNG's using a similar technique to this:
http://audioscene.org/scene-files/yury/pngencoding/sample.html
Then cached the image on the mobile device using html5 local storage and accessed it as needed. The PNG's were pretty big but this worked for us.
I spent a while trying to do this for a game I'm making, and since as far as I could tell browsers (Firefox and Chrome) still don't support caching of audio elements I thought I'd post the solution I found.
There is a workaround described here: http://dougx.net/plunder/index.php#code
I can confirm it works pretty well, but is probably better suited to smaller files. As he describes here (http://dougx.net/plunder/GameSounds.txt), you encode the audio as base64 strings, and give them a data:audio/ogg;base64 (or any compatible audio format) header, which HTML5 audio can then read in. Because this is just a string, the browser will cache it.
I guess it would be preferable to get the manifest approach working, since this feels like the most relevant mechanism for locally caching the file.
What happens if you alter the audio file's HTTP headers, e.g. Content-Type and Expires? Does the browser do something different if the file extension is changed?
I see you've had no luck so far.
You might want to take a look at JAI (JavaScript Audio Interface) ("the world's first javascript interface for web <audio>"). Or get in touch with Alastair MacDonald, who wrote it.
Failing that, the HTML5 Doctor may be able to assist.
Adding video and audio files to local storage works with iOS 4.3.
I just added a video and an audio file to manifest and they both got downloaded to offline storage on iPad.