Le Pic
Projet Internet et Citoyenneté

Accueil > LES OUTILS > SPIP, la doc du CMS > Des mises en pages personnalisées >

Fiche N°13 - Comment insérer des vidéos dans vos articles PDF

par manu

Objectif - Savoir insérer une vidéo dans son article, sans faire tout planter au PIC !


On peut insérer des vidéos dans un article de deux manières différentes :

  • En téléversant la vidéo sur son site
  • En téléversant la vidéo sur une plateforme spécialisée et en faisant un lien depuis son article.
    Cet article propose une manière de procéder pour les deux situations, et explique les avantages et les inconvénients de chaque méthode.

Téléversement direct de la vidéo sur votre site

Prérequis

Pour utiliser la méthodologie exposée ici, vous devrez disposer au préalable de quelques outils :

  • Sur votre site, installez le plugin Mediaspip [1]
  • Sur votre poste de travail, vous aurez besoin de logiciels de vidéo. Nous vous conseillons VLC [2], logiciel libre fonctionnant sous gnu/Linux, Windows et mac/Os

Le type de fichiers

Il y a des très nombreux types de fichiers vidéos, nous vous conseillons le type mp4, qui a de fortes chances d’être reconnu par tous les navigateurs et tous les systèmes.

Attention à la taille des fichiers !

Une vidéo comme celle qui se trouve dans cet article, en haute définition [3], tient dans un fichier de 6 Mo, alors qu’elle ne dure que... 1 minute !
A ce rythme, le disque du PIC sera vite saturé si tout le monde dépose des vidéos de 30 minutes ou plus !

Donc s’il vous plait :

  • Pas de vidéos sur notre serveur qui dépasse quelques minutes !
  • Pas de vidéos en HD sur notre serveur.

Redimensionner une video

Il est possible de redimensionner une vidéo pour réduire sa résolution, et donc la taille de son fichier, en utilisant VLC. Comment ? En allant voir par ici
Si vous partez d’une vidéo en HD de 1280x720 pixels, il est raisonnable de diviser sa taille par 4 : elle fait alors 320 x 180 pixels, et la même vidéo que ci-dessus, passe de 6.0 Mo à 1.6 Mo : cela reste important, mais déjà plus raisonnable.

Préparer la vignette

Il est agréable de montrer une image tirée de la vidéo au chargement de la page, si vous ne le faites pas vous aurez un rectangle tout noir, pas très esthétique.
Mais cela ne se fait pas tout seul : vous devez préparer une image, qui deviendra la vignette de votre vidéo. Pour cela :

  • Ouvrez votre vidéo redimensionnée avec VLC
  • Commencez à lire la vidéo, puis lorsque l’image vous plait pressez sur le bouton pause
  • Cliquez sur le menu : Vidéo/Prendre une capture d’écran
  • Vous retrouverez l’image, au format png, dans votre répertoire images

Créez votre article

Vous pouvez maintenant commencer à écrire votre article.

  • Téléversez votre fichier de vidéo, comme vous le faites pour n’importe quel document joint à un article.
  • Le téléversement effectué, cliquez sur le bouton Modifier dans la zone consacrée au document, et renseignez :
    • Le titre
    • La description
    • Pas la peine pour l’instant de renseigner le champ crédits (auteur de la vidéo, licence etc), le plugin ne reprend pas cette information. N’oubliez pas de mettre les crédits dans le champ description, qui lui sera affiché
    • Ajoutez en tant que vignette le fichier png que vous avez généré avec vlc (voir ci-dessus)
  • Pour faire apparaître la vidéo, écrivez dans votre article (bien sûr, n’oubliez pas de remplacer XYZ par le numéro du document) :
    <docXYZ|center|largeur=320|moviesize=non>

D’ailleurs, voilà ce que cela donne :

Fleurs de lys
Mskrzyp, cf. https://vimeo.com/mskrzyp125 Licence CC Attribution

Attention : Si vous utilisez par ailleurs le plugin accès restreint, peut-être que vous n’arriverez pas à voir correctement la vidéo. Il y a une astuce de configuration qui dépasse le sujet de cet article. Si cela vous arrive, n’hésitez pas à nous contacter !

Utilisation d’une plateforme spécialisée

Vous l’avez compris : si vous souhaitez faire apparaître une vidéo en haute résolution, un peu longue (au-delà de 5 minutes), il est nettement préférable d’utiliser des plateformes dédiées à l’hébergement de vidéos :

  • Les accès réseau sont correctement dimensionnés
  • L’espace-disque est adapté à l’hébergement de vidéos
  • Trop de vidéos sur le site du PIC va rapidement saturer le réseau ainsi que l’espace-disque !

Les plateformes existantes

Il existe trois plateformes principales dédiées à l’hébergement de vidéos :

Si vous en connaissez d’autres, par exemple des projets associatifs, n’hésitez pas à nous le faire savoir !

En pratique

Vous trouverez sur les différentes plateformes toutes les informations permettant de téléverser votre vidéo. Une fois que le téléversement est fait, il vous suffit de :

  • Aller à la page de votre vidéo
  • Cliquer sur le bouton Partager
  • Copier-coller dans votre article le charabia que vous trouverez dans la rubrique "Intégration"

Et voilà ce que cela donne avec nos fleurs de lys :

Lys blancs par mskrzyp sur Vimeo.

Au passage j’ai un peu modifié le charabia en question afin de mettre la taille de 320x180, et j’ai aussi traduit le titre en français.

En fin de compte qu’est-ce qui est le mieux ?

Voilà, vous savez tout, j’ai résumé ici avantages et inconvénients des deux méthodes :

  • Hébergement sur votre site
    • Avantages :
      • Pas besoin d’aller sur des plateformes le plus souvent commerciales
      • Tout reste chez nous !
    • Inconvénients :
      • Plus complexe à mettre en œuvre
      • Risque de congestion du disque du PIC et de la bande-passante réseau
      • On est en basse définition, ça se sent lorsqu’on passe en plein écran.
    • A réserver à des vidéos de moins de 5 minutes en basse définition
  • Hébergement sur une plateforme spécialisée
    • Avantages :
      • Simple à mettre en œuvre
      • Pas d’utilisation de disque ni de la bande passante réseau sur le serveur du PIC
      • On peut mettre des vidéos en haute résolution, très bonne qualité même en plein écran
    • Inconvénients :
      • Il faut ouvrir un compte et déposer vos vidéos sur des plateformes commerciales
    • A utiliser systématiquement pour des vidéos de plus de 5 minutes, en Haute Définition

Documents joints