Swapping Players with JavaScript Mobile Device Detection

This topic describes a way that the same HTML page can support delivering a mobile optimized player to mobile devices that support the Flash Player, while delivering a desktop optimized player to other devices.  This example uses JavaScript to detect the device type and then determines which player to display.

Note: The steps outlined in this topic are for Flash based players and will not work in HTML5 players and may prevent HTML5 players from functioning.

When you are delivering video to a mobile device, you want to use a player that has the right size and controls for a small touch screen. When you are delivering video to a desktop, you want a player with mouse-oriented controls that will look good on a larger screen.

There are several approaches you can take to achieve this goal:

• Create a mobile web app, with mobile-optimized HTML pages that host mobile-optimized players
• The approach described in this article, with a single page that supports both Flash mobile and desktop-optimized players, using JavaScript to detect the device type and determine which player to display

Requirements

This approach requires:

• two Video Cloud players, each programmed with the same content
• a JavaScript file, which you can download in a zip file, that you host on your own site

Main Steps

1. Create two players. One player uses a mobile-optimized player template, such as the Mobile Optimized Video Player or the Mobile Optimized Video Player with Horizontal Video List. The other uses a player that is designed for desktop display. You can use either a standard player template or a custom player template for these players. The two players should have comparable features; you probably don't want to provide a single-video player in one context and a multi-playlist player in the other.
2. Get the publishing code for each player and save in a text file.
3. Download the example zip file, extract the playerSwitcher.js JavaScript file, and host it on your site.
4. Add JavaScript to your HTML page that loads the playerSwitcher.js JavaScript and provides the player configuration parameters for each of your two players.

Load playerSwitcher.js

The first element you need to add to your HTML page is a line to load the playerSwitcher.js JavaScript. This goes after the line that loads the Flash-only Player APIs:

<script type="text/javascript" src="http://admin.brightcove.com/js/BrightcoveExperiences.js"></script>
<script type="text/javascript" src="http://example.com/js/playerSwitcher.js"></script>

In this release, the playerSwitcher.js file identifies Android 2.2 as a mobile device supporting Flash Player. As more mobile browsers add Flash Player support, you can add their user agent strings to playerSwitcher.js.

Provide player configuration parameters

In another JavaScript snippet in your HTML page, provide the configuration parameters for your two players. For example:

<script type="text/javascript">
        var desktopPlayer = {};
            desktopPlayer.playerID = "30060000108218";
            desktopPlayer.bgcolor = "#FFFFFF";
            desktopPlayer.width = "966";
            desktopPlayer.height = "546";
            desktopPlayer["@videoPlayer"] = "17038";
            desktopPlayer.isVid = "true";
            desktopPlayer.isUI = "true";
            desktopPlayer.dynamicStreaming = true;


        var mobilePlayer = {};
            mobilePlayer.playerID = "30300022726001";
            mobilePlayer.bgcolor = "#FFFFFF";
            mobilePlayer.width = "600";
            mobilePlayer.height = "600";
            mobilePlayer["@videoPlayer"] = "17038";
            mobilePlayer.isVid = "true";
            mobilePlayer.isUI = "true";
     . . .
</script>

You can find these player configuration parameters in the player publishing code that you copied to a text file, or in Video Cloud Studio's Publishing module. At a minimum, you should supply values for the following player configuration parameters:

For a full list of the available player configuration parameters, with descriptions of how to use them, read Player Configuration Parameters.

Invoke insertPlayer

Finally, in the same JavaScript snippet, invoke the insertPlayer function:

<script type="text/javascript">
    . . .
    brightcove.insertPlayer(
        "playerContainer",
        "myPlayer",
        desktopPlayer,
        mobilePlayer
    );
</script>

Results

The result is an HTML page that displays your mobile-optimized player when it detects a mobile device that supports Flash, and displays your desktop-optimized player when no mobile device is detected.