Getting Started Guide - Declarative Usage

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

Step 1: Download the HTML5 Player Framework.

  • Use the minified JavaScript and CSS files for production (js/playerframework.min.js and css/playerframework.min.css) or the documented JavaScript and CSS files for development (src/js/*.js and src/css/*.css).

Step 2: Download the Silverlight Players.

  • Create a directory named "xap" and add either the Progressive Download Sample Player or the Smooth Streaming Sample Player .xap file. Rename the file to SilverlightPlayer.xap.

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

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

Step 4: Declare the video player in HTML.

  • If you want to use HTML5 video as the primary experience, add the following markup to your web page:
<video id="myVideo" class="pf-video" width="480" height="320" controls="controls" poster="http://smf.cloudapp.net/html5/media/bigbuck.png">
    <source src="http://smf.cloudapp.net/html5/media/bigbuck.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
    <source src="http://smf.cloudapp.net/html5/media/bigbuck.webm" type='video/webm; codecs="vp8, vorbis"' />
    <source src="http://smf.cloudapp.net/html5/media/bigbuck.ogv" type='video/ogg; codecs="theora, vorbis"' />
    <object class="pf-silverlight" data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="480" height="320" data-poster="http://smf.cloudapp.net/html5/media/bigbuck.png">
        <param name="source" value="xap/SilverlightPlayer.xap"/>
        <param name="onError" value="onSilverlightError" />
        <param name="onLoad" value="onSilverlightLoad" />
        <param name="minRuntimeVersion" value="4.0.50401.0" />
        <param name="autoUpgrade" value="false" />
        <param name="enableGPUAcceleration" value="true" />
        <param name="windowless" value="true" />
        <param name="InitParams" value="scriptablename=Player,autoplay=false,mediaurl=http://smf.cloudapp.net/html5/media/bigbuck.mp4"/>
        <div class="pf-static">
             Silverlight is not installed or a later version is required.
        </div>
    </object>
</video> 
  • If you want to use Silverlight as the primary experience, add the following markup to your web page:
<object id="myVideo" class="pf-silverlight" data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="480" height="320" data-poster="http://smf.cloudapp.net/html5/media/bigbuck.png">
    <param name="source" value="xap/SilverlightPlayer.xap"/>
    <param name="onError" value="onSilverlightError" />
    <param name="onLoad" value="onSilverlightLoad" />
    <param name="minRuntimeVersion" value="4.0.50401.0" />
    <param name="autoUpgrade" value="false" />
    <param name="enableGPUAcceleration" value="true" />
    <param name="windowless" value="true" />
    <param name="InitParams" value="scriptablename=Player,autoplay=false,mediaurl=http://streams.smooth.vertigo.com/BigBuckBunny_30sec/bigbuck.ism/manifest"/>
    <video class="pf-video" width="480" height="320" controls="controls" poster="http://smf.cloudapp.net/html5/media/bigbuck.png">
        <source src="http://smf.cloudapp.net/html5/media/bigbuck.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
        <source src="http://smf.cloudapp.net/html5/media/bigbuck.webm" type='video/webm; codecs="vp8, vorbis"' />
        <source src="http://smf.cloudapp.net/html5/media/bigbuck.ogv" type='video/ogg; codecs="theora, vorbis"' />
        <div class="pf-static">
             HTML5 video is not supported.
        </div>
    </video>
</object>

Step 5: Add the following JavaScript:

<head>
    <script>
        var myPlayer = new PlayerFramework.Player("myVideo");
    </script>
</head>

Last edited Nov 8, 2011 at 8:06 AM by jcostello, version 4