Compartir a través de

Procedimiento para configurar el objeto MediaWebPart mediante ECMAScript

  • Artículo

Última modificación: lunes, 19 de abril de 2010

Hace referencia a: SharePoint Server 2010

La administración de activos digitales (DAM) incluye un objeto reproductor multimedia enriquecido que se puede configurar con el modelo de objetos de cliente de ECMAScript (JavaScript, JScript). El reproductor multimedia predeterminado de Microsoft Silverlight 2.0 se puede automatizar escribiendo código personalizado que interopere con el modelo de objetos de ECMAScript (JavaScript, JScript), que Silverlight admite.

El siguiente código crea una interfaz de reproductor multimedia que permite ejecutar scripts y que automáticamente obtiene y establece varias propiedades que los usuarios pueden modificar a través de la interfaz de usuario, incluidos:

  • El título del archivo multimedia.

  • El modo de presentación.

  • Si las opciones de configuración de reproducción automática y repetición están activadas o desactivadas.

  • La ubicación del tema.

  • La imagen de vista previa.

  • El archivo de audio o de vídeo que está seleccionado.

Puede crear un archivo similar en Microsoft SharePoint Designer 2010 o Microsoft Visual Studio 2010.

En este tema se incluye el código de una página .aspx de ejemplo que contiene los controles de Silverlight e implementaciones de modelo de objetos de ECMAScript (JavaScript, JScript) necesarios para probar las opciones configurables que el modelo de objetos de ECMAScript (JavaScript, JScript) proporciona al reproductor multimedia.

Ejemplo de prueba del reproductor multimedia enriquecido

En el siguiente ejemplo se muestra una página .aspx que se puede usar para probar las funciones y propiedades proporcionadas por el modelo de objetos de ECMAScript (JavaScript, JScript) para el reproductor multimedia enriquecido. Para aprovechar al máximo el ejemplo, asegúrese de que tiene acceso a un servidor que hospeda uno o varios archivos de vídeo y un archivo de imagen de vista previa. En el ejemplo se reproduce el archivo de vídeo especificado y se carga la imagen de vista previa proporcionada. Estos tipos se encuentran en el archivo mediaplayer.js.

La tabla 1 recoge las propiedades configurables del modelo de objetos de ECMAScript (JavaScript, JScript) que se muestran en el ejemplo.

Tabla 1. Propiedades ECMAScript

Propiedad

Descripción

string MediaTitle {get;set}

Obtiene y establece el título del archivo multimedia de destino.

string DisplayMode { get; set; }

Obtiene y establece el modo de presentación: insertado, superposición o pantalla completa.

bool AutoPlay { get; set; }

Obtiene y establece si el archivo multimedia de destino se reproduce automáticamente.

bool Loop { get; set; }

Obtiene y establece si el archivo multimedia de destino se reproduce repetidamente.

string TemplateSource { get; set; }

Obtiene y establece el origen de la plantilla XAML, que puede aplicarse como un tema al reproductor multimedia.

string PreviewImageSource { get; set; }

Obtiene y establece la dirección URL donde se encuentra el archivo de origen de la imagen de vista previa.

string MediaSource { get; set; }

Obtiene y establece la dirección URL donde se encuentra el archivo de origen multimedia.

string EmbedText { get; }

Obtiene el texto que está insertado en el vídeo cuando se carga el archivo multimedia.

void Play();

Reproduce el archivo multimedia.

void Pause();

Pone en pausa el archivo multimedia.

void Stop();

Detiene el archivo multimedia.

string Duration { get; }

Obtiene la duración del archivo multimedia en segundos.

long DurationMilliseconds { get; }

Obtiene la duración del archivo multimedia en milisegundos.

string Position { get; set; }

Obtiene y establece la posición de la duración del archivo multimedia en segundos.

long PositionMilliseconds { get; set; }

Obtiene y establece la posición de la duración del archivo multimedia en milisegundos.

Para configurar el objeto de reproductor multimedia enriquecido

  1. Seleccione un modo de reproducción en el cuadro de lista Set Play Mode.

  2. Abra Microsoft SharePoint Designer 2010. En el menú Archivo, haga clic en Nuevo para crear una página.

  3. Copie el siguiente código en la página nueva.

    <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. Guarde el archivo como un archivo aspx.

  5. Abra el archivo en SharePoint Designer 2010.

  6. En el campo Set Media Resource, escriba la dirección URL del archivo de vídeo que desea que el reproductor multimedia reproduzca.

    Nota

    El reproductor multimedia puede reproducir archivos de audio y de vídeo. Para el propósito de este ejemplo, en este procedimiento se usa un archivo de vídeo.

  7. En el campo Set Preview Image Source, escriba la dirección URL del archivo de imagen que desea que el reproductor multimedia muestre al obtener una vista previa del vídeo.

  8. En el campo Set Media Title, escriba un nombre descriptivo para el archivo de vídeo.

  9. En el campo Set Template Source, escriba la dirección URL de la ubicación de una biblioteca de plantillas que contiene el archivo XAML que se va a aplicar al reproductor multimedia.

  10. Si desea reproducir el archivo de forma automática, active la casilla Set Auto Play.

  11. Seleccione un modo de reproducción en el cuadro de lista Set Play Mode:

    • Si selecciona Overlay, el sistema maximiza el reproductor multimedia y lo muestra delante de otras ventanas abiertas.

    • Si selecciona Inline, el sistema carga el reproductor multimedia insertado en la página .aspx activa.

    • Si selecciona Full Screen, el sistema carga el reproductor multimedia en modo de pantalla completa.

Vea también

Referencia

MediaField

MediaFieldValue

MediaDisplayMode

MediaFieldControl

MediaWebPart

Conceptos

Administración de activos digitales

Modelo de programación de administración de activos digitales

Otros recursos

mediaPlayer Class