August 28, 2009

HTML 5 Video and Audio in UIWebView and WebView

Posted in iPhone development, mac development tagged , , , , , , , , , , , , , , , , at 9:01 pm by tetontech

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

About these ads

13 Comments »

  1. Josiah said,

    This is awesome. Thank you for pointing this out and testing it.

  2. I think using flash players is best, it gives all the controls you need over the media

    • tetontech said,

      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,

        …”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,

        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

  3. sethsquatch said,

    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,

      The UIWebView doesn’t directly but the QuickConnectFamily download includes QuickConnectiPhone that does.

      Lee

  4. max hoeboer said,

    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

  5. Rajesh said,

    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 ?

  6. ThE uSeFuL said,

    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,

      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.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 318 other followers

%d bloggers like this: