Partager via

Procédure : configurer l’objet MediaWebPart à l’aide d’ECMAScript

  • Article

Dernière modification : lundi 19 avril 2010

S’applique à : SharePoint Server 2010

La gestion de biens numériques comprend un objet lecteur multimédia enrichi que vous pouvez configurer à l’aide du modèle objet client ECMAScript (JavaScript, JScript). Vous pouvez automatiser le lecteur multimédia Microsoft Silverlight 2.0 par défaut en écrivant du code personnalisé qui interagit avec le modèle objet ECMAScript (JavaScript, JScript), lequel est pris en charge par Silverlight.

Le code suivant crée une interface de lecteur multimédia pouvant contenir des scripts qui obtient et définit automatiquement de nombreuses propriétés que les utilisateurs peuvent modifier par le biais de l’interface utilisateur, notamment :

  • le titre du fichier multimédia ;

  • le mode d’affichage ;

  • l’activation ou la désactivation du paramètre de lecture automatique et du paramètre de lecture en boucle ;

  • l’emplacement du thème ;

  • l’image d’aperçu ;

  • le fichier audio ou vidéo sélectionné.

Vous pouvez créer un fichier similaire dans Microsoft SharePoint Designer 2010 ou Microsoft Visual Studio 2010.

Cette rubrique comprend le code d’un exemple de page .aspx qui contient des contrôles Silverlight et des implémentations du modèle objet ECMAScript (JavaScript, JScript) nécessaires au test des options configurables que le modèle objet ECMAScript (JavaScript, JScript) a fournies au lecteur multimédia.

Exemple de test du lecteur multimédia enrichi

L’exemple suivant montre une page .aspx qui permet de tester les fonctions et les propriétés que le modèle objet ECMAScript (JavaScript, JScript) fournit au lecteur multimédia enrichi. Pour tirer parti de l’exemple, vérifiez que vous avez accès à un serveur qui héberge un ou plusieurs fichiers vidéo et un fichier d’image d’aperçu. L’exemple lit le fichier vidéo que vous spécifiez et charge l’image d’aperçu que vous fournissez. Ces types se trouvent dans le fichier mediaplayer.js.

Le tableau 1 répertorie les propriétés du modèle objet ECMAScript (JavaScript, JScript) configurables illustrées par l’exemple.

Tableau 1. Propriétés ECMAScript

Propriété

Description

string MediaTitle {get;set}

Obtient et définit le titre du fichier multimédia cible.

string DisplayMode { get; set; }

Obtient et définit le mode d’affichage : en ligne, superposition ou plein écran.

bool AutoPlay { get; set; }

Détermine et définit si le fichier multimédia cible s’exécute automatiquement.

bool Loop { get; set; }

Détermine et définit si la lecture du fichier multimédia cible doit être répétée.

string TemplateSource { get; set; }

Obtient et définit la source du modèle XAML, qui peut être appliqué au lecteur multimédia en tant que thème.

string PreviewImageSource { get; set; }

Obtient et définit l’URL à laquelle se trouve le fichier source de l’image d’aperçu.

string MediaSource { get; set; }

Obtient et définit l’URL à laquelle se trouve le fichier source multimédia.

string EmbedText { get; }

Obtient le texte qui est incorporé à la vidéo lorsque le fichier multimédia est chargé.

void Play();

Lit le fichier multimédia.

void Pause();

Suspend la lecture du fichier multimédia.

void Stop();

Arrête la lecture du fichier multimédia.

string Duration { get; }

Obtient la durée du fichier multimédia en secondes.

long DurationMilliseconds { get; }

Obtient la durée du fichier multimédia en millisecondes.

string Position { get; set; }

Obtient et définit en secondes la position dans la durée du fichier multimédia.

long PositionMilliseconds { get; set; }

Obtient et définit en millisecondes la position dans la durée du fichier multimédia.

Pour configurer l’objet lecteur multimédia enrichi

  1. Sélectionnez un mode de lecture dans la zone de liste Set Play Mode.

  2. Ouvrez Microsoft SharePoint Designer 2010. Dans le menu Fichier, cliquez sur Nouveau pour créer une page.

  3. Copie le code suivant dans la nouvelle 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. Enregistrez le fichier dans un fichier .aspx.

  5. Ouvrez le fichier dans SharePoint Designer 2010.

  6. Dans le champ Set Media File, tapez l’URL du fichier vidéo que le lecteur multimédia doit lire.

    Notes

    Le lecteur multimédia peut lire les fichiers audio et les fichiers vidéo. Dans le cadre de l’exemple, cette procédure utilise un fichier vidéo.

  7. Dans le champ Set Preview Image Source, tapez l’URL du fichier image que le lecteur multimédia doit afficher lors de la prévisualisation de la vidéo.

  8. Dans le champ Set Media Title, tapez un nom convivial pour le fichier vidéo.

  9. Dans le champ Set Template Source, tapez l’URL d’une bibliothèque de modèles qui contient un fichier XAML à appliquer au lecteur multimédia.

  10. Si vous souhaitez exécuter le fichier automatiquement, activez la case à cocher Set Auto Play.

  11. Sélectionnez un mode de lecture dans la zone de liste Set Play Mode :

    • Si vous sélectionnez Overlay, le système agrandit le lecteur multimédia et l’affiche par-dessus toute autre fenêtre ouverte.

    • Si vous sélectionnez Inline, le système charge le lecteur multimédia en ligne sur la page .aspx actuelle.

    • Si vous sélectionnez Full Screen, le système charge le lecteur multimédia en mode plein écran.

Voir aussi

Référence

MediaField

MediaFieldValue

MediaDisplayMode

MediaFieldControl

MediaWebPart

Concepts

Gestion des biens numériques

Modèle de programmation de gestion des biens numériques

Autres ressources

mediaPlayer Class