This project is read-only.

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:

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

Step 4: Add the video player container in HTML.

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

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

        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",
                    src: "",
                    type: "text/xml"
                    src: "",
                    type: 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"'
                    src: "",
                    type: 'video/webm; codecs="vp8, vorbis"'
                    src: "",
                    type: 'video/ogg; codecs="theora, vorbis"'

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