Exemplarische Vorgehensweise: Erstellen einer Videowebsite

Artikel
09/18/2014

Letzte Änderung: Montag, 19. April 2010

Gilt für: SharePoint Server 2010

Inhalt dieses Artikels
Inhaltsstruktur
Benutzerdefiniertes Videoanzeigeformular
Ausgeblendetes Datenformular-Webpart
Spaltenverfügbarkeit und das ausgeblendete Datenformular-Webpart

Zum Erstellen einer Website für die Freigabe von Medien und der Möglichkeit zum Hochladen von Videos, zum Extrahieren von Miniaturbildern, mit einer für das Anzeigen von Videos und die Verwaltung von Videoinhalten optimierten Homepage sowie Aggregationstools wie z. B. Kanäle für umfangreiche Videobibliotheken, müssen Sie zunächst eine Basiswebsite für Videos erstellen. Das Erstellen einer Basiswebsite für Videos besteht aus fünf grundlegenden Schritten:

Einrichten einer Inhaltsstruktur, die den Videoinhaltstyp unterstützt.
Erstellen eines benutzerdefinierten Formulars zum Anzeigen von Videos.
Erstellen eines ausgeblendeten DataFormWebPart-Objekts und Abrufen von Medienparametern mit diesem Webpart.
Erstellen des Media Players.
Zugreifen auf das MediaWebPart-Objekt mit dem ECMAScript (JavaScript, JScript)-Objektmodell.

Darüber hinaus können Sie der Basiswebsite Features hinzufügen, mit denen allgemeine Aufgaben im Zusammenhang mit Videoinhalten unterstützt werden, einschließlich Bewertung von Videos, Kommentierung, Durchsuchen zugehöriger Videos, Anzeigen der Medieneigenschaften für das aktuelle Video usw.

Voraussetzungen

Für diese exemplarische Vorgehensweise benötigen Sie Microsoft Visual Studio 2010 und Kenntnisse der folgenden SharePoint-Technologien:

Microsoft SharePoint Designer 2010
Grundlagen von HTML
Grundlagen der JavaScript-Programmierung
Entwicklung mit Microsoft Silverlight
Grundlagen von XML und XSL

Inhaltsstruktur

Als Vorbereitung zum Erstellen der Videowebsite richten Sie zunächst mithilfe der Browsernutzeroberfläche von SharePoint Designer 2010 oder Microsoft SharePoint Server 2010 eine Inhaltsstruktur ein. Die Inhaltsstruktur definiert, welche Features auf der Websiteebene und der Websitesammlungsebene verfügbar sind, die zu aktivierenden Inhaltstypen sowie die Spalten, die Sie zur Unterstützung von Videoinhalten hinzufügen müssen.

Stellen Sie die Websitesammlung mithilfe der Veröffentlichungsportal-Websitevorlage bereit.

Wichtig
Verwenden Sie beim Aktualisieren von Inhaltstypen den Katalog Websiteinhaltstypen, um Änderungen vorzunehmen. Diesvereinfacht später das Hinzufügen von Bibliotheken mit einheitlichen Inhaltstypen. Vermeiden Sie es, Inhaltstypen in einzelnen Inhaltsbibliotheken zu aktualisieren.

Richten Sie zweiObjekttypbibliotheken ein, nämlich die Bibliothek Videos und die Bibliothek Miniaturansichten. Schließen Sie den Inhaltstyp Video in die Bibliothek Videos ein, und entfernen Sie alle anderen Inhaltstypen. Schließen Sie den Inhaltstyp Bild in die Bibliothek Miniaturansichten ein, und entfernen Sie alle anderen Inhaltstypen. In dieser Reihe exemplarischer Vorgehensweisen werden in der Bibliothek Videos Videodateien gespeichert, und in der Bibliothek Miniaturansichten werden in die Website hochgeladene Miniaturbilder gespeichert.

Wichtig
Fügen Sie der Bibliothek Videos ein Video hinzu, um ein <img>-Tag zu erstellen, auf das Sie klicken können, wenn Sie später das Datenformular-Webpart hinzufügen und Spalten und Filter konfigurieren.

Die Basiswebsite für Videos ermöglicht standardmäßige Videofunktionen und unterstützt außerdem das Festlegen zugehöriger Medieneigenschaften, die vom Inhaltstyp Video unterstützt werden. Dem Inhaltstyp Video können Sie Bewertungen, Unternehmensstichwörter, Textmarken, Unterstützung für Kanalseiten sowie weitere Eigenschaften hinzufügen. Fügen Sie imWebsitespaltenkatalog die in Tabelle 1 aufgelisteten Spalten dem Inhaltstyp Video hinzu.

Tabelle 1. Dem Websitespaltenkatalog hinzuzufügende Websitespalten

Spaltenname	Spaltentyp und relevante Einstellungen
Textmarken	Mehrere Textzeilen. Typ==("Nur-Text"; Unbegrenzte Länge in Dokumentbibliotheken zulassen=="Ja")
Kanal	Nachschlagen (Informationen abrufen von: Bibliothek "Seiten", Spalte "Titel", "Mehrere Werte zulassen"==Nein)

Tabelle 2. Spalten für den Inhaltstyp "Video"

Spaltenname	Verwendung
Bewertung (0 – 5)	Für Benutzer zum Bewerten von Inhalt im Anzeigeformular
Unternehmensstichwörter	Für verwandte Videos im Anzeigeformular

Spaltenname	Spaltentyp und relevante Einstellungen	Verwendung
Textmarken. Dieses Feld enthält die zum Anzeigen von Textmarken in längeren Videos erforderlichen Daten.
Kanal	Nachschlagen (Quelle: Bibliothek "Seiten", Spalte "Titel", "Mehrere Werte zulassen"==Nein)	Kanalseiten. Mit diesem Feld wird angegeben, in welchem Kanal ein Video angezeigt werden soll.

Benutzerdefiniertes Videoanzeigeformular

Der erste Teil der Videofreigabewebsite ist eine benutzerdefinierte Seite, die zum Anzeigen von Videos verwendet wird. Die meisten Elemente auf dieser Seite, wie z. B. Bewertungen und Textmarken, sind Eigenschaften, die Sie beim Erstellen von Spalten für den Inhaltstyp Video definiert haben. Den Media Player werden Sie in einem nachfolgenden Schritt hinzufügen. Die Seite enthält die folgenden Elemente:

Media Player
Bewertungen
Textmarken
Verwandte Videos
Medieneigenschaften
Media Player-Text
Kommentare

Erstellen eines neuen Anzeigeformulars in SharePoint Designer

Starten Sie SharePoint Designer 2010, und öffnen Sie Ihre SharePoint-Website.
Klicken Sie im linken Navigationsbereich auf Listen und Bibliotheken, und wählen Sie die Bibliothek Videos aus.
Klicken Sie im Abschnitt Formulare auf Neu.
Geben Sie im Dialogfeld Neues Listenformular erstellen für Zu erstellender Formulartyp den gewünschten Formulartyp an, und aktivieren Sie ggf. Als Standardformular für den ausgewählten Typ festlegen:
- Zu erstellender Formulartyp: Formular zum Anzeigen eines Eintrags
- Als Standardformular für den ausgewählten Typ festlegen=Ja
- Inhaltstyp: Video
Klicken Sie im Abschnitt Formulare mit der rechten Maustaste auf das neu erstellte Formular, und wählen Sie dann Datei im erweiterten Modus bearbeiten aus.

Ein neues Formular zum Anzeigen eines Eintrags ist nun vorhanden und kann angepasst werden. Dies ist das Standardformular, das angezeigt wird, wenn ein Benutzer für ein Video auf die Option Eigenschaften der Ansicht klickt.

Ausgeblendetes Datenformular-Webpart

Erstellen Sie ein ausgeblendetes DataFormWebPart, und rufen Sie mit diesem Webpart Medienparameter ab. Ein Großteil der Funktionalität von Formular zum Anzeigen eines Eintrags, wie z. B. der Media Player und Textmarken, wird von JavaScript bereitgestellt. Das JavaScript-Objektmodell verwendet Eingabeparameterwerte, die in den Spalten des angezeigten Videos gespeichert sind. Zum Anpassen von Formular zum Anzeigen eines Eintrags fügen Sie zunächst der Seite ein DataFormWebPart hinzu. Nachdem das Datenformular-Webpart ausgeblendet wurde, enthält es alle Daten, die für erforderliche JavaScript-Funktionen benötigt werden.

Tabelle 3. Parameter für "DataFormWebPart"

Spalte	Verwendung	XSL-Name im Datenformular-Webpart	Vorgeschlagener Anchorname
Titel	MediaPlayer	@Title	TitleFieldValue
URL-Pfad	MediaPlayer	@FileRef	UrlFieldValue
Vorschaubild-URL	MediaPlayer	@AlternateThumbnailUrl	PreviewsImageUrlFieldValue
Textmarken	Bookmarks	@Bookmarks	BookmarksFieldValue
Unternehmensstichwörter	RelatedVideos	@TaxKeyword	KeywordsFieldValue

So fügen Sie das Datenformular-Webpart hinzu und konfigurieren Spalten und Filter

Wählen Sie Formular zum Anzeigen eines Eintrags im Einfügemenüband aus, und wählen Sie dann im Dropdownmenü die Bibliothek Videos aus.
Klicken Sie im kontextbezogenen Menüband Tools für die Datenanzeige – Optionen auf Spalten hinzufügen/entfernen, und fügen Sie der Gruppe Angezeigte Spalten die in Tabelle 3 aufgelisteten Felder hinzu.
Klicken Sie mit der rechten Maustaste auf das <img>-Tag, das aktuell für die Vorschaubild-URL-Spalte angezeigt wird, und ändern Sie mit dem Befehl Element formatieren als die Formatierung in Text.
Klicken Sie mit der rechten Maustaste auf den Hyperlink, der für die URL-Pfad-Spalte angezeigt wird, und ändern Sie mit dem Befehl Element formatieren als die Formatierung in Text.
Klicken Sie im kontextbezogenen Menüband Optionen auf die Schaltfläche Parameter, und fügen Sie im Abschnitt Datenansichtsparameter im Feld Neuer Parameter den Eintrag ID mit den folgenden Parametern hinzu:
1. Parameterquelle: Abfragezeichenfolge
2. Variable für Abfragezeichenfolge: ID
3. Standardwert: 1
Klicken Sie im kontextbezogenen Menüband Optionen auf Filter, und fügen Sie folgendes Filterkriterium hinzu: <Field Name:ID>Equals[ID]

Mit den letzten beiden Schritten wird sichergestellt, dass mit dem DataFormWebPart immer Metadatenwerte für das Element angezeigt werden, das vom Benutzer aktuell angezeigt wird.

Spaltenverfügbarkeit und das ausgeblendete Datenformular-Webpart

Die Werte im DataFormWebPart-Objekt können standardmäßig nicht für JavaScript angegeben werden. Sie müssen jeden für DataFormWebPart angezeigten Wert einrichten, damit er von JavaScript verwendet werden kann. Das Festlegen dieser Werte folgt einem allgemeinen Muster. Zum Ausführen dieses Schritts müssen Sie in der Lage sein, das HTML für jede Seite anzuzeigen. Wechseln Sie deshalb, bevor Sie damit beginnen, zurgeteilten Ansicht in SharePoint Designer 2010.

Nachdem Sie dafür gesorgt haben, dass DataFormWebPart-Werte von JavaScript verwendet werden können, blenden Sie das Webpart aus, sodass es nicht auf der Seite Formular zum Anzeigen eines Eintrags vorhanden ist, wenn die Seite angezeigt wird. Nachdem nun Anchortags mit bekannten Namen für jeden Parameter vorhanden sind, können Sie auf die Werte mit einer einzigen JavaScript-Codezeile zugreifen.

So machen Sie Spalten für die Verwendung in ECMAScript verfügbar

Starten Sie SharePoint Designer 2010, und wechseln Sie zurgeteilten Ansicht, um das HTML für jede Seite anzuzeigen.
Zeigen Sie das Datenformular-Webpart an.
Suchen Sie in der Codeansicht nach der <xsl:value-of>-Anweisung, mit der der richtige Wert generiert wird.

Tipp

Beispielsweise lautet für das Feld Titel der Code <xsl:value-of select=”@Title”/>.
Schließen Sie die <xsl:value-of>-Anweisung in ein <a>-Element ein, und geben Sie ein name-Attribut für das <a>-Element an (der folgende Code enthält einen Beispielwert): <a name="TitleFieldValue"> <xsl:value-of select="@Title" /></a>.

Tipp
Beispielsweise lautet für das Feld Titel der Code <xsl:value-of select=”@Title”/>.

So blenden Sie das Datenformular-Webpart aus

Suchen Sie im HTML das <WebPartPages:DataFormWebPart>-Element für die Seite Formular zum Anzeigen eines Eintrags.
Schließen Sie es in ein <div>-Element mit dem style="display:none;" -Attribut ein.
Greifen Sie mit der folgenden JavaScript-Codezeile auf DataFormWebPart-Objektwerte zu: (document.getElementsByName(‘Title’))[0].innerText;

Hinweis

Verwenden Sie den in Tabelle 3 aufgelistetenvorgeschlagenen Anchornamen anstelle von Title im Codeausschnitt.

Hinweis
Verwenden Sie den in Tabelle 3 aufgelistetenvorgeschlagenen Anchornamen anstelle von Title im Codeausschnitt.

Damit haben Sie in diesem Thema SharePoint Server 2010 als Veröffentlichungssite mit aktivierten Bewertungen konfiguriert, Sie haben zwei Objekttypbibliotheken erstellt (zum Speichern von Videodateien und Miniaturbilddateien), Sie haben den Inhaltstyp Video angegeben und zugehörige Medieneigenschaften definiert, Sie haben ein Formular zum Anzeigen eines Eintrags erstellt, um die Medienparameter und den Media Player anzuzeigen, Sie haben ein DataFormWebPart-Objekt hinzugefügt, das Eingabeparameterwerte verwendet, die in den Spalten des angezeigten Videos gespeichert sind, Sie haben die Werte des DataFormWebPart-Objekts für das JavaScript-Objektmodell verfügbar gemacht, und schließlich haben Sie das DataFormWebPart-Objekt ausgeblendet, damit es nicht für Benutzer sichtbar ist, die das Formular zum Anzeigen eines Eintrags anzeigen, welches als Basisanzeige für Ihre Videowebsite dient.

In der nächsten exemplarischen Vorgehensweise erfahren Sie, wie Sie das MediaWebPart-Objekt dem Formular zum Anzeigen eines Eintrags hinzufügen, mit dem Videos angezeigt werden, wie Sie Medieneigenschaften im Formular anzeigen, und wie Sie andere Medienparameter des Inhaltstyps Video, wie z. B. Bewertungen, verwandte Videos und Kommentare, mit Daten auffüllen.