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
Related
I have an idea for a web application and I'm having some javascript trouble.
Suppose the application needs to get a client's website url, show it (in an iframe or something). And then it should be able to temporarily tweak its design with Javascript which I assume is called Javascript injection. (Something similar to what the Developer Tools of browsers can do.)
So the question is: Is this cross domain javascript and if so, what solutions could I use?
, and what's the easiest way?
On a related note: What if the user adds some of my application's javascript code to their website (like how some APIs work), Would that help in any way.
Thanks.
same origin policy does not apply when you are armed with the proper knowledge of how modern web browsers work (IE8+ and of course all the other ones are always ahead of IE)
I specifically tackled this problem by using postMessage and iframe for cross browser communication. This technique works in IE8+ and all modern browsers. Also, ensure you are setting your privacy policy in your headers for 3rd party cookie support in IE.
You can see this working live if you go to kitgui.com and try the demo. You can also use this for free.
If they are including your JS in their page, then the JS is running from their page and you can just use standard DOM.
If they aren't, then the same origin policy will prevent you from touching their site.
This is cross domain. So the solution: Server Side Languages
PHP, ASP.Net, Ruby on Rails, etc. Load their website via that and then you can touch it because it will be a copy on your site. I will warn you though, this can be very difficult when using libraries like CURL (at least in my experience with PHP's CURL).
You culd use bookmarklet to add your javascript code to client's webpage. Like firebug lite does.
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.
For diagnostic purposes, I need to be able to disable HTML5 in Android's WebView, without disabling Javascript (i.e. keep WebSettings.setJavaScriptEnabled(true);)
To further clarify: I love the ability to play YouTube videos without any Flash plugin installed. It even works with setPluginsEnabled(false). I can do this thanks to WebView's HTML5 built-in support. Now, to test a certain function, I need to trigger DownloadListener.onDownloadStart() with a YouTube video without disabling Javascript.
Is this possible?
Update: Since I posted this question I discovered that at least DOM storage can be disabled. I haven't found a way to disable HTML5 video yet.
I know it's very old question... Still, you may want to check this answer for an idea. The WebSettings class has these methods for enabling/disabling HTML5 features:
setDomStorageEnabled(boolean flag) - Sets whether the DOM storage API is enabled.
setDatabaseEnabled(boolean flag) - Sets whether the database storage API is enabled.
setDatabasePath(String databasePath) - Sets the path to where database storage API databases should be saved.
setAppCacheMaxSize(long appCacheMaxSize) - Note: deprecated in API 18.
setAppCachePath(String appCachePath) - Sets the path to the Application Caches files.
setAppCacheEnabled(boolean flag) - Sets whether the Application Caches API should be enabled.
I am not sure that this question makes much sense. You're not going to be able to "disable" an HTML5 feature in a browser that supports it. The best you can probably do is to set a non-HTML5 doctype on the webpage, but even then most rendering engines (webkit included) will still gladly support those features (<video> tag, <canvas>, etc) that they implement.
It sounds like what you're really trying to do is test what happens with a streaming video on a particular device (with an older?.. version of webkit that doesn't support <video>). Is that right? In this case, I'm not aware of any version of Webkit that has ever been distributed with Android that does not have support for <video>, but I could be wrong.
Is it possible to allow users to paste image data into a Website? That is, they have an image in the clipboard and can paste it into an HTML Site? (I would then somehow grab the bytes and store them - persistence isn't the problem here)
It needs to be Cross-Browser IE8, FF3.5 and Chrome 4, but I can use browser plugins like Silverlight, Flash or bare JavaScript if possible (I might even use Browser Plugins, although that would be painful to manage and IE would need ActiveX is guess...). Also since it's an internal site, I can add the site to the Local Intranet Zone in IE (not sure if that changes stuff for Firefox and Chrome).
Any chance to do this?
With Silverlight 4, you have text-only clipboard access, but not Image data, as far as I can remember...
Check out the lengthy discussion here. I think the end result was that this is possible using a combination of Canvas and Flash.
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.