Getting Started Guide - JavaScript Usage

Follow these steps to get the HTML5 Player Framework added to your web page:

Step 1: Download the HTML5 Player Framework Preview.

  • Use the minified JavaScript file for production (js/playerframework.min.js) or the documented JavaScript file for development (src/*.js).

Step 2: Download the Silverlight Players.

  • Add both .xap files to the ClientBin directory.

Step 3: Add the following JavaScript and CSS references to your web page:

<head>
    <script type="text/javascript" src="js/playerframework.min.js"></script>
    <link rel="stylesheet" href="css/playerframework.css">
</head>

Step 4: Add the video player container in HTML.

<div id="myVideoContainer" class="pf-container">
</div>

Step 5: Add the following JavaScript to your DOM ready function (jQuery's DOM ready function is used here as an example):

<script>
    $(function()
    {
        var myPlayer = new PlayerFramework.Player("myVideoContainer",
        {
            mediaPluginFallbackOrder: [ "VideoElementMediaPlugin", "SilverlightMediaPlugin" ],
            //Uncomment the following line and comment out the line above to use Silverlight as the primary experience:
            //mediaPluginFallbackOrder: [ "SilverlightMediaPlugin", "VideoElementMediaPlugin" ], 
            width: "480px",
            height: "320px",
            poster: "media/bigbuck.png",
            sources:
            [
                {
                    src: "http://streams.smooth.vertigo.com/BigBuckBunny_30sec/bigbuck.ism/manifest",
                    type: "text/xml"
                },
                {
                    src: "http://smf.cloudapp.net/html5/media/bigbuck.mp4",
                    type: 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"'
                },
                {
                    src: "http://smf.cloudapp.net/html5/media/bigbuck.webm",
                    type: 'video/webm; codecs="vp8, vorbis"'
                },
                {
                    src: "http://smf.cloudapp.net/html5/media/bigbuck.ogv",
                    type: 'video/ogg; codecs="theora, vorbis"'
                }
            ]
        });
    };
</script>

Last edited Oct 25, 2011 at 10:32 PM by jcostello, version 4