Procédure pas à pas : Personnaslisation de l’expérience de téléchargement de vidéo

Dernière modification : lundi 27 septembre 2010

S’applique à : SharePoint Server 2010

Dans cet article
Page de téléchargement et composant WebPart multimédia
Contrôle Silverlight masqué
Page de test MediaTest.aspx
Balise <object> et extractionControl
Bouton Set Thumbnail
Champs PreviewImageURL, Frame Width et Frame Height

Cette rubrique est la troisième partie d’une série de cinq procédures pas à pas qui expliquent comment créer et personnaliser un site de partage de vidéos.

Maintenant que vous avez créé un formulaire d’affichage qui permet aux utilisateurs de visualiser des vidéos, vous êtes prêt à personnaliser l’expérience de téléchargement de vidéo. Cette procédure pas à pas illustre comment implémenter des contrôles servant à extraire automatiquement une image miniature pour des vidéos. Il s’agit d’une implémentation plus efficace du téléchargement que celle fournie par défaut dans Microsoft SharePoint Server 2010, qui requiert que les utilisateurs fournissent manuellement l’URL de l’image miniature d’une vidéo.

Cette procédure pas à pas couvre trois tâches :

1. Créer une page Formulaire de modification de l’élément et y ajouter un objet MediaWebPart. Le formulaire personnalisable est la page de téléchargement et correspond au formulaire visible par les utilisateurs lorsqu’ils cliquent sur Afficher les propriétés sur une vidéo.

2. Ajouter un contrôle Microsoft Silverlight masqué à la page. L’ajout d’une application Microsoft Silverlight masquée convertit l’image miniature de l’objet MediaWebPart en un format d’image approprié.

3. Utiliser ECMAScript (JavaScript, JScript) pour ajouter un bouton Set Thumbnail. Lorsqu’un utilisateur clique sur Set Thumbnail, le modèle objet JavaScript de l’objet MediaWebPart capture le cadre approprié, appelle l’application Silverlight sur la page afin de stocker l’image miniature dans la bibliothèque Thumbnails, définit automatiquement l’URL de l’image miniature pour la vidéo et masque le champ PreviewImageUrl sur le formulaire.

Conditions requises

Attention
Cette procédure pas à pas exige une bonne connaissance de Silverlight. Le Microsoft SharePoint 2010 Software Development Kit (SDK) inclut un exemple de code pour une solution Silverlight qui exécute les fonctions décrites ici. L’exemple de code inline est fourni uniquement à des fins de démonstration et ne doit pas être utilisé directement dans du code de production.

Effectuez les étapes de la rubrique Procédure pas à pas : Création d’un site vidéo.

Page de téléchargement et composant WebPart multimédia

Comme décrit dans Procédure pas à pas : Création d’un site vidéo, utilisez Microsoft SharePoint Designer 2010 pour créer un Formulaire de modification de l’élément dans la bibliothèque Vidéos et y ajouter l’objet MediaWebPart.

Pour créer un formulaire de modification à l’aide de SharePoint Designer

1. Démarrez Microsoft SharePoint Designer 2010, puis naviguez jusqu’à votre site SharePoint.

2. Dans le volet Navigation de gauche, cliquez sur Listes et bibliothèques, puis sélectionnez la bibliothèque Vidéos.

3. Cliquez sur Nouveau pour ouvrir la boîte de dialogue Créer un formulaire de liste.

4. Dans la boîte de dialogue Créer un formulaire de liste, spécifiez les paramètres fournis dans le Tableau 1.

   Tableau 1. Paramètres de la boîte de dialogue Créer un formulaire de liste

   Paramètre	Valeur
   Type de formulaire	Formulaire de modification de l’élément
   Défini comme formulaire par défaut pour le type sélectionné	Oui
   Type de contenu à utiliser	Vidéo

5. Dans la section Formulaires, cliquez avec le bouton droit sur le formulaire nouvellement créé, puis sélectionnez Modifier le fichier en mode Avancé.

Un nouveau formulaire d’affichage personnalisable apparaît. Il s’agit du formulaire par défaut visible par les utilisateurs lorsqu’ils cliquent sur Afficher les propriétés pour une vidéo. Les champs Title et PreviewImageURL seront probablement vierges pour les vidéos nouvellement téléchargées.

Contrôle Silverlight masqué

Le contrôle Silverlight personnalisé gère l’extraction et le téléchargement des fichiers d’images miniatures du cadre actif de l’objet MediaWebPart. À un niveau élevé, le code expose une seule méthode JavaScript qui obtient et définit des paramètres utilisés durant la conversion et le téléchargement, et renvoie le nom de fichier de chaque image miniature téléchargée. Le code ajoute des caractères de remplissage aléatoires au nom de fichier afin d’améliorer les chances d’extraction d’image.

/* 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.)
         */

Conseil
L’exemple de code complet d’extracteur d’image miniature Silverlight se trouve dans le dossier C:\Program Files\Microsoft SDKs\SharePoint 2010\Microsoft SDKs\SharePoint 2010\Samples du SDK SharePoint 2010 téléchargé.

La logique principale du contrôle personnalisé réside dans le fichier MainPage.xaml.cs Le code convertit l’image miniature fournie par l’objet MediaWebPart en format de fichier .jpg. Il utilise le modèle objet côté client SharePoint pour télécharger le fichier .jpg à l’emplacement spécifié.

Le fichier clé généré par le projet Visual Studio 2010 est un fichier unique, ExtractThumbnail.xap, qui contient l’exécutable. Pour déployer le fichier .xap, téléchargez-le dans la Bibliothèque de styles de votre site.

Pour télécharger le fichier XAP dans la Bibliothèque de styles

1. Naviguez jusqu’à votre site SharePoint, puis ouvrez une page quelconque.

2. Cliquez sur Afficher tout le contenu du site, puis sur Bibliothèque de styles.

3. Sous l’onglet Documents, cliquez sur Télécharger un document pour télécharger le fichier .xap.

4. Publiez le fichier .xap et approuvez-le comme version majeure afin que tous les utilisateurs puissent y accéder.

Page de test MediaTest.aspx

Le projet Visual Studio 2010 inclut la page de test MediaTest.aspx, que vous pouvez utiliser pour tester l’application proprement dite sur une page. Après avoir téléchargé le fichier .xap généré par le projet (à l’URL spécifiée dans la page MediaTest.aspx), téléchargez la page dans une bibliothèque de documents SharePoint quelconque, puis naviguez jusqu’à elle.

Balise <object> et extractionControl

Pour que l’application Silverlight soit disponible dans la page de téléchargement, utilisez SharePoint Designer 2010 pour ajouter une balise <object> qui charge l’application et l’enveloppe dans une instruction <div> avec un ID bien connu, tel que extractionControl. Remplacez la valeur d’URL du paramètre source par l’URL qui pointe vers le fichier .xap précédemment téléchargé.

<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=0x40C" style="text-decoration:none">
   <img src="https://go.microsoft.com/fwlink/?linkid=108181&clcid=0x40C" alt="Get Microsoft Silverlight" style="border-style:none"/>
  </a>
    </object>
</div>

L’obtention de l’accès par programme au contrôle d’extraction Silverlight s’apparente à l’obtention de l’accès à l’objet MediaWebPart, comme décrit dans Procédure pas à pas : Création d’un site vidéo ; vous obtenez la capacité à y accéder à partir de la page de téléchargement. Insérez une fonction JavaScript dans votre page afin d’obtenir le contrôle d’extraction Silverlight en tant qu’objet JavaScript.

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

Bouton Set Thumbnail

Ajoutez l’élément de bouton à la page en ajoutant du code JavaScript, de préférence proche du code du lecteur multimédia :<input onclick="captureThumbnailAndSetMetadata();" type="button" value="Set Thumbnail"/>

Le bouton JavaScript derrière ce bouton extrait des paramètres pour une utilisation par le contrôle Silverlight.

Tableau 2. Paramètres de bouton ECMAScript

Après que le contrôle Silverlight a téléchargé le contrôle de miniature, le code JavaScript utilise les données définies aux valeurs de propriétés spécifiées dans le Tableau 3.

Tableau 3. Données de valeurs de propriétés

Pour remplir les champs du Tableau 3 avec des valeurs renvoyées par le code, la fonction JavaScript parcourt automatiquement en boucle tous les champs d’entrée contenus dans le formulaire et remplit la valeur correcte lorsqu’elle trouve le champ approprié.

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

Champs PreviewImageURL, Frame Width et Frame Height

Masquez les champs PreviewImageUrl, Frame Width et Frame Height de l’interface utilisateur de sorte que les utilisateurs n’essaient pas d’entrer ou de modifier manuellement leurs valeurs. Pour masquer les champs, utilisez le Mode Création dans Microsoft SharePoint Designer 2010 pour rechercher les éléments <tr> pertinents pour chaque ligne de tableau qui contient ces champs et définissez leur attribut style : style=display:none. Ce paramètre empêche que les champs ne soient visibles par l’utilisateur, mais les laisse sur la page où ils peuvent être définis à l’aide du modèle objet ecmascriptshort.

Étapes suivantes

Procédure pas à pas : création d’une page d’accueil et d’un XSL Composant WebPart Contenu par requête personnalisés

Voir aussi

Tâches

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

Concepts

Procédure pas à pas : Création et personnalisation d’un site de partage de vidéos

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