August 28, 2009
HTML 5 Video and Audio in UIWebView and WebView
I have been playing with the video and audio tags in the UIWebView on the iPhone and WebView on the Mac. I tried them in the QT WebView as well on linux. I am pleased to announce that they work great! I have tried it with mp3, mp4, and wmv. All worked on all three platforms.
It looks like this is a good way to display videos for your users to play in your hybrid applications.
Let’s say you have a video called someCrazyMovie.mp4 that you want to display to your users. On the iPhone or the Mac put it in the Resources group of your Xcode project that uses a UIWebView. Point the UIWebView to a local html file, also in the resources file.
In this html file put the following code.
<video src=”someCrazyMovie.mp4>A movie description as an alt</video>
When you run your application you will see the first frame of the video used as a representational image. You can play it by clicking it. On the iPhone and iPod touch the movie player launches to play the movie.
The tag lets you size it, display or not display the video controls, etc.
The audio tag is used much the same way.
I’ll include an example for both the iPhone and the Mac in the 1.5.0 release of QuickConnectiPhone 1.5.0
Josiah said,
September 1, 2009 at 12:41 am
This is awesome. Thank you for pointing this out and testing it.
san diego audio video said,
December 30, 2009 at 9:39 pm
I think using flash players is best, it gives all the controls you need over the media
tetontech said,
December 30, 2009 at 9:49 pm
Flash doesn’t work on the iPhone/iPod touch and probably never will since it is a CPU and battery hog. The HTML 5 video and audio tags are an international standards way of playing audio and video. It also includes play, pause, stop, scroll, etc. just as you can in flash.
On the iPhone/iPod touch when you select one of these tags it launches the movie player. On the other platforms such as Safari, Firefox, and others but not IE the video plays embedded.
Since the QuickConnectFamily framework uses an embedded WebKit browser in all instances the tag is always handled correctly for the platform. With HTML 5 you don’t have to wrap your video file in flash interpreted code.
lunacafu said,
January 20, 2010 at 1:50 pm
…”I’ll include an example for both the iPhone and the Mac in the 1.5.0 release of QuickConnectiPhone 1.5.0…”
I was wondering where to find the examples you have mentioned? I would like to play with it.
tetontech said,
January 20, 2010 at 5:42 pm
The QC download has an examples folder. In this folder you will find both iPhone and Mac example folders. You should find the examples. there.
Lee
sethsquatch said,
January 30, 2010 at 8:47 pm
Does anyone know if the UIWebview can play audio w/out opening the media player? I want to play audio files like sound effects on click events w/out calling objective c from the webview.
tetontech said,
January 30, 2010 at 10:38 pm
The UIWebView doesn’t directly but the QuickConnectFamily download includes QuickConnectiPhone that does.
Lee
max hoeboer said,
August 19, 2010 at 1:30 pm
Lee,
I want to add a video into an app and play it when the page is loaded but without controls and with an autostart.
Is it possible to autostart a movie?
It would really help me.
Thanks
Max
tetontech said,
August 20, 2010 at 5:16 am
I haven’t found a way to do so. Even on the iPad.
sarthkast said,
September 3, 2010 at 8:48 pm
In Apple’s words: “In Safari on iPhone OS (for all devices, including iPad), where the user may be on a cellular network and be charged per data unit, autobuffering and autoplay are disabled. No data is loaded until the user initiates it. This means the JavaScript play() and load() methods are also inactive until the user initiates playback, unless the play() method is triggered by user action. In other words, a user-initiated Play button works, but an onLoad play event does not.”
http://developer.apple.com/safari/library/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/AudioandVideoTagBasics/AudioandVideoTagBasics.html#//apple_ref/doc/uid/TP40009523-CH2-SW1
Rajesh said,
February 8, 2011 at 7:02 am
this method is very helpful for my application..but i had a problem.after clicking the play button MPMoviePlayer appearing,,but it doesn’t support landscape orientation ..how can i achieve both landscape and portrait orientation ?
ThE uSeFuL said,
August 11, 2011 at 9:16 am
Anyone who is thinking of loading the html using the UIWebView’s loadHTMLString method give the path as follows,
NSString *videoPath = [NSString stringWithFormat:@"file://%@",[[NSBundle mainBundle] pathForResource:@”videoFileName” ofType:@”mp4″]];
tetontech said,
August 11, 2011 at 3:21 pm
This would be true for those working in Objective-C. This is a discussion about using the UIWebView in iOS and WebView in Android. Both are HTML 5 containers.