HTML5 & JavaScript support for SMP

From osmf.adobe

Strobe Media Playback (“SMP”) 1.6 features an updated version of our HTML5 “fallback” player. Playback with the JavaScript-based SMP player is triggered when the current device is found to be of a type that does not support Flash Player.

Enabling this functionality are JavaScript libraries that detect the current device, define default profiles for device types, and load either the standard SMP player or the HTML5-compatible SMP player, as specified by the device profile for the type.

Note: The JavaScript device detection and profile libraries are intended to be starting points for developers. You can adjust existing profiles or add new ones as you prefer.

Along with this enhanced HTML5 support, SMP 1.6 also includes new, mobile-optimized user interfaces (“skins”) for smartphones and tablets. The mechanism for loading these new skins is the same as it was for skinning with SMP 1.5 and 1.0.

To obtain the benefits of SMP 1.6’s HTML5 and device-detection capabilities, you simply include the new style and JavaScript files in your page’s code, set up your params (“settings” in JavaScript code) and flashvars, then load the player.

Contents 1 Including the necessary JavaScript & CSS library files 2 Creating the params/settings object 3 Creating the flashvar object 4 Adding the player to the HTML page

Including the necessary JavaScript & CSS library files

The new JavaScript and CSS files to include in your HTML page are:

• jquery.strobemediaplaybackhtml5.css – the styles for the HTML5 player.
• swfobject.js – the JavaScript version of the SWFObject library.
• profiles.js – the library of currently defined device profiles.
• devicedetection.js – the device detection library.
• jquery-1.5.1.min.js – the jQuery library.
• jquery-ui-1.8.14.custom.min.js – the jQuery UI library.
• jquery.strobemediaplaybackhtml5.js – the jQuery plugin that creates the HTML5 player and handles user interaction.
• StrobeMediaPlayer.js – the JavaScript library that loads either the SMP or the HTML5 player, depending on the detected device and its profile.

You add the required libraries by copying the following code into your page:

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

Creating the params/settings object

Some of the values in the settings variable are used in the Flash embed object as params (ex: wmode, etc). Others are used to set up general player settings, such as the size of the video, etc. You can override default values for the three basic device profiles ( "smartphone", "tablet", and "default") here.

The following is an example of settings that cause the player to be drawn to fit the whole page, with a transparent window mode. To set fixed sizes for the player, you would set integer values instead of $(window).width() :

var settings = {
      "smartphone": {
            "startSize": {"width":$(window).width(), "height":$(window).height()},
            "wmode": "transparent"
      },
      "tablet": {
            "startSize": {"width":$(window).width(), "height":$(window).height()},
            "wmode": "transparent"
      },
      "default": {
            "startSize": {"width":$(window).width(), "height":$(window).height()},
            "wmode": "transparent"
      }
};

Creating the flashvar object

The process for this is the same as it was for SMP 1.5 and 1.0. For example:

var flashvars = {
      "poster":"http://url.to/poster.file", 
      "src":"http://url.to/video.file",
      "autoplay": true
};

Adding the player to the HTML page

The player is typically added to the page when the document is loaded:

strobeMediaPlayback.flashvars(flashvars);
strobeMediaPlayback.settings(settings);
strobeMediaPlayback.draw("clipContainer0");