Home » Homepage » Mobile Video with PhoneGap, HTML5 and Strobe Media Playback

Mobile Video with PhoneGap, HTML5 and Strobe Media Playback

Posted by: Jens Loeffler    Tags:  , , ,     Posted date:  January 27, 2012  |  Comment



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.

About the author
Jens Loeffler
Technology enthusiast and evangelist, with a passion for online video and mobile. Senior technical evangelist on Adobe's Media Solutions product management team focusing on online video and services. The views expressed on this blog are personal views.



Related Posts

MINI Fumbles With Their New Online Car Configurator
MINI, which had amazing amazing marketing campaigns over the years, included a new car configurator on their European site, which makes you truly wonder what the background story is. The application appears to be based...


Apache Flex – And It Begins With a New Logo
The recent months have been very eventful for Flex developers, and initial concerns turned quickly into excitement to get behind the new opportunity. Flex made significant recent steps to become a full open-source project,...


Vote on the Next HTML5 Media Topic
As indicated in the recent survey, 23% of you are interested in HTML5. And to help with the prioritization, it's time for a vote again. In case there are other topics you are more interested in, leave a comment.


Post comment as
twitter logo facebook logo
Sort: Newest | Oldest