PhoneGap is a powerful HTML5 based cross platform application platform, but how well does it work with video? The answer is it depends on the browser capabilities. On a platform like iOS, where the browser provides access to the underlying QuickTime video engine via the HTML5 video tag, it’s possible to include a fully customized, HTML5 skinned, video player.
Here is an example how to enable advanced video on iOS, tightly integrated in an existing Adobe video workflow.
Setup
- Flash Media Server 4.5.1 with support for HLS
- PhoneGap application running on iOS
- The HTML5 version of Strobe Media Playback
Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Device Detection Test</title> <style type="text/css"> body { font-family: sans-serif; } .movie { width: 100%; clear: both; } .movie div.thumb { float: left; margin-right: 10px; cursor: pointer; border: solid 1px blue; } .movie div.details { width: 100%; height: 100%; } .movie div.details p.title { font-weight: bold; cursor: pointer; } .movie div.details p.desc { font-weight: normal; } </style> <link type="text/css" rel="stylesheet" href="lib/jquery.strobemediaplaybackhtml5.css"/> <script type="text/javascript" src="lib/swfobject.js"></script> <script type="text/javascript" src="lib/profiles.js"></script> <script type="text/javascript" src="lib/devicedetection.js"></script> <script type="text/javascript" src="lib/jquery/jquery-1.5.1.min.js"></script> <script type="text/javascript" src="lib/jquery-ui-1.8.14.custom.min.js"></script> <script type="text/javascript" src="lib/jquery.strobemediaplaybackhtml5.js"></script> <script type="text/javascript" src="lib/StrobeMediaPlayer.js"></script> <script> var movies = [ { "flashvars":{"poster":"http://www.osmf.org/dev/1.6gm/images/poster1.png", "src":"http://mediadelivery.adobe.com/adobevideodemo/manifests/hls-hillmancurtis-manifest.m3u8"}, "element":"clipContainer0" }, ]; $(function() { for (i = 0; i < movies.length; i++) { strobeMediaPlayback.flashvars(movies[i]["flashvars"]); strobeMediaPlayback.draw(movies[i]["element"]); } }); </script> </head> <body> <div> Strobe Media Playback </div> <div id="movie0" class="movie"> <div class="thumb"> <div id="clipContainer0"></div> </div> <div class="details"><p class="title">Video One</p><p class="desc">Video one description.</p></div> </div> </body></html> |
In addition to the html file, ensure to include the Strobe Media Playback html5-images and the lib subfolder with the appropriate assets and images.
Result
And as expected it works, including a slick custom HTML5 skin for the JS version of Strobe Media Playback.
Conclusion
Even though the video stack is not embedded in Phonegap but depends on the device browser capabilities, on controlled, minimally fragmented environments like iOS, it’s possible to use PhoneGap for advanced video experiences. On other platforms like Android, it’s important to consider the currently fragmented browser video capabilities. To eliminate the fragmentation challenge, Adobe AIR provides an unified video stack.
Nice post. It would be even better if this site featured stand demos of these features so that users can get a clean look at the code. Please add a demo section containing a working implementation plus an explanation of the code.Buying and taking that plugin and integrating it into WP is really good for beginers . I would just like to share with everyone html5 video player
Hi, I like your post
Could you please create a tutorial or step by step about this? Would be great!!
is it possible to play the videos from the iphone itself?
my email is ivanboni at gmail dot com
Thanks
Hi Ivan – I didn’t publish a complete tutorial, since most of it was related to XCode. http://phonegap.com/ has complete XCode/iOS step-by-step guidelines though, as well as ryanstewart and andytrice have more in-depth Phonegap tutorials. The video plays via the HTML5 video tag, it mirrors the iOS browser video capabilities.
I’ll also point out my blog, raymondcamden.com, if you want some PhoneGap demos.
Awesomecailsz!!!!!!!!<a href=”http://html5socket.com/”>html5 video player</a>,Creating slideshow in HTML5! wow! what, flash did that 10 years ago! It is very easy to create a flash animation, for example a ball bouncing in flash professional in less than am minute. Javascript is a mess when compared to AS3.
Html5 can’t replace adobe at once… HTML5 spec doesn’t yet cover any meta data outside of duration, width and height (the video spec is one of the more volatile aspects of HTML5). You may have to do it the old fashioned way – with a data object (json or XML) of timestamps for cuepoints… but we can use html5 fallback support to flash.I use <a href=”http://www.hdwebplayer.com”>Flv Player</a> to my website with html5 fallback support. It does auto-detect which playback mode is supported by a user’s device and select accordingly.
I tried on Android. But I still have this error:
W/webcore(1521): java.lang.Throwable: EventHub.removeMessages(int what = 107) is not supported before the WebViewCore is set up.
How could I fix it?
Thanks
@comlong I only tested this on iOS. ICS has HLS support via the video tag, but in earlier versions it’s technically more complicated (2.x has no HLS browser support, 3.x supposedly not very robust). If it’s a PhoneGap specific issue (again, not tested on Android), maybe andytrice has some tips.
thanks… works for me. how to play and auto full view or full screen…?
@akoelah Whatever is supported in HTML5, you can use. This might help – http://www.codeblog.co/getting-autoplay-working-on-ios/
JohnCein That’s the most common approach right now, Flash for main content, HTML5 for fallback on mobile devices.
ivanboni When I wrote this demo, I was able to easily follow the Phonegap steps for XCode. I don’t have a step by step tutorial, but andytrice has a great set of Phonegap posts.
Hi,
I am using above code to play video in strobe but the player showing nothing What am i missing ??
please help me..
Are you trying to play it on iOS?