Partager via

Procédure pas à pas : Ajout du MediaWebPart et de fonctionnalités de site vidéo

  • Article

Dernière modification : lundi 19 avril 2010

S’applique à : SharePoint Server 2010

Dans cet article
Lecteur multimédia
Incorporer du texte
Signets
Propriétés multimédias et contrôle d’évaluation
Commentaires et le composant WebPart Forum de notes
Vidéos associées

Cette rubrique est la seconde 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.

Conditions requises

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

Lecteur multimédia

Créez une référence sur la page où apparaîtra le lecteur multimédia, ajoutez une référence au modèle objet de lecteur multimédia à la page afin de créer le lecteur multimédia dans la balise <div> spécifiée, puis ajoutez du code ECMAScript (JavaScript, JScript) en ligne dans la page où vous souhaitez afficher le lecteur multimédia.

Pour ajouter un lecteur multimédia à la page Formulaire d’affichage de l’élément

  1. Démarrez Microsoft SharePoint Designer 2010, puis ouvrez le Formulaire d’affichage de l’élément que vous avez créé dans Procédure pas à pas : Création d’un site vidéo en mode Fractionné.

  2. Créez une référence <div> sur la page où vous souhaitez afficher l’objet MediaWebPart.

    ConseilConseil

    Par exemple, pour créer une balise <div> de IDMediaPlayerHost, ajoutez <div id="MediaPlayerHost"></div> à la page.

  3. Ajoutez une référence au modèle objet mediaplayer.js sur la page pour importer les fonctions du lecteur multimédia. Par exemple, JavaScript<script type="text/javascript" src="/_layouts/mediaplayer.js"/>.

  4. Ajoutez du code JavaScript en ligne à la page où vous souhaitez afficher l’objet MediaWebPart.

    //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". 
    );

Incorporer du texte

Maintenant que vous avez créé l’objet lecteur multimédia, vous pouvez y accéder avec le modèle objet JavaScript. Pour cela, vous devez obtenir la valeur de la propriété EmbedText, que vous pouvez utiliser pour insérer l’objet lecteur multimédia dans une page ou un document cible. Il existe plusieurs manières d’afficher le lecteur multimédia sur la page ; l’une des options consiste à utiliser une zone de texte Input.

Les appelants de la méthode createMediaPlayer peuvent lui passer un pointeur de fonction qu’elle appellera une fois terminée la création du lecteur multimédia. Ceci est utile si vous souhaitez que le code exécuté sur la page utilise le lecteur multimédia. Avec cette approche, vous pouvez être certain que le lecteur multimédia sera entièrement chargé avant que votre code ne soit appelé.

  1. Obtenez le lecteur multimédia en tant qu’objet JavaScript au moyen d’une fonction basée sur le paramètre MediaPlayerHost ID que vous avez spécifié lors de la création du lecteur multimédia.

    Function getMediaPlayer()
   {
   var p=document.getElementById("MediaPlayerHost")
   var obj=p.getElementsByTagName("object");
   return obj[0].Content.MediaPlayer;
   }

  2. Définissez la propriété EmbedText sur la page et appelez-la automatiquement lorsque l’objet lecteur multimédia est créé.

    function getEmbedText(example)
{
     var player = getMediaPlayer();
     return player.EmbedText;
}

  3. Appelez createMediaPlayer pour inclure un nom de fonction à appeler lors du chargement du lecteur multimédia. Configurez la fonction de façon à utiliser la fonction getEmbedText pour afficher du texte incorporé sur la page.

Signets

Pour les vidéos de longue durée, contenant de nombreuses sections distinctes, une complexité élevée ou des métadonnées, il est utile d’inclure des signets. Lorsque l’utilisateur clique sur un signet, le lecteur multimédia accède directement à un point défini dans la vidéo sur la page, de manière semblable au déplacement d’un chapitre à un autre sur un DVD. Vous pouvez utiliser le champ Bookmarks (déjà inclus dans l’implémentation d’objet DataFormWebPart décrite dans la rubrique Procédure pas à pas : Création d’un site vidéo) pour ajouter des signets à la page. Pour les besoins de cette procédure pas à pas, utilisez un champ Bookmarks avec des valeurs de données au format suivant.

Notes

Notez les accolades.

Notes

Le code suivant représente du texte dans un champ à texte multiple, et non JavaScript.

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

Par exemple, si vous souhaitez définir les points des signets respectivement à 10 secondes et 20 secondes.

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

Après avoir défini la fonction à appeler lorsque l’utilisateur clique sur un lien de signet, ajoutez du code JavaScript qui s’exécute sur la page afin d’extraire la valeur du champ Bookmarks et utilisez-le pour restituer les liens qui appellent la fonction JavaScript.

Pour ajouter des signets au Formulaire d’affichage de l’élément

  1. Ouvrez la page dans SharePoint Designer 2010.

  2. Ajoutez à la page une balise <ul> avec un attribut id ayant la valeur bookmarkList à l’emplacement où vous souhaitez afficher le signet : <ul id="bookmarkList">.

  3. Ajoutez à la page une fonction JavaScript qui place le lecteur multimédia à des positions spécifiées.

    ConseilConseil

    Utilisez cette fonction ultérieurement pour les liens de signets individuels.

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

  4. Ajoutez à la page du code JavaScript qui restitue le texte de liens de signets.

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

Propriétés multimédias et contrôle d’évaluation

Pour ajouter la section de propriétés multimédias à la page, ajoutez un autre DataFormWebPart à l’aide de la procédure décrite dans la rubrique Procédure pas à pas : Création d’un site vidéo, mais ne le masquez pas. Placez le composant WebPart où vous le souhaitez sur la page et affichez les champs qui doivent être visibles aux utilisateurs.

Vous souhaiterez peut-être masquer l’objet DataFormWebPart que vous avez ajouté initialement à la page. Dans la rubrique Procédure pas à pas : Création d’un site vidéo, vous avez masqué le contrôle DataFormWebPart au lieu de le supprimer ; vous pouvez ainsi l’extraire et le déplacer à un endroit plus marquant (par exemple juste sous la vidéo) sur la page.

Pour ajouter le contrôle d’évaluation

  1. Ajoutez un élément <div> à l’emplacement sur la page où vous souhaitez afficher le contrôle d’évaluation. Utilisez un ID reconnaissable, tel que ratingsDiv.

  2. Ajoutez du code JavaScript pour extraire le contrôle et placez-le entre les balises <div> d’ouverture et de fermeture.

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

Commentaires et le composant WebPart Forum de notes

Vous pouvez ajouter le composant WebPart Forum de notes à votre page afin de permettre aux utilisateurs de laisser un commentaire sur une vidéo. Dans le menu Insertion, sélectionnez Composant WebPart : . Le composant WebPart Forum de notes doit apparaître dans la liste de composants WebPart. S’il ne figure pas dans la liste, importez-le dans votre Galerie de composants WebPart.

Pour importer le composant WebPart Forum de notes

  1. Démarrez l’Explorateur Windows, puis naviguez jusqu’à un site d’équipe ou autre site où le Composant WebPart Forum de notes est disponible.

  2. Naviguez jusqu’à Paramètres du site.

  3. Dans la section Galeries, cliquez sur Composants WebPart.

  4. Sélectionnez Ouvrir dans le menu Bibliothèque avec l’Explorateur Windows, puis copiez le Composant WebPart socialComment.dwp sur votre ordinateur.

  5. Répétez les étapes 2 et 3.

  6. Téléchargez le Composant WebPart socialComment.dwp dans la Galerie de composants WebPart.

Pour ajouter le composant WebPart Forum de notes

  • Dans le menu Insertion, sélectionnez Composant WebPart, puis ajoutez le Composant WebPart Forum de notes à votre page, à l’endroit où vous souhaitez que l’utilisateur puisse ajouter un commentaire.

Notes

Pour utiliser le Composant WebPart Forum de notes, activez l’Application de service Profil utilisateur et rendez-la disponible sur le serveur. Tous les utilisateurs du site doivent posséder l’autorisation de profil Utiliser des fonctionnalités de mise en réseau.

Vidéos associées

Vous pouvez configurer la page de façon à afficher un ensemble de vidéos sélectionnées en fonction des mots clés gérés fournis pour la vidéo active.

  1. Ajoutez du code JavaScript à la page pour forcer l’insertion de la propriété de mots clés de la vidéo dans l’URL de la page. Le code vérifie s’il existe un paramètre RelatedKeywords dans l’URL active. Si le paramètre est introuvable, il utilise la valeur de la propriété Keywords() de l’objet DataFormWebPart et recharge la page.

    //Check whether the RelatedKeywords parameter is found in the URL;if necessary, reload the page with the query string. 
var relatedKeywordsParam = "RelatedKeywords";
var urlParams = window.location.search;

//Runs if the URL parameters do not include RelatedKeywords parameters.
if(urlParams.indexOf(relatedKeywordsParam) == -1) 
{
var keywordsValue = (document.getElementsByName('KeywordsFieldValue'))[0].innerText;
var newUrl = window.location.toString(); 
newUrl+= '&'+relatedKeywordsParam+'=' + keywordsValue;
window.location.replace(newUrl);
}

  2. Dans SharePoint Designer 2010, dans le menu Insertion, sélectionnez Composant WebPart pour ajouter une instance de l’objet ContentByQueryWebPart à la page et pour inclure une requête queryString. Le composant WebPart utilise la valeur du paramètre RelatedKeywords.

  3. Configurez Query de façon à utiliser queryStringparameters à partir de l’URL. L’une des nouvelles fonctionnalités du composant WebPart Contenu par requête est sa faculté à accepter de manière dynamique des paramètres Requête de service Web sur la base de paramètres de chaîne de requête présents dans une URL. Vous pouvez utiliser cette fonctionnalité pour gérer des vidéos associées car la propriété RelatedKeywords de l’URL, que vous définissez avec JavaScript, contient des mots clés gérés sur lesquels effectuer un filtrage.

  4. Affectez la valeur /Videos à l’option Afficher les éléments de la liste suivante.

  5. Affectez la valeur [PageQueryString:RelatedKeywords] aux Mots clés d’entreprise dans la section Filtres supplémentaires.

Étapes suivantes

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

Voir aussi

Tâches

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

Concepts

Gestion des biens numériques

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