How to: Configure the MediaWebPart Object Using JavaScript (ECM)

  • Article

Applies to: SharePoint Server 2010

Digital asset management (DAM) includes a rich media player object that can be configured by using the ECMAScript (JavaScript, JScript) client object model. You can automate the default Microsoft Silverlight 2.0 media player by writing custom code that interoperates with the ECMAScript (JavaScript, JScript) object model, which is supported by Silverlight.

The following code creates a scriptable media player interface that automatically gets and sets many properties that users can modify through the UI, including

  • The title of the media file.

  • The display mode.

  • Whether the play automatically setting and the loop setting are set to on or off.

  • The location of the theme.

  • The preview image.

  • Which audio file or video file is selected.

You can create a similar file in Microsoft SharePoint Designer 2010 or Microsoft Visual Studio 2010.

This topic includes the code for a sample .aspx page that includes Silverlight controls and ECMAScript (JavaScript, JScript) object model implementations that are required to test the configurable options that the ECMAScript (JavaScript, JScript) object model provided to the media player.

Rich Media Player Test Example

The following sample demonstrates an .aspx page that can be used to test the functions and properties that the ECMAScript (JavaScript, JScript) object model provides to the rich media player. To make the most of the sample, ensure that you have access to a server that hosts one or more video files and a preview image file. The sample plays the video file that you specify and loads the preview image that you provide. Find these types in the mediaplayer.js file.

Table 1 lists the configurable ECMAScript (JavaScript, JScript) object model properties that the sample demonstrates.

Table 1. ECMAScript properties

Property

Description

string MediaTitle {get;set}

Gets and sets the title of the target media file.

string DisplayMode { get; set; }

Gets and sets the display mode: inline, overlay, or full screen.

bool AutoPlay { get; set; }

Gets and sets whether the target media file automatically plays.

bool Loop { get; set; }

Gets and sets whether the target media file plays on repeat.

string TemplateSource { get; set; }

Gets and sets the source of the XAML template, which can be applied to the media player as a theme.

string PreviewImageSource { get; set; }

Gets and sets the URL where the preview image source file is located.

string MediaSource { get; set; }

Gets and sets the URL where the media source file is located.

string EmbedText { get; }

Gets text that is embedded into the video when the media file is loaded.

void Play();

Plays the media file.

void Pause();

Pauses the media file.

void Stop();

Stops the media file.

string Duration { get; }

Gets the duration of the media file in seconds.

long DurationMilliseconds { get; }

Gets the duration of the media file in milliseconds.

string Position { get; set; }

Gets and sets in seconds the position in the duration of the media file.

long PositionMilliseconds { get; set; }

Gets and sets in milliseconds the position in the duration of the media file.

To configure the rich media player object

  1. Select a play mode from the Set Play Mode list box.

  2. Open Microsoft SharePoint Designer 2010. On the File menu, click New to create a page.

  3. Copy the following code into the new page.

    <html xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882">

<head>
    <title>SilverLight Media Player Sample Page</title>
    <script type="text/javascript" src="/_layouts/mediaplayer.js"></script>

    <script type="text/javascript">

//Gets the media player.
      function getMediaPlayer()
      {
        var p = document.getElementById("MediaPlayerHost")
        var obj = p.getElementsByTagName("object");
        return obj[0].Content.MediaPlayer;
      }

      //Initialize the media player object and set values for its properties. Customize MediaUrlField and PreviewURLField values for your local environment.
      function init()
      {
        var serverStr = window.location.href;
        serverStr = serverStr.substr(7);
        serverStr = serverStr.substr(0, serverStr.indexOf("/"));

        document.getElementById("MediaURLField").value = "http://" + serverStr + "/documents/test.wmv";
        document.getElementById("PreviewURLField").value = "http://" + serverStr + "/documents/test.jpg";
        document.getElementById("TitleField").value = "API Test Page";
        document.getElementById("TemplateURLField").value = "http://" + serverStr + "/Style%20Library/XAML/AlternateMediaPlayer.xaml";
      }

      //Set properties of the media player, including media URL, preview image URL, template URL, title, autoplay, whether to repeat, and default display mode. 
      function SetMediaSource()
      {
        var elm = document.getElementById("MediaURLField");
        var p = getMediaPlayer();
        p.MediaSource = elm.value;
      }
      function SetPreviewImageSource()
      {
        var elm = document.getElementById("PreviewURLField");
        var p = getMediaPlayer();
        p.PreviewImageSource = elm.value;
      }
      function SetMediaTitle()
      {
        var elm = document.getElementById("TitleField");
        var p = getMediaPlayer();
        p.MediaTitle = elm.value;
      }
      function SetTemplateSource()
      {
        var elm = document.getElementById("TemplateURLField");
        var p = getMediaPlayer();
        p.TemplateSource = elm.value;
      }
      function SetAutoPlay()
      {
        var elm = document.getElementById("autoPlayCB");
        var p = getMediaPlayer();
        p.AutoPlay = elm.checked;
      }
      function SetLoop()
      {
        var elm = document.getElementById("loopCB");
        var p = getMediaPlayer();
        p.Loop = elm.checked;
      }
      function SetDisplayMode()
      {
        var elm = document.getElementById("DisplayModeSelect");
        var p = getMediaPlayer();
        p.DisplayMode = elm.value;
      }

      //Sets back the time of the media being played by 5000 milliseconds (5 seconds).
      function BackFive()
      {
        var p = getMediaPlayer();
        var pos = p.PositionMilliseconds;
        pos -= 5000; /*5 seconds*/
        p.PositionMilliseconds = pos;
        ShowPosition();
        ShowPositionMilliseconds();
      }
      //Plays media set in the MediaURLField.
      function Play()
      {
        var p = getMediaPlayer();
        p.Play();
      }
      //Pauses media.
      function Pause()
      {
        var p = getMediaPlayer();
        p.Pause();
      }
      //Stops media.
      function Stop()
      {
        var p = getMediaPlayer();
        p.Stop();
      }
      //Sets forward the time of the media being played by 5000 milliseconds (5 seconds).
      function ForwardFive()
      {
        var p = getMediaPlayer();
        var pos = p.PositionMilliseconds;
        pos += 5000; /*5 seconds*/
        p.PositionMilliseconds = pos;
        ShowPosition();
        ShowPositionMilliseconds();
      }
      //Sets back the time of the media being played by 5000 milliseconds (5 seconds).
      function ShowEmbedText()
      {
        var p = getMediaPlayer();
        var elm = document.getElementById("EmbedHost");
        if(elm.innerText != undefined)
        {
          elm.innerText = p.EmbedText;
        }
        else
        {
          elm.textContent = p.EmbedText;
        }
      }
      //Shows the total duration (in minute:second format) of the selected media.
      function ShowDuration()
      {
        var p = getMediaPlayer();
        var elm = document.getElementById("DurationHost");
        if(elm.innerText != undefined)
        {
          elm.innerText = p.Duration;
        }
        else
        {
          elm.textContent = p.Duration;
        }
      }
      //Shows the total duration (in milliseconds) of the selected media.
      function ShowDurationMilliseconds()
      {
        var p = getMediaPlayer();
        var elm = document.getElementById("DurationMillisecondsHost");
        if(elm.innerText != undefined)
        {
          elm.innerText = p.DurationMilliseconds;
        }
        else
        {
          elm.textContent = p.DurationMilliseconds;
        }
      }
      //By default, gets the position in minutes and seconds of the selected media based on internal text; otherwise, gets the position in minutes and seconds of the selected media based on metadata.
      function ShowPosition()
      {
        var p = getMediaPlayer();
        var elm = document.getElementById("PositionHost");
        if(elm.innerText != undefined)
        {
          elm.innerText = p.Position;
        }
        else
        {
          elm.textContent = p.Position;
        }
      }
      // By default, gets the position in milliseconds of the selected media based on internal text; otherwise, gets the position in milliseconds of the selected media based on metadata.
      function ShowPositionMilliseconds()
      {
        var p = getMediaPlayer();
        var elm = document.getElementById("PositionMillisecondsHost");
        if(elm.innerText != undefined)
        {
          elm.innerText = p.PositionMilliseconds;
        }
        else
        {
          elm.textContent = p.PositionMilliseconds;
        }
      }
    </script>
    <style>
    .propertyVal
    {
      background-color: cornsilk;
      font-weight: bolder;
    }
    </style>
  <head>
<!--[if gte mso 9]><![endif]-->
</head>
<body style="{font: 10pt, sans-serif;}">
    <div>
      <div>
      //Sets test controls with user-specified values.
      <form>
        <input type="text" id="MediaURLField"> <a href="javascript:SetMediaSource();">Set Media Source</a><br>
        <input type="text" id="PreviewURLField"> <a href="javascript:SetPreviewImageSource();">Set Preview Image Source</a><br>
        <input type="text" id="TitleField"> <a href="javascript:SetMediaTitle();">Set Media Title</a><br>
        <input type="text" id="TemplateURLField"> <a href="javascript:SetTemplateSource();">Set Template Source</a><br>
        <input type="checkbox" id="autoPlayCB"> <a href="javascript:SetAutoPlay();">Set Auto Play</a><br>
        <input type="checkbox" id="loopCB"> <a href="javascript:SetLoop();">Set Loop</a><br>
        <select id="DisplayModeSelect">
          <option>Overlay</option>
          <option selected="true">Inline</option>
          <option>Fullscreen</option>
        </select><a href="javascript:SetDisplayMode();">Set Display Mode</a><br><br>
        <a href="javascript:Play();">Play</a>
        <a href="javascript:Pause();">Pause</a>
        <a href="javascript:Stop();">Stop</a>
        <a href="javascript:BackFive();">Back 5</a>
        <a href="javascript:ForwardFive();">Forward 5</a><br><br>
        <a href="javascript:ShowEmbedText();">Show EmbedText</a> Embed Text:<span id="EmbedHost" class="propertyVal"></span><br>
        <a href="javascript:ShowDuration();">Show Duration</a> Duration:<span id="DurationHost" class="propertyVal"></span><br>
        <a href="javascript:ShowPosition();">Show Position</a> Position:<span id="PositionHost" class="propertyVal"></span><br>
        <a href="javascript:ShowDurationMilliseconds();">Show DurationMilliseconds</a> DurationMilliseconds:<span id="DurationMillisecondsHost" class="propertyVal"></span><br>
        <a href="javascript:ShowPositionMilliseconds();">Show PositionMilliseconds</a> PositionMilliseconds:<span id="PositionMillisecondsHost" class="propertyVal"></span><br>
      </form>
      </div>
      <div id="MediaPlayerHost">
        <script>
        {
          init();
          var MediaURL = document.getElementById("MediaURLField").value; 
          var PreviewURL = document.getElementById("PreviewURLField").value; 
          var MediaTitle = document.getElementById("TitleField").value; 
          var AutoPlay = document.getElementById("autoPlayCB").checked; 
          var Loop = document.getElementById("loopCB").checked;
        mediaPlayer.createMediaPlayer(
          document.getElementById('MediaPlayerHost'),
          'MediaPlayerHost',
          '500px', '333px',
          {
            displayMode:'Inline',
            mediaTitle:MediaTitle,
            mediaSource:MediaURL,
            previewImageSource:PreviewURL,
            autoPlay:AutoPlay,
            loop:Loop,
            mediaFileExtensions:'wmv;wma;avi;mpg;mp3;',
            silverlightMediaExtensions:'wmv;wma;mp3;'
          });
        }
        </script>
      </div>
    </div>
  </body>
</html>

  4. Save the file as an .aspx file.

  5. Open the file in SharePoint Designer 2010.

  6. In the Set Media File field, type the URL to the video file that you want the media player to play.

    Note

    The media player can play audio files and video files. For example purposes, this procedure uses a video file.

  7. In the Set Preview Image Source field, type the URL to the image file that you want the media player to show when previewing the video.

  8. In the Set Media Title field, type a friendly name for the video file.

  9. In the Set Template Source field, type the URL to the location of a template library that contains an XAML file that you want to apply to the media player.

  10. If you want to automatically play the file, select the Set Auto Play check box.

  11. Select a play mode from the Set Play Mode list box:

    • If you select Overlay, the system maximizes the media player and displays it in front of any other windows that are open.

    • If you select Inline, the system loads the media player inline on the current .aspx page.

    • If you select Full Screen, the system loads the media player in full screen mode.

See Also

Reference

MediaField

MediaFieldValue

MediaDisplayMode

MediaFieldControl

MediaWebPart

Concepts

Managing Rich Media Assets in SharePoint Server 2010 (ECM)

Rich Media Programming Model in SharePoint Server 2010 (ECM)

Other Resources

mediaPlayer Class