HTML5 offline video caching in mobile safari - iphone

I can't seem to get Safari on the iPhone or iPad to offline cache videos. Everything else gets cached just fine when I go offline. The video file is obviously in the manifest, but I just get the broken arrow. Works fine in Safari desktop. Any clues? I've tried both object embed and the video tags.

Sadly there’s a ~5 MB limit on offline cache in Mobile Safari. Not much you can do about it.

See these two articles for mobile browser cache limits (note that the second one adds vital information):
http://www.yuiblog.com/blog/2010/06/28/mobile-browser-cache-limits/
http://www.yuiblog.com/blog/2010/07/12/mobile-browser-cache-limits-revisited/
It only generically covers html and "external resources", but they didn't explicitly test video files, so maybe these are never cached by Mobile Safari.

Audio & video are not cached by iPhone since they are played by external applications. It seems the only workaround is to store them as base64 in local database or have them cached in application manifest as php(or similar) file but with base64 encoded audio and video content.

Use the manifest to cache the html pages containing the video tag, then tell your web server to expire the video in 30 years. That way the video will be in the browser cache not the manifest cache.

Update for iOS 4.3 on iPad:
I just tried adding a movie to a manifest file in iOS 4.3.
Safari asked me to allow extending the offline storage and then downloaded the movie.

Perhaps something like this would work: http://www.nihilogic.dk/labs/jsvideo/test2.php

i have read it needs an html5 manifest setup to cache files

Related

HTML5 video as base64 encode data URI not working in iPad and iPhone browser

I need to play the video as base64 data URI format using HTML5 video tag on iPad and iPhone, which eventually helps me to make the video offline by storing it in websql,
I got a link which helped me to study the feasibility - http://iandevlin.com/html5/data-uri/video.php (if you take the view source of the link, you will see its well encoded in base64 format)
I tried this on most of the modern browser's like chrome & firefox in windows machine and safari in mac os, there it worked well.
So my hoped increased and I tried it in iPhone and iPad, Well its NOT working there! I am just getting a blank BLACK screen in place of the video control.
Also I am not getting any error in the safari debug mode as well. I would like to know whether we can play base 64 encoded video or it just a known issue for ipad and iphone...
to play video under HTML5 tag you need to provide its content source like images and video/audio files name without any path then only it works well i t
When Base64 media encoding is used you need to take in mind that memory consumption increases substantially, it's not the same as external media inclusion once media is not inside document and may be load in frames consuming only memory you really need.
Using Base64 need to load all the data to perform a decryption, and most mobile browsers take a lot of time to show video because their useful memory is very small (usually most of memory is consumed by operational system) and conversion take a long, when a processes take a long in mobile system, garbage collection know that as a zombie thread and kill it.
Actually is not a good idea assume you can use base64 for video in mobile browser, it should not work.
I have found iOS Safari to be pickier than desktop browsers regarding having the correct Mime type in the data uri. You should make sure you are using the correct one.

Detect video is going to be played in UIWebView

I want something similar to this:
https://itunes.apple.com/us/app/video-download-ibolt-downloader/id481606548?mt=8
I want to detect there is any video in web page and want to download that stream into iphone device.
In console media players tells that it is setting the movie path to some URL. There must be a way to download stream and save in local device.
P.S: I know how to download a video file. I want it using online streaming or from sites which does not provide a download link.
P.S++: Video download from HTML + UIWebView is not helpful.
Thanks.
The post is old but it might be worth to clear this
Those apps are probably using undocumented API. Apple doesn't accept private API when apps are submitted to the app store, however they might not be looking for usage of undocumented notifications
You can find more information in here and here
Those apps show you the download button after you click video, and after the video starts. So probably they are listening for media playback notifications and get the url from MPMoviePlayer instance.
By the way, apple doesn't allow apps that download videos from youtube. There might be some apps on the app store that does that, but I recently got rejected because of this. It might not be worth the hassle, as most big video streaming websites don't want people downloading their videos and work hard to make sure that they don't.

Mp4 video not working on iPad *in Offline Mode*

I'm getting a weird problem when embedding an mp4 onto a webpage in iOS Safari. I am embedding it with a video tag:
<video src='gizmo.mp4' width=560 height=320></video>
However, on the page, I'm getting the 'video not available' placeholder graphic (play button with a slash through it)
However, when I go to the direct video on my server (http://www.example.com/gizmo.mp4), the video works perfectly.
I am using the video from here to test this out, I don't have the final video files yet. I have also replaced the gizmo.mp4 file with a gizmo.m4v file that Quicktime generated when I hit "Export for Web." I get the same result.
I am only interested in targeting iOS, so specific solutions for iPhone/iPad are welcome (even if they wouldn't work in the web at large)
Thanks in advance!
-Esa
EDIT: Did a bit more testing. Since this is an offline app that I am working on, I was completely offline for this, relying on the manifest. However, the videos worked once I took the manifest out and was working completely online again. So it looks like something up with iOS not caching video resources? The video in question is 748kB, so it's not a cache size issue (though, when I tries with a 13MB movie online, Safari automatically asked to cache the content)
Videos are regarded by the browser as a streaming resource and are not cached - even when referenced directly in the .appcache manifest file. I think the only way you could get this to work is to package the HTML 5 application up as a native app, using one of the many available tools for this (https://trigger.io, Accelerator etc).

HTML5 audio on iOS4 iPhone offline Web app does not play?

I built an offline Web app (at www.chirp.com) that caches itself when bookmarked on the desktop. Testing on the iPhone4 in airplane mode shows that the program runs without a network connection (except for Google map access of course). But the mp3 sound files do not play in this mode. Is there a problem with the audio tag when running in offline mode? The sound files are included in the manifest file, so they should be cached with the other files. Image files are still shown for instance.
How about if I use PhoneGap to create an iPhone app from this webapp? Will the sound files be included in the resulting binary load? In other words will the time delay, of online download of the small mp3 files each time the app is run and the sound is requested, be removed?
It is a bug or design decision on iOS to silently disallow caching of audio resources.
See this answer for more detail.
Using PhoneGap should work because the audio files will be present locally.
How about if I use PhoneGap to create an iPhone app from this webapp? Will the sound files be included in the resulting binary load? In other words will the time delay, of online download of the small mp3 files each time the app is run and the sound is requested, be removed?

Need to play flash videos on iphone

I am building this iphone app for a client and they have a large set of flash video files that they need to play/stream to the iphone. I understand that the iphone doesnt natively support flv playback but isnt there anything I can do to get around this problem?
In case it helps, they are using the akamai flash player on their website to play these video files.
Thanks in advance.
Yes! - You can convert all the videos to m4v format.
There's a javascript hack available, but it will only work if it's installed on the clients web server. It's also pretty clunky and slow and will likely murder battery life.
A workaround, since you're working with video, is to convert to mp4 format.
Short answer: no flash, but conversion will do what you need.
akamai actually supports "auto-packaging" of h.264 content which may be your best option here. By uploading 1 or more h.264 files you can use those to both serve your Flash player, and akamai will also auto-package them for iPhone (chunking them into .ts files and creating an .m3u8 reference file for dynamic mobile streaming).
This allows you to not have separate encodes for mobile and web, thus saving money and time so you can leverage your existing archive.