How to play html5 video on iPad ?

Nos · 07-30-2010, 12:24 PM

Hello everybody,

I'm trying to use html5 to play video on iPad with a UIWebView like :
NSString* src = [NSString stringWithFormat:@"<html><head><meta charset='utf-8' /><title>HTML5 Video Player</title><script src='video.js' type='text/javascript' charset='utf-8'></script><script type='text/javascript' charset='utf-8'>window.onload = function(){VideoJS.setup();}</script><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script><script src='http://html5media.googlecode.com/svn/trunk/src/jquery.html5media.min.js'></script><link rel='stylesheet' href='video-js.css' type='text/css' media='screen' title='Video JS' charset='utf-8'></head><body><div class='video-js-box'><video class='video-js' width='694' height='392' poster='posterPage11.png' controls preload><source src='page11.mov' type='video/mp4''; codecs='h.264''><object class='vjs-flash-fallback' width='%@' height='%@' type='application/x-shockwave-flash' data='http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf'><param name='movie' value='http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf' /><param name='allowfullscreen' value='true' /><param name='flashvars' value=''config={'clip':{'url':'page11.mov','autoPl ay':false,'autoBuffering':true}}'/><img src='posterPage11.png' width='694'height='392' alt='Poster Image' title='No video playback capabilities.' /></object></video></body></html>"];
//NSString*src = [NSString stringWithFormat:@"<html><head><meta charset='utf-8'><meta name='keywords' content='html5, html 5, video, audio, html5video, html 5 video, html 5 audio, flash, h.264, h264, mp4, mp3, wav, aac, web, internet'/><meta name='description'content='The html5media project enables HTML5 video and audio tags in all major browsers. All you need to do is include a single javascript file in your document.'/><title>HTML5 video and audio tags in all major browsers</title><link rel='stylesheet' href='styles.css'/><script src='html5media.min.js'></script></head><body><video class='video' poster='posterPage11.png' width='694' height='392' controls preload><source src='page11.mov' type='video/mov'></source></video></body></html>"]

[theWebView loadHTMLString:src baseURL:nil];

Unfortunately, on the device, i received the warning message : Unable to read symbols for "/Developer/Platforms/iPhoneOS.platform/DeviceSupport/3.2.1 (7B405)/Symbols/System/Library/Internet Plug-Ins/QuickTime Plugin.webplugin/QuickTime Plugin" (file not found).

Is anyone has already encountered this problem? (i added to my project javascript files)

Best Regards,

NosProduction

Nos · 08-02-2010, 07:57 AM

Ok, i found a solution.

Edit an html file named as you want "myfile.html" with this content :
<html><head><style></style></head><body><video id='video_with_controls' height='yourheight' width='yourwidth' controls autobuffer autoplay='true'><source src='yourvideo.mov' title='' poster='yourposter.png' type='video/mp4' durationHint='durationofvideo'/></video><ul></body></html>

Add your html file to your app.

Finally, in your webView, use this syntax :
[theWebView loadRequest:[NSURLRequest requestWithURL:[NSURL fileURLWithPath:[[[NSBundle mainBundle] bundlePath]stringByAppendingPathComponent:myfile.html]]]];

Best Regards,

NosProduction