Vous êtes ici : Accueil / Documentations / Web / Placer une vidéo sous plone

Placer une vidéo dans un site web sous Plone

Pour placer une vidéo sur un site web, on serait tenté de charger dans le site le fichier vidéo en espérant que celui-ci soit reconnu automatiquement comme une vidéo et que sa visualisation se fasse tout comme on était sur les youtube/vimeo et autres dailymotion...

 

En réalité, cette méthode présente de gros inconvénients

  • pour qu'une vidéo soit reconnue comme telle et visualisable directement dans la page web, il faut soit qu'un module (ici on parle de plone, mais cela pourrait être une autre plate-forme) le reconnaisse comme une vidéo et la présente au navigateur avec les bons tags. Ce n'est pas forcément le cas...
  • s'il n'y a pas ce fameux module/plugin, la vidéo est présentée au navigateur comme un fichier "ordinaire" à télécharger. Ce n'est tout de même pas l'objectif.
  • les vidéos sont généralement de très gros fichiers. Généralement, une plate-forme web n'est pas adaptée à la gestion des gros fichiers.
  • quand l'équipe technique doit faire une mise à jour de la plateforme, se sont des volumes énormes à déplacer. Ceci peut être évité.

 

Comment procéder ?

Depuis fin juin 2014, la DSI de l'UBO a mis à la disposition de l'IUEM un espace dans lequel nous pouvons déposer des vidéos, celles-ci peuvent alors être servies par un serveur de streaming.

La méthode à employer est la suivante :

  1. Fournir à Eric Hardy la vidéo à déposer (actuellement seul un compte est habilité à déposer des vidéos dans cet espace, nous demanderons à élargir à d'autres personnes ultérieurement).
  2. Une fois que cette vidéo est déposée, insérez le code ci-dessous dans votre page WEB. Sous Plone (c'est-à-àdire avec l'éditeur TinyMCE) Il est nécessaire d'éditer le code HTML.
  3. enregistrez votre page... et voilà !

 

Code à insérer :

<video controls="controls" autoplay="autoplay">
<source src="http://live2.univ-brest.fr/vod/video/iuem/ocean.mp4" type="video/mp4"/>
Video not playing? <a href="http://live2.univ-brest.fr/vod/video/iuem/ocean.mp4">Download file</a> instead.
</video>

Remplacer ici le nom du fichier ocean.mp4 par le nom de votre vidéo.

Dans le cas d'un fichier audio MP3, le code est assez similaire :

<audio controls="controls" autoplay="autoplay">
<source src="http://live2.univ-brest.fr/vod/video/iuem/monfichieraudio.mp3" type="audio/mp3"/>
Audio not playing? <a href="http://live2.univ-brest.fr/vod/video/iuem/monfichieraudio.mp3">Download file</a> instead.
</audio>

 

Voir l'exemple...

 

ATTENTION :

Il faut noter aussi la chose suivante : certaines versions de l'éditeur TinyMCE (sous certaines versions de Plone un peu anciennes), n'acceptent pas le code que vous avez saisi. La solution consiste à éditer la page sans TinyMCE. C'est vrai, c'est pas très pratique et on va chercher à améliorer ça dans les temps qui viennent...

Mots-clés associés : ,