Image Image Image Image Image Image Image Image Image Image

Overdigital.com | April 19, 2014

Scroll to top

Top

12 Comments
5819 Views

Mobile Video with PhoneGap, HTML5 and Strobe Media Playback

Mobile Video with PhoneGap, HTML5 and Strobe Media Playback

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

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.


  • windows_7_phone

    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

  • ivanboni

    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

  • http://www.overdigital.com/ Jens Loeffler

    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.

  • cfjedimaster

    I’ll also point out my blog, raymondcamden.com, if you want some PhoneGap demos.

  • windows_7_phone

    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.

  • JohnCein

    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.

  • comlong

    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

    • http://www.overdigital.com/ Jens Loeffler

       @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.

  • akoelah

    thanks… works for me. how to play and auto full view or full screen…?

    • http://www.overdigital.com/ Jens Loeffler

      @akoelah Whatever is supported in HTML5, you can use. This might help - http://www.codeblog.co/getting-autoplay-working-on-ios/

  • http://www.overdigital.com/ Jens Loeffler

    JohnCein That’s the most common approach right now, Flash for main content, HTML5 for fallback on mobile devices.

  • http://www.overdigital.com/ Jens Loeffler

    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.

Follow

Get every new post delivered to your Inbox

Join other followers: