Exemplarische Vorgehensweise: Anpassen der Vorgehensweise zum Hochladen von Videos

Artikel
09/18/2014

Letzte Änderung: Montag, 27. September 2010

Gilt für: SharePoint Server 2010

Inhalt dieses Artikels
Uploadseite und Medienwebpart
Ausgeblendetes Silverlight-Steuerelement
Testseite "MediaTest.aspx"
<object>-Tag und "extractionControl"
Schaltfläche "Miniaturansicht festlegen"
Die Felder "Vorschaubild-URL", "Framebreite" und "Framehöhe"

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

Nachdem Sie ein Anzeigeformular erstellt haben, mit dem Benutzer Videos anzeigen können, können Sie nun das Verfahren zum Hochladen von Videos anpassen. In dieser exemplarischen Vorgehensweise wird das Implementieren von Steuerelementen veranschaulicht, mit denen automatisch ein Miniaturbild für Videos extrahiert wird. Diese Uploadimplementierung ist effizienter als die Standardimplementierung von Microsoft SharePoint Server 2010, bei der Benutzer die URL zum Miniaturbild eines Videos manuell eingeben müssen.

In dieser exemplarischen Vorgehensweise werden die folgenden drei Aufgaben behandelt:

Erstellen einer Seite Formular zum Ändern eines Eintrags und Hinzufügen eines MediaWebPart-Objekts. Das anpassbare Formular ist die Uploadseite und ist dasselbe Formular, das angezeigt wird, wenn die Benutzer in einem Video auf Eigenschaften der Ansicht klicken.
Hinzufügen eines ausgeblendeten Microsoft Silverlight-Steuerelements zur Seite. Durch das Hinzufügen einer ausgeblendeten Microsoft Silverlight-Anwendung wird das Miniaturbild des MediaWebPart-Objekts in ein entsprechendes Bildformat konvertiert.
Hinzufügen einer Schaltfläche Miniaturansicht festlegen mithilfe von ECMAScript (JavaScript, JScript). Wenn ein Benutzer auf Miniaturansicht festlegen klickt, erfasst das JavaScript-Objektmodell für das MediaWebPart-Objekt den entsprechenden Frame, ruft die Anwendung Silverlight auf der Seite zum Speichern des Miniaturbilds in derMiniaturansichtenbibliothek auf, legt die Miniaturbild-URL automatisch für das Video fest und blendet das Feld Vorschaubild-URL im Formular aus.

Voraussetzungen

Vorsicht
Für diese exemplarische Vorgehensweise sind Kenntnisse von Silverlight erforderlich. Das Microsoft SharePoint 2010 Software Development Kit (SDK) enthält ein Codebeispiel für eine Silverlight-Lösung, mit der die hier beschriebenen Funktionen ausgeführt werden. Inline vorhandener Beispielcode dient nur zu Demonstrationszwecken und sollte nicht direkt in Produktionscode verwendet werden.

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

Uploadseite und Medienwebpart

Verwenden Sie wie in Exemplarische Vorgehensweise: Erstellen einer Videowebsite beschrieben Microsoft SharePoint Designer 2010 zum Erstellen einer Seite Formular zum Ändern eines Eintrags in der Bibliothek Videos und zum Hinzufügen des MediaWebPart-Objekts.

So erstellen Sie mithilfe von SharePoint Designer ein Bearbeitungsformular

Starten Sie Microsoft SharePoint Designer 2010, und navigieren Sie zur SharePoint-Website.
Klicken Sie im linkenNavigationsbereich auf Listen und Bibliotheken, und wählen Sie die Bibliothek Videos aus.
Klicken Sie auf Neu, um das Dialogfeld Neues Listenformular erstellen zu öffnen.

Geben Sie im Dialogfeld Neues Listenformular erstellen Einstellungen gemäß Tabelle 1 an.

Tabelle 1. Einstellungen im Dialogfeld "Neues Listenformular erstellen"

Einstellung	Wert
Zu erstellender Formulartyp	Formular zum Ändern eines Eintrags
Als Standardformular für den ausgewählten Typ festlegen	Ja
Für Formular zu verwendender 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 Anzeigeformular wird angezeigt, das Sie anpassen können. Dies ist das Standardformular, das Benutzer sehen, wenn sie für ein Video auf Eigenschaften der Ansicht klicken. Das Feld Titel und das Feld Vorschaubild-URL sind für neu hochgeladene Videos wahrscheinlich leer.

Wichtig
Im Thema Exemplarische Vorgehensweise: Erstellen einer Videowebsite finden Sie im Abschnitt Ausgeblendetes Datenformular-Webpart weitere Informationen zum Abrufen des URL-Pfads zum Video und zum Erstellen des MediaWebPart-Objekts für die Videouploadseite. Wiederholen Sie die Schritte aus der Vorgehensweise zum Hinzufügen eines Medienwebparts, um dem Bearbeitungsformular einen Media Player hinzuzufügen.

Im Thema Exemplarische Vorgehensweise: Erstellen einer Videowebsite finden Sie im Abschnitt Ausgeblendetes Datenformular-Webpart weitere Informationen zum Abrufen des URL-Pfads zum Video und zum Erstellen des MediaWebPart-Objekts für die Videouploadseite. Wiederholen Sie die Schritte aus der Vorgehensweise zum Hinzufügen eines Medienwebparts, um dem Bearbeitungsformular einen Media Player hinzuzufügen.

Ausgeblendetes Silverlight-Steuerelement

Mit dem benutzerdefinierten Silverlight-Steuerelement wird das Extrahieren und Hochladen von Miniaturbilddateien aus dem aktuellen Frame des MediaWebPart-Objekts verwaltet. Mit dem Code wird eine einzelne JavaScript-Methode zum Abrufen und Festlegen von Parametern verfügbar gemacht, die beim Konvertieren und Hochladen verwendet werden, und der Dateiname jedes hochgeladenen Miniaturbilds wird zurückgegeben. Mit diesem Code werden dem Dateinamen beliebige Füllzeichen hinzugefügt, um die Chancen für das erfolgreiche Extrahieren des Bilds zu verbessern.

/* convertAndUploadThumbnail: Parameters:
         *  - sImageAsEncodedBitmap: The bitmap generated by the media player.
         *  - nWidth: The width of the thumbnail image.
         *  - nHeight: The height of the thumbnail image.
         *  - sFileNameToUse: The name of the file to use (without the file extension) 
         *  - sWebUrl: The URL of the Web to which the thumnbnail image should be uploaded.
         *  - sServerRelativeListUrl: The server-relative URL of the list where the thumbnail should be uploaded.
         *  Returns: 
         *  The file name of the uploaded thumbnail, constructed by adding a random character to
         *  sFileNameToUse and appending the file extension.
         *  (This is not the full URL; this is only the name of the leaf.)
         */

Tipp
Das vollständige Codebeispiel zum Extrahieren eines Silverlight-Miniaturbilds finden Sie im Ordner C:\Program Files\Microsoft SDKs\SharePoint 2010\Microsoft SDKs\SharePoint 2010\Samples des heruntergeladenen SharePoint 2010 SDK.

Die zentrale Logik des benutzerdefinierten Steuerelements befindet sich in der Datei MainPage.xaml.cs. Mit diesem Code wird das Miniaturbild des MediaWebPart-Objekts in das JPG-Dateiformat konvertiert. Das clientseitige SharePoint-Objektmodell wird zum Hochladen der JPG-Datei in den angegebenen Speicherort verwendet.

Die vom Visual Studio 2010-Projekt generierte Schlüsseldatei ist die Datei ExtractThumbnail.xap, die die ausführbare Datei enthält. Laden Sie die XAP-Datei in die Formatbibliothek Ihrer Website hoch, um sie bereitzustellen.

So laden Sie die XAP-Datei in die Formatbibliothek hoch

Navigieren Sie zu Ihrer SharePoint-Website, und öffnen Sie eine beliebige Seite.
Klicken Sie auf Gesamter Websiteinhalt, und klicken Sie dann auf Formatbibliothek.
Klicken Sie auf der Registerkarte Dokumente auf Dokumentupload, um die XAP-Datei hochzuladen.
Veröffentlichen Sie die XAP-Datei, und genehmigen Sie sie als Hauptversion, damit alle Benutzer darauf zugreifen können.

Testseite "MediaTest.aspx"

Das Visual Studio 2010-Projekt enthält die Testseite MediaTest.aspx, mit der Sie die Anwendung separat auf einer Seite testen können. Nachdem Sie die vom Projekt generierte XAP-Datei hochgeladen haben (zu der auf der Seite MediaTest.aspx angegebenen URL), laden Sie die Seite in eine beliebige SharePoint-Dokumentbibliothek hoch, und navigieren Sie dann dorthin.

<object>-Tag und "extractionControl"

Wenn Sie die Silverlight-Anwendung auf der Uploadseite verfügbar machen möchten, fügen Sie mithilfe von SharePoint Designer 2010 ein <object>-Tag hinzu, mit dem die Anwendung geladen und in eine <div>-Anweisung mit einer bekannten ID eingeschlossen wird, wie z. B. extractionControl. Ersetzen Sie den URL-Wert für den source-Parameter durch die URL, die auf die zuvor von Ihnen hochgeladene XAP-Datei verweist.

<div id="extractionControl">
//The user sets the width and height. For debugging purposes, the control displays text stating whether
//the upload succeeded or failed. To suppress debugging messages, set the width and height to very small 
// values.
// <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="30px" id="ExtractControlSilverlight">
  <param name="source" value="http://<server>/Style%20Library/ExtractThumbnail.xap"/>
  <param name="onError" value="onSilverlightError" />
  <param name="background" value="white" />
  <param name="minRuntimeVersion" value="3.0.40624.0" />
  <param name="autoUpgrade" value="true" /> 
// Markup is emitted if the user does not have Silverlight installed. The HTML renders an image link 
// suggesting that they download Silverlight.
  <a href="https://go.microsoft.com/fwlink/?linkid=149156&clcid=0x407" style="text-decoration:none">
   <img src="https://go.microsoft.com/fwlink/?linkid=108181&clcid=0x407" alt="Get Microsoft Silverlight" style="border-style:none"/>
  </a>
    </object>
</div>

Der programmgesteuerte Zugriff auf das Silverlight-Extraktionssteuerelement ähnelt dem Zugriff auf das MediaWebPart-Objekt (siehe Exemplarische Vorgehensweise: Erstellen einer Videowebsite) – über die Uploadseite erhalten Sie darauf Zugriff. Fügen Sie auf der Seite eine JavaScript-Funktion ein, um das Silverlight-Extraktionssteuerelement als JavaScript-Objekt abzurufen.

function getExtractorControl() 
{
var control = document.getElementById("extractionControl").childNodes[0];
return control.Content.MainPage;
}

Schaltfläche "Miniaturansicht festlegen"

Fügen Sie das Schaltflächenelement für die Schaltfläche Miniaturansicht festlegen (Set Thumbnail) der Seite hinzu, indem Sie JavaScript-Code vorzugsweise in der Nähe des Media Player-Codes eingeben: <input onclick="captureThumbnailAndSetMetadata();" type="button" value="Set Thumbnail"/>

Mit der dieser Schaltfläche zugrunde liegenden JavaScript-Schaltfläche werden Parameter für die Verwendung durch das Silverlight-Steuerelement extrahiert.

Tabelle 2. Parameter für die ECMAScript-Schaltfläche

Parameter	Extrakations- und Berechnungsmethode
Miniaturansicht	Wird mithilfe der CaptureCurrentFrame-Methode in JavaScript aus dem MediaWebPart-Objekt extrahiert.
Höhe und Breite der Miniaturansicht	Das Berechnen der korrekten Höhe und Breite besteht aus zwei Schritten. Die Größe des MediaWebPart-Objekts entspricht nicht immer der Größe des zurückgegebenen Miniaturbilds, da dessen Rechteck möglicherweise ein anderes Seitenverhältnis als das Video aufweist. Berechnen Sie die korrekte Höhe und Breite, indem Sie zunächst das natürliche Seitenverhältnis des im MediaWebPart-Objekt angezeigten Videos mithilfe der Eigenschaften NaturalVideoWidth und NaturalVideoHeight des Miniaturbilds ermitteln. Anschließend berechnen Sie auf der Grundlage des natürlichen Seitenverhältnisses die Größe des zurückgegebenen Miniaturbilds. In Abhängigkeit vom Seitenverhältnis entspricht die Größe der vollen Breite des Players und einer kürzeren Höhe, oder der vollen Höhe des Players und einer kürzeren Breite.
Für das Miniaturbild zu verwendender Dateiname	Für diesen Wert können Sie eine beliebige Textzeichenfolge festlegen. Legen Sie hierfür z. B. den Wert von Titel fest, der im MediaWebPart-Objekt verwendet wird. Sie können hierfür aber auch eine von JavaScript berechnete beliebige Zeichenfolge festlegen.
URL des Servers	Dieser Parameter ist hartcodiert und auf den Namen des aktuellen Servers festgelegt (in Codebeispielen durch <server> dargestellt).
Serverrelative URL der Dokumentbibliothek zum Speichern der Miniaturansichten	Dieser Parameter ist hartcodiert und auf die URL /Thumbnails festgelegt, die auf dem Namen der Miniaturansichtenbibliothek basiert, die Sie zuvor angegeben haben.

Nachdem mit dem Silverlight-Steuerelement das Miniaturansichtsteuerelement hochgeladen wurde, werden im JavaScript-Code Daten mit den in Tabelle 3 aufgelisteten Eigenschaftswerten verwendet.

Tabelle 3. Eigenschaftswerte für die Daten

Feldname	Definition
Vorschaubild-URL (Preview Image URL)	Die URL, die auf dem vom Silverlight-Steuerelement zurückgegebenen Dateinamen basiert.
Framebreite (Frame Width)	Die zuvor berechnete Breite des Videos.
Framehöhe (Frame Height)	Die zuvor berechnete Höhe des Videos.

Um die Felder in Tabelle 3 mit vom Code zurückgegebenen Werten aufzufüllen, durchläuft die JavaScript-Funktion programmgesteuert alle im Formular enthaltenen Eingabefelder und trägt den korrekten Wert ein, wenn das entsprechende Feld gefunden wird.

function captureThumbnailAndSetMetadata()
{
//Get the media player and extraction control.
var mediaPlayerObj = getMediaPlayer();
var slExtractorControl = getExtractorControl();

//Get the natural height and width of the video from the object model for the media player.
var nHeight = mediaPlayerObj.NaturalVideoHeight;
var nWidth = mediaPlayerObj.NaturalVideoWidth;

//Calculate the actual height and width of the thumbnail image based on the natural versus current aspect ratio.
var naturalAspectRatio = nWidth/nHeight;

var originalHeight = 225;  //This value must match the height of the media player on the page.
var originalWidth = 300; //This value must match the width of the media player on the page.
var originalAspectRatio = originalWidth/originalHeight;

var thumbnailWidth;
var thumbnailHeight;

if (originalAspectRatio > naturalAspectRatio)
{
thumbnailHeight = originalHeight;
thumbnailWidth = originalHeight * naturalAspectRatio;
}
else
{
thumbnailWidth = originalWidth;
thumbnailHeight = thumbnailWidth/naturalAspectRatio-1; 
}
//Finished computing the thumbnail height and width.

//Get the current frame from the media player.
var sThumbnail = mediaPlayerObj.CaptureCurrentFrame();

//Get the file name to start with from the media player.
var sFileName = (document.getElementsByName('mediaTitle'))[0].innerText;

//Calls the Extractor Control, which returns the file name of the actual thumbnail.
//Replace <server> with the name of your server and update folder parameters as needed.
var sThumbnailFileName = slExtractorControl.convertAndUploadThumbnail(sThumbnail, thumbnailWidth, thumbnailHeight, sFileName, "http://<server>/", "/Video Thumbnails");
//Begin setting the relevant metadata.
var sThumbnailUrl = "http://<server>/Video Thumbnails/"+sThumbnailFileName;

//Get the input fields in a single array to set the URL.
var sInputFields = document.getElementsByTagName('input');

//Loop through all the input fields and look for the fields we want to set.
var i;
for (i=0; i<(sInputFields.length);i++)
{
//Indicates that the preview image URL is found.
if (sInputFields[i].title == 'Preview Image URL')
{
sInputFields[i].value=sThumbnailUrl; 
}

//Indicates that the frame width is found.
if (sInputFields[i].title == 'Frame Width')
{
sInputFields[i].value=thumbnailWidth;
}

// Indicates that the frame height is found.
if (sInputFields[i].title == 'Frame Height')
{
sInputFields[i].value=thumbnailHeight;
}
} 
}

Die Felder "Vorschaubild-URL", "Framebreite" und "Framehöhe"

Blenden Sie die Felder Vorschaubild-URL, Framebreite und Framehöhe in der Benutzeroberfläche aus, damit die Benutzer nicht versuchen, manuell Werte einzugeben oder zu ändern. Zum Ausblenden der Felder, suchen Sie mithilfe der Entwurfsansicht in Microsoft SharePoint Designer 2010 die entsprechenden <tr>-Elemente für die Tabellenzeilen, die diese Felder enthalten, und legen Sie deren style-Attribut auf style=display:none fest. Durch diese Einstellung wird verhindert, dass dem Benutzer Felder angezeigt werden. Die Felder bleiben aber auf der Seite vorhanden, wo sie mithilfe des ecmascriptshort-Objektmodells festgelegt werden können.

Weitere Schritte

Exemplarische Vorgehensweise: Erstellen einer angepassten Homepage und von XSL für ein Webpart für Inhaltsabfragen (Content Query Web Part, CQWP)

Siehe auch

Aufgaben

Gewusst wie: Konfigurieren des MediaWebPart-Objekts mithilfe von ECMAScript

Konzepte

Exemplarische Vorgehensweisen: Erstellen und Anpassen einer Videofreigabewebsite

Programmiermodell für die Verwaltung digitaler Objekte

Freigeben über