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.