Exemplarische Vorgehensweise: Hinzufügen des Medienwebparts und der Videowebsitefeatures

Artikel
09/18/2014

Letzte Änderung: Montag, 19. April 2010

Gilt für: SharePoint Server 2010

Inhalt dieses Artikels
Media Player
Einbetten von Text
Textmarken
Medieneigenschaften und Bewertungssteuerelement
Kommentare und das Pinnwand-Webpart
Verwandte Videos

Dieses Thema ist Teil zwei einer fünfteiligen Reihe exemplarischer Vorgehensweisen, in denen Sie erfahren, wie Sie eine Videofreigabewebsite erstellen und anpassen.

Voraussetzungen

Arbeiten Sie das Thema Exemplarische Vorgehensweise: Erstellen einer Videowebsite durch.

Media Player

Erstellen Sie auf der Seite einen Verweis, wo der Media Player angezeigt werden soll, fügen Sie der Seite einen Verweis auf das Media Player-Objektmodell hinzu, um den Media Player im angegebenen <div>-Tag zu erstellen, und fügen Sie dann der Seite, auf der der Media Player angezeigt werden soll, ECMAScript (JavaScript, JScript)-Inlinecode hinzu.

So fügen Sie der Seite "Formular zum Anzeigen eines Eintrags" einen Media Player hinzu

Starten Sie Microsoft SharePoint Designer 2010, und öffnen Sie das Formular zum Anzeigen eines Eintrags, das Sie in Exemplarische Vorgehensweise: Erstellen einer Videowebsite erstellt haben, in dergeteilten Ansicht.
Erstellen Sie einen <div>-Verweis auf der Seite, auf der das MediaWebPart-Objekt angezeigt werden soll.

Tipp

Um z. B. ein <div>-Tag mit dem Wert MediaPlayerHost für ID zu erstellen, fügen Sie der Seite <div id="MediaPlayerHost"></div> hinzu.
Fügen Sie auf der Seite einen Verweis auf das mediaplayer.jsJavaScript-Objektmodell hinzu, um die Funktionen zum Arbeiten mit dem Media Player zu importieren. Beispiel: <script type="text/javascript" src="/_layouts/mediaplayer.js"/>.

Tipp
Um z. B. ein <div>-Tag mit dem Wert MediaPlayerHost für ID zu erstellen, fügen Sie der Seite <div id="MediaPlayerHost"></div> hinzu.

Fügen Sie der Seite, auf der das MediaWebPart-Objekt angezeigt werden soll, JavaScript-Inlinecode hinzu.

//Get relevant parameters from the Data Form Web Part. 
var mediaTitleValue = (document.getElementsByName('TitleFieldValue'))[0].innerText;
var mediaUrlValue = (document.getElementsByName('UrlFieldValue'))[0].innerText;
var previewImageUrlValue = (document.getElementsByName('PreviewImageUrlFieldValue'))[0].innerText; 

//Create the media player.
mediaPlayer.createMediaPlayer(
document.getElementById('MediaPlayerHost'), //The <div> tag into which to insert the Silverlight object.
'MediaPlayerHost', // The ID attribute to assign to the "Object" element that will be inserted on the page and used to access the media player later.
'600px', // The width of the media player.
'450px', // The height of the media player.
    { // Parameters passed to the media player.
             displayMode:'Inline', //Display mode for the media player. For this scenario, we want "inline".
             mediaTitle:mediaTitleValue, //Title to set for the media player. Note reference to the mediaTitleValue variable created above.
             mediaSource:mediaUrlValue, //URL of the video. Note reference to the mediaUrlValue variable created above.
             previewImageSource:previewImageUrlValue, //URL for the preview image. Note reference to the previewImageUrlValue variable created above.
             autoPlay:true, //Whether the media player should start playing as soon as it is created.
             loop:false,  //Whether the video should "loop" when it reaches the end.
             mediaFileExtensions:'wmv;wma;avi;mpg;mp3;', //File extensions that the media player supports. Set these as they are shown here. 
             silverlightMediaExtensions:'wmv;wma;mp3;' //Set these as shown here. 
    },
    '', //Set to ''.
    false,  //Set to "false".
    '' //The function to call when the player is finished loading. '' means "do not call any function". 
    );

Einbetten von Text

Auf das erstellte Media Player-Objekt können Sie mit dem JavaScript-Objektmodell zugreifen. Rufen Sie dazu den Wert der EmbedText-Eigenschaft ab, mit dem Sie das Media Player-Objekt auf einer Zielseite oder einem Zieldokument einfügen möchten. Es gibt mehrere Möglichkeiten, um den Media Player auf der Seite anzuzeigen; ein Input-Textfeld ist eine Möglichkeit.

Aufrufer der createMediaPlayer-Methode können einen Funktionszeiger an die Methode übergeben, der aufgerufen wird, nachdem der Media Player fertig gestellt ist. Dies ist hilfreich, wenn auf der Seite ausgeführter Code den Media Player verwenden soll. Mit dieser Vorgehensweise können Sie sich darauf verlassen, dass der Media Player vollständig geladen wird, bevor der Code aufgerufen wird.

Rufen Sie mithilfe einer Funktion, die auf dem MediaPlayerHost ID-Parameter basiert, den Sie beim Erstellen des Media Players angegeben haben, den Media Player als JavaScript-Objekt ab.
```
Function getMediaPlayer()
   {
   var p=document.getElementById("MediaPlayerHost")
   var obj=p.getElementsByTagName("object");
   return obj[0].Content.MediaPlayer;
   }
```
Legen Sie die EmbedText-Eigenschaft auf der Seite fest, und rufen Sie sie automatisch ab, wenn das Media Player-Objekt erstellt wird.
```
function getEmbedText(example)
{
     var player = getMediaPlayer();
     return player.EmbedText;
}
```
Rufen Sie createMediaPlayer auf, um den Namen einer Funktion einzuschließen, die beim Laden des Media Players aufgerufen werden soll. Richten Sie für diese Funktion die Verwendung der getEmbedText-Funktion zum Anzeigen von eingebettetem Text auf der Seite ein.

Textmarken

Für Videos mit längeren Laufzeiten, vielen separaten Abschnitten, hoher Komplexität oder Metadaten ist die Verwendung von Textmarken hilfreich. Wenn Sie auf eine Textmarke klicken, springt der Media Player auf der Seite zu einem definierten Zeitpunkt im Video, ähnlich wie dies beim Springen zwischen Kapiteln einer DVD der Fall ist. Mit dem Bookmarks-Feld (bereits in der Implementierung des DataFormWebPart-Objekts unter Exemplarische Vorgehensweise: Erstellen einer Videowebsite vorhanden) können Sie der Seite Textmarken hinzufügen. Verwenden Sie für diese exemplarische Vorgehensweise ein Bookmarks-Feld mit Datenwerten im folgenden Format.

Hinweis
Beachten Sie die geschweiften Klammern.

Hinweis
Der folgende Code ist kein JavaScript, sondern Text in einem Mehrfachtextfeld.

{Bookmark1Time},{Bookmark1Title};
{Bookmark2Time},{Bookmark2Title};

Beispielsweise können Sie Textmarken bei 10 Sekunden bzw. 20 Sekunden festlegen.

0:10,This bookmark will seek to ten seconds in the video;
0:20, This bookmark will seek to 20 seconds in the video.

Nachdem Sie die Funktion definiert haben, die beim Klicken auf einen Textmarkenlink aufgerufen werden soll, fügen Sie JavaScript-Code hinzu, der auf der Seite ausgeführt wird und den Wert des Bookmarks-Felds extrahiert, um damit Links zu rendern, mit denen die JavaScript-Funktion aufgerufen wird.

So fügen Sie der Seite "Formular zum Anzeigen eines Eintrags" Textmarken hinzu

Öffnen Sie die Seite in SharePoint Designer 2010.
Fügen Sie der Seite an der Stelle, an der die Textmarke angezeigt werden soll, ein <ul>-Tag hinzu, für das das id-Attribut auf bookmarkList festgelegt ist: <ul id="bookmarkList">.

Fügen Sie der Seite eine JavaScript-Funktion hinzu, mit der der Media Player nach bestimmten Positionen durchsucht wird.

Tipp
Verwenden Sie diese Funktion später für einzelne Textmarkenlinks.

function seekPlayer(posInSeconds)
{
var p = getMediaPlayer(); 
// The PositionMilliseconds parameter is a media player ECMAScript function found in mediaplayer.js.
   p.PositionMilliseconds = posInSeconds * 1000;
}

Fügen Sie der Seite JavaScript-Code hinzu, mit dem linkText für Textmarken gerendert wird.

//Get the bookmarks from the BookmarksFieldValue anchor tag. 
var bookmarks = (document.getElementsByName('BookmarksFieldValue'))[0].innerText;

//Strip out any <br> tags.
bookmarks = bookmarks.replace(/<br>/gi,"");

//While loop: Loops through bookmarks and processes as long as there are more bookmarks. 
//Temporary variables for the next position and title.
var nextPositionSeconds;
var nextTitle;
var bookmarksList = document.getElementById('bookmarksList');

//As long as there are more semi-colons, there are more bookmarks to process.
while(bookmarks.indexOf(";") != -1)
{

//Start building the position. Grab the substrings for the first minutes and seconds, and convert to seconds.
nextPositionSeconds = ( parseInt(bookmarks.substr(0,bookmarks.indexOf(':'))) * 60) + parseInt(bookmarks.substr(bookmarks.indexOf(':') + 1,bookmarks.indexOf(',')));

//Now trim the bookmarks string to remove the position.
bookmarks = bookmarks.substr(bookmarks.indexOf(',') + 1);

//Get the next title.
var nextTitle = bookmarks.substr(0,bookmarks.indexOf(';')); 

//Trim the bookmarks string to remove the title to prepare the code to loop again.
bookmarks = bookmarks.substr(bookmarks.indexOf(';') + 1);

//Add a link to the bookmarks list that seeks the player to the correct place.
bookmarksList.innerHTML = bookmarksList.innerHTML + '<li><a href=\"\" onclick=\"javascript:seekPlayer('+nextPositionSeconds+'); return false\">'+nextTitle+'</a></li>';
}

Medieneigenschaften und Bewertungssteuerelement

Zum Hinzufügen des Abschnitts für die Medieneigenschaften zur Seite fügen Sie mithilfe der im Thema Exemplarische Vorgehensweise: Erstellen einer Videowebsite beschriebenen Vorgehensweise ein weiteres DataFormWebPart-Objekt hinzu. Blenden Sie es aber nicht aus. Platzieren Sie das Webpart an der gewünschten Stelle auf der Seite, und zeigen Sie die Felder an, die für Benutzer sichtbar sein sollen.

Sie können das DataFormWebPart-Objekt, das Sie ursprünglich der Seite hinzugefügt haben, ausblenden. Im Thema Exemplarische Vorgehensweise: Erstellen einer Videowebsite haben Sie das DataFormWebPart-Steuerelement nicht gelöscht, sondern ausgeblendet, sodass Sie es extrahieren und an eine geeignetere Stelle auf der Seite verschieben können (z. B. direkt unter dem Video).

So fügen Sie das Bewertungssteuerelement hinzu

Fügen Sie ein <div>-Element an der Stelle auf der Seite hinzu, an der das Bewertungssteuerelement angezeigt werden soll. Verwenden Sie eine aussagekräftige ID, wie z. B. ratingsDiv.

Fügen Sie JavaScript-Code hinzu, um das Steuerelement zu extrahieren und zwischen den öffnenden und schließenden <div>-Tags zu platzieren.

var ratingsControl = document.getElementById(‘SPFieldAverageRating’).innerHTML;
var ratingsDiv = document.getElementById(‘ratingsDiv’);
ratingsDiv.innerHTML+=ratingsControl;
ratingsDiv.innerHTML+=ratingsControl;

Kommentare und das Pinnwand-Webpart

Der Seite können Sie das Pinnwand-Webpart hinzufügen, damit Benutzer einen Kommentar zu einem Video eingeben können. Klicken Sie im Menü Einfügen auf Webpart. Das Pinnwand-Webpart sollte in der Liste mit den Webparts angezeigt werden. Falls das Pinnwand-Webpart nicht in der Liste vorhanden ist, importieren Sie es in Ihren Webpartkatalog.

So importieren Sie das Pinnwand-Webpart

Starten Sie Windows Explorer, und navigieren Sie zu einer Teamwebsite oder einer anderen Website, auf der das Pinnwand-Webpart verfügbar ist.
Navigieren Sie zu Websiteeinstellungen.
Klicken Sie im Bereich Galerien auf Webparts.
Klicken Sie in Windows Explorer im Menü Bibliothek auf Öffnen, und kopieren Sie dann das socialComment.dwp-Webpart auf Ihren Computer.
Wiederholen Sie die Schritte 2 und 3.
Laden Sie das socialComment.dwp-Webpart in den Webpartkatalog hoch.

So fügen Sie das Pinnwand-Webpart hinzu

Klicken Sie im Menü Einfügen auf Webpart, und fügen Sie das Pinnwand-Webpart auf der Seite an der Stelle hinzu, an der Sie möchten, dass der Benutzer einen Kommentar eingeben kann.

Hinweis
Für die Verwendung des Pinnwand-Webparts aktivieren Sie die Benutzerprofildienst-Anwendung, und machen Sie sie auf dem Server verfügbar. Alle Benutzer der Website benötigen die Profilberechtigung Features für das soziale Netzwerk verwenden.