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 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: 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="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="media/bigbuck.png">
        <param name="source" value="ClientBin/ProgressiveDownloadPlayer.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="media/bigbuck.png">
    <param name="source" value="ClientBin/SmoothStreamingPlayer.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="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 to your DOM ready function (jQuery's DOM ready function is used here as an example):

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

Last edited Sep 21, 2011 at 5:20 PM by jcostello, version 1