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

- [Flash Media Server 4.5.1](http://www.adobe.com/go/fms) with support for HLS

- [PhoneGap](http://www.phonegap.com) application running on iOS

- The HTML5 version of [Strobe Media Playback](http://sourceforge.net/projects/smp.adobe/files/)

Code

    Device Detection Test
    
        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;
        }
        
    
    
    
    
    
    
    
    
    
    
        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 


    
       Strobe Media Playback
    
    
        
            
        
        Video One

Video one description.

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.

[iframe width="550" height="403" src="http://www.youtube.com/embed/dDssEIkU5P4" frameborder="0" allowfullscreen /]

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.