Procédure pas à pas : Création d’un site vidéo

Dernière modification : lundi 19 avril 2010

S’applique à : SharePoint Server 2010

Dans cet article
Structure de contenu
Formulaire d’affichage vidéo personnalisé
Composant WebPart Formulaire de données masqué
Disponibilité des colonnes et le composant WebPart Formulaire de données masqué

Pour créer un site de partage social de contenu multimédia et des expériences associées telles que le téléchargement de vidéo, l’extraction d’image miniature, une page d’accueil optimisée pour l’affichage vidéo et la gestion du contenu vidéo, ainsi que des outils d’agrégation tels que des canaux pour les grandes bibliothèques vidéos, vous devez d’abord créer un site de base pour la vidéo. La création d’un site vidéo de base comprend cinq étapes :

1. Configurer une structure de contenu qui prend en charge le type de contenu vidéo.

2. Créer un formulaire personnalisé pour l’affichage des vidéos.

3. Créer un objet DataFormWebPart masqué et l’utiliser pour obtenir des paramètres multimédias.

4. Créer le lecteur multimédia.

5. Utiliser le modèle objet ECMAScript (JavaScript, JScript) pour accéder à l’objet MediaWebPart.

Par ailleurs, vous pouvez ajouter des fonctionnalités au site de base qui prennent en charge des tâches courantes associées au contenu vidéo, notamment les évaluations de vidéos, les commentaires, l’accès à des vidéos associées, l’affichage de propriétés multimédias associées à la vidéo active, et bien plus encore.

Conditions requises

L’exécution de cette procédure requiert Microsoft Visual Studio 2010 et une bonne connaissance des technologies SharePoint suivantes :

• Microsoft SharePoint Designer 2010

• Langage HTML de base

• Programmation JavaScript de base

• Développement Microsoft Silverlight

• Langage XML et XSL de base

Structure de contenu

Pour préparer la création du site vidéo, utilisez d’abord SharePoint Designer 2010 ou l’interface utilisateur de navigation de Microsoft SharePoint Server 2010 pour configurer une structure de contenu. Celle-ci définit les fonctionnalités disponibles au niveau du site et au niveau de la collection de sites, les types de contenu qui doivent être activés, ainsi que les colonnes que vous devez ajouter pour prendre en charge le contenu vidéo.

Mettez en service la collection de sites à l’aide du modèle de site de portail de publication.

Configurez deux bibliothèques Type d'élément : une bibliothèque Vidéos et une bibliothèque Miniatures. Incluez le type de contenu vidéo dans la bibliothèque Vidéos et supprimez tous les autres types de contenu. Incluez le type de contenu image dans la bibliothèque Miniatures et supprimez tous les autres types de contenu. Dans toute cette série de procédures, la bibliothèque Vidéos stocke les fichiers vidéo et la bibliothèqueMiniatures stocke stocke les images miniatures téléchargées sur le site.

Le site vidéo de base permet de disposer d’une fonctionnalité vidéo standard et prend également en charge la définition de propriétés multimédias associées prises en charge par le type de contenu vidéo. Vous pouvez ajouter des évaluations, des mots clés d’entreprise, des signets, la prise en charge des pages de canaux, ainsi que d’autres propriétés au type de contenu vidéo. À partir de la Galerie des colonnes de site, ajoutez les colonnes répertoriées dans le Tableau 1 au type de contenu Vidéo.

Tableau 1. Colonnes de site à ajouter à la Galerie des colonnes de site

Tableau 2. Colonnes de type de contenu vidéo

Formulaire d’affichage vidéo personnalisé

Le premier élément du site de partage de vidéo est une page personnalisée pour l’affichage des vidéos. La plupart des éléments sur la page, tels que Évaluations et Signets, sont des propriétés que vous avez définies lors de la création de colonnes pour le type de contenu vidéo. Vous ajouterez le lecteur multimédia lors d’une étape ultérieure. La page contient els éléments suivants :

1. Lecteur multimédia

2. Évaluations

3. Signets

4. Vidéos associées

5. Propriétés multimédias

6. Texte du lecteur multimédia

7. Commentaires

Création d’un formulaire d’affichage dans SharePoint Designer

1. Démarrez SharePoint Designer 2010, puis ouvrez votre site SharePoint.

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

3. Dans la section Formulaires, cliquez sur Nouveau.

4. Dans la boîte de dialogue Créer un formulaire de liste, spécifiez le Type de formulaire et indiquez s’il faut le Définir comme formulaire par défaut pour le type sélectionné :

   • Type de formulaire : Formulaire d’affichage de l’élément

   • Définir comme formulaire par défaut pour le type sélectionné=Oui

   • Type de contenu : 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 de l’élément peut désormais être personnalisé. Il s’agit du formulaire par défaut visible lorsqu’un utilisateur clique sur Afficher les propriétés pour une vidéo.

Composant WebPart Formulaire de données masqué

Créez un DataFormWebPart masqué et utilisez-le pour obtenir des paramètres multimédias. Une grande partie des fonctionnalités incluses dans le Formulaire d’affichage de l’élément, telles que le Lecteur multimédia et les Signets, sont fournies par JavaScript. Le modèle objet JavaScript utilise des valeurs de paramètres d’entrée stockées dans les colonnes de la vidéo affichée. Pour personnaliser le Formulaire d’affichage de l’élément, ajoutez tout d’abord un DataFormWebPart à la page. Une fois masqué, le composant WebPart Formulaire de données contient toutes les données requises pour activer les fonctions JavaScript requises.

Tableau 3. Paramètres de DataFormWebPart

Pour ajouter le composant WebPart Formulaire de données et configurer les colonnes et filtres

1. Sélectionnez Formulaire d’affichage de l'élément dans le Ruban Insertion, puis sélectionnez la bibliothèque Vidéos dans le menu déroulant.

2. Cliquez sur Ajouter/Supprimer des colonnes dans le Ruban contextuel Outils d’affichage de données—Options et ajoutez les champs répertoriés dans le Tableau 3 au groupe Colonnes affichées.

3. Cliquez avec le bouton droit sur la balise <img> actuellement affichée pour la colonne PreviewImageUrl et utilisez la commande Mettre en forme l’élément en tant que pour affecter la valeur Texte à la mise en forme.

4. Cliquez avec le bouton droit sur le lien hypertexte affiché pour la colonne Chemin d’accès d’URL, puis affectez la valeur Texte à la commande Mettre en forme l’élément en tant que.

5. Dans le menu contextuel Options, cliquez sur le bouton Paramètres, puis ajoutez un Nouveau paramètre nommé ID dans la section Paramètres de la vue de données avec les paramètres suivants :

   1. Source des paramètres : Chaîne de recherche

   2. Variable de chaîne de requête : ID

   3. Valeur par défaut : 1

6. Dans le Ruban contextuel Options, cliquez sur Filtre, puis ajoutez les critères de filtre : <Field Name:ID>Equals[ID]

Les deux dernières étapes permettent de s’assurer que le DataFormWebPart affiche toujours les valeurs de métadonnées de l’élément visualisé actuellement par l’utilisateur.

Disponibilité des colonnes et le composant WebPart Formulaire de données masqué

Les valeurs de l’objet DataFormWebPart ne sont pas adressables pour JavaScript par défaut. Vous devez configurer chaque valeur qui est affichée dans le DataFormWebPart de sorte qu’elle soit adressable par JavaScript. La définition de ces valeurs suit un modèle général. Pour effectuer cette étape, vous devez être en mesure de voir le code HTML de chaque page. Par conséquent, basculez en mode Fractionné dans SharePoint Designer 2010 avant de commencer.

Après avoir rendu les valeurs DataFormWebPart adressables par JavaScript, masquez le composant WebPart de sorte qu’il n’apparaisse pas dans la page Formulaire d’affichage de l’élément lorsqu’elle est visualisée. Une fois chaque balise d’ancrage en place avec des noms bien connus pour chaque paramètre, vous pouvez accéder à n’importe lesquelles des valeurs avec une ligne unique de code JavaScript.

Pour rendre les colonnes utilisables à l’aide d’ECMAScript

1. Démarrez SharePoint Designer 2010, puis basculez en mode Fractionné pour afficher le code HTML de chaque page.

2. Affichez le Composant WebPart Formulaire de données.

3. En mode Code, recherchez l’instruction <xsl:value-of> utilisée pour générer la valeur correcte.

   Conseil
   Par exemple, le code du champ Titre est <xsl:value-of select=”@Title”/>.

4. Placez l’instruction <xsl:value-of> dans un élément <a> et spécifiez un attribut name pour l’élément <a> (le code suivant contient un exemple de valeur) : <a name="TitleFieldValue"> <xsl:value-of select="@Title" /></a>.

Pour masquer le composant WebPart Formulaire de données

1. Recherchez l’élément <WebPartPages:DataFormWebPart> dans le code HTML de la page Formulaire d’affichage de l’élément.

2. Placez-le dans un élément <div> avec l’attribut style="display:none;" .

3. Accédez à une valeur d’objet DataFormWebPart quelconque à l’aide de la ligne de code JavaScript suivante : (document.getElementsByName(‘Title’))[0].innerText;

   Notes

   Utilisez le Nom d’ancre suggéré mentionné dans le Tableau 3 au lieu de Titre dans l’extrait de code.

Pour résumer, dans cette rubrique vous avez configuré SharePoint Server 2010 comme site de publication avec activation des évaluations, vous avez créé deux bibliothèques de types de biens (pour stocker les fichiers vidéo et les fichiers image), vous avez spécifié le type de contenu vidéo et défini les propriétés multimédias disponibles, vous avez créé un Formulaire d’affichage de l’élément pour afficher les paramètres multimédias et le lecteur multimédia, vous avez ajouté un objet DataFormWebPart qui utilise des valeurs de paramètres d’entrée stockées dans les colonnes de la vidéo affichée, vous avez rendu les valeurs du DataFormWebPart accessibles au modèle objet JavaScript et vous avez masqué le DataFormWebPart de sorte qu’il ne soit pas visible aux utilisateurs qui visualisent le Formulaire d’affichage de l’élément, qui sert d’affichage de base pour votre site vidéo.

Durant la procédure pas à pas suivante, vous allez découvrir comment ajouter l’objet MediaWebPart au Formulaire d’affichage de l’élément utilisé pour afficher les vidéos, comment afficher des propriétés multimédias sur le formulaire et comment renseigner les données d’autres paramètres multimédias du type de contenu vidéo, tels que les évaluations, les vidéos associées et les commentaires.

Étapes suivantes

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

Voir aussi

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