Gewusst wie: Konfigurieren des MediaWebPart-Objekts mithilfe von ECMAScript

Artikel
09/18/2014

Letzte Änderung: Montag, 19. April 2010

Gilt für: SharePoint Server 2010

Die Verwaltung digitaler Objekte (Digital Asset Management, DAM) umfasst ein leistungsfähiges Medienwiedergabeobjekt, das mithilfe des ECMAScript (JavaScript, JScript)-Clientobjektmodells konfiguriert werden kann. Sie können die Standardmedienwiedergabe von Microsoft Silverlight 2.0 durch Erstellen von benutzerdefiniertem Code automatisieren, der mit dem ECMAScript (JavaScript, JScript)-Objektmodell zusammenarbeitet, das von Silverlight unterstützt wird.

Durch den folgenden Code wird eine skriptfähige Schnittstelle für die Medienwiedergabe erstellt, die automatisch viele Eigenschaften abruft und festlegt, welche von Benutzern über die Benutzeroberfläche geändert werden können, einschließlich der folgenden:

Titel der Mediendatei.
Anzeigemodus.
Aktivierung oder Deaktivierung der Einstellungen zur automatischen Wiedergabe und zur Ausführung von Schleifen.
Speicherort des Designs.
Vorschaubild
Auswahl der Audio- oder Videodatei.

Sie können eine entsprechende Datei in Microsoft SharePoint Designer 2010 oder Microsoft Visual Studio 2010 erstellen.

Dieses Thema enthält den Code für eine ASPX-Beispielseite mit Silverlight-Steuerelementen und Implementierungen des ECMAScript (JavaScript, JScript)-Objektmodells, die zum Testen der konfigurierbaren Optionen benötigt werden, die vom ECMAScript (JavaScript, JScript)-Objektmodell für die Medienwiedergabe bereitgestellt werden.

Beispiel für das Testen der leistungsfähigen Medienwiedergabe

Im folgenden Beispiel wird eine ASPX-Seite präsentiert, die zum Testen der Funktionen und Eigenschaften verwendet werden kann, die vom ECMAScript (JavaScript, JScript)-Objektmodell für die leistungsfähige Medienwiedergabe bereitgestellt werden. Stellen Sie sicher, dass Sie Zugriff auf einen Server haben, auf dem eine oder mehrere Videodateien sowie eine Vorschaubilddatei gehostet werden, um maximalen Nutzen aus dem Beispiel zu ziehen. Im Rahmen des Beispiels wird die von Ihnen angegebene Videodatei wiedergegeben und das bereitgestellte Vorschaubild geladen. Diese stehen Ihnen in der Datei mediaplayer.js zur Verfügung.

In Tabelle 1 werden die konfigurierbaren Eigenschaften des ECMAScript (JavaScript, JScript)-Objektmodells aufgelistet, die im Beispiel vorgeführt werden.

Tabelle 1. ECMAScript-Eigenschaften

Eigenschaft	Beschreibung
string MediaTitle {get;set}	Ruft den Titel der Zielmediendatei ab und legt diesen fest.
string DisplayMode { get; set; }	Ruft den Anzeigemodus ab und legt diesen fest: Inline, Overlay oder Full Screen.
bool AutoPlay { get; set; }	Ruft ab und legt fest, ob die Zielmediendatei automatisch angezeigt wird.
bool Loop { get; set; }	Ruft ab und legt fest, ob die Zielmediendatei wiederholt wiedergegeben wird.
string TemplateSource { get; set; }	Ruft die Quelle der XAML-Vorlage ab, die als Design auf die Medienwiedergabe angewendet werden kann, und legt sie fest.
string PreviewImageSource { get; set; }	Ruft die URL für die Quelldatei des Vorschaubilds ab und legt diese fest.
string MediaSource { get; set; }	Ruft die URL für die Medienquelldatei ab und legt diese fest.
string EmbedText { get; }	Ruft Text ab, der beim Laden der Mediendatei in das Video eingebettet wird.
void Play();	Gibt die Mediendatei wieder.
void Pause();	Hält die Mediendatei an.
void Stop();	Beendet die Mediendatei.
string Duration { get; }	Ruft die Dauer der Mediendatei in Sekunden ab.
long DurationMilliseconds { get; }	Ruft die Dauer der Mediendatei in Millisekunden ab.
string Position { get; set; }	Ruft die Position in Sekunden in der Dauer der Mediendatei ab und legt sie fest.
long PositionMilliseconds { get; set; }	Ruft die Position in Millisekunden in der Dauer der Mediendatei ab und legt sie fest.

So konfigurieren Sie das leistungsfähige Medienwiedergabeobjekt

Wählen Sie einen Wiedergabemodus aus dem Listenfeld Set Play Mode aus.
Öffnen Sie Microsoft SharePoint Designer 2010. Klicken Sie im Menü Datei auf Neu, um eine Seite zu erstellen.

Kopieren Sie den folgenden Code in die neue Seite.

<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>

Speichern Sie die Datei als ASPX-Datei.
Öffnen Sie die Datei in SharePoint Designer 2010.
Geben Sie in das Feld Set Media File die URL zu der Videodatei ein, die von der Medienwiedergabe wiedergegeben werden soll.

Hinweis

Bei der Medienwiedergabe können Audio- und Videodateien wiedergegeben werden. Im Rahmen dieses Beispiels wird eine Videodatei verwendet.
Geben Sie in das Feld Set Preview Image Source die URL zu der Bilddatei ein, die von der Medienwiedergabe bei der Vorschau des Videos angezeigt werden soll.
Geben Sie in das Feld Set Media Title einen Anzeigenamen für die Videodatei ein.
Geben Sie in das Feld Set Template Source die URL zum Speicherort einer Vorlagenbibliothek ein, die eine XAML-Datei enthält, die auf die Medienwiedergabe angewendet werden soll.
Wenn die Datei automatisch wiedergegeben werden soll, aktivieren Sie das Kontrollkästchen Set Auto Play.
Wählen Sie einen Wiedergabemodus aus dem Listenfeld Set Play Mode aus:
- Wenn Sie Overlay auswählen, wird die Medienwiedergabe vom System maximiert und vor allen anderen geöffneten Fenstern angezeigt.
- Wenn Sie Inline auswählen, wird die Medienwiedergabe vom System eingebettet in der aktuellen ASPX-Seite angezeigt.
- Wenn Sie Full Screen auswählen, wird die Medienwiedergabe vom System im Vollbildmodus geladen.

Hinweis
Bei der Medienwiedergabe können Audio- und Videodateien wiedergegeben werden. Im Rahmen dieses Beispiels wird eine Videodatei verwendet.

Siehe auch

Freigeben über

Gewusst wie: Konfigurieren des MediaWebPart-Objekts mithilfe von ECMAScript

Beispiel für das Testen der leistungsfähigen Medienwiedergabe

So konfigurieren Sie das leistungsfähige Medienwiedergabeobjekt

Siehe auch

Referenz

Konzepte

Weitere Ressourcen

Zusätzliche Ressourcen