Accueil > Ressources > Outils techniques et méthodologies > BL VIDEO CMS v0.1 : mini plateforme de streaming vidéo

Outils techniques et méthodologies

Je mets en partage ici des outils et méthodologies techniques que j’ai construits pour mon activité professionnelle. Certains articles présupposent des connaissances techniques.

BL VIDEO CMS v0.1 : mini plateforme de streaming vidéo

16 juillet 2018

Mini plateforme d’affichage automatique de fichiers vidéo en ligne pour votre site web.

Par Benoît Labourdette. Version 0.1 au 22 juillet 2018.

Préambule technique sur la vidéo en ligne

On croit souvent, à tort, que les plateformes de vidéo que sont YouTube, Vimeo ou Dailymotion sont indispensables pour pour pouvoir mettre des vidéos en ligne lisibles en streaming. Il n’en est rien. On peut mettre des vidéos en ligne sur son propre serveur (payant ou gratuit), tout comme on y met textes et photos. La seule chose, c’est qu’il faut préalablement « encoder » les vidéos en format léger et compatible (pour ce faire le logiciel gratuit handbrake est vraiment l’un des outils les plus simples et efficaces).

Dès lors que les vidéos sont « encodées », dans le format MP4 qui les rend lisibles par les navigateurs web, il suffit de déposer les fichiers sur son serveur (via un logiciel de FTP) pour qu’ils puissent être directement lisibles en streaming.

Deux détails essentiels pour que cela fonctionne :

  • Ne pas oublier de cocher la case « web optimized » dans handbrake (c’est ce qui permet le streaming).
  • Prendre garde à ce que le fichier ne « pèse » pas plus de 10 à 20 Mo / minute (pour qu’il « passe » bien dans la plupart des connexions).

Prérequis

  • Avoir un hébergement web (payant comme O2Switch ou gratuit comme Free pages perso).
  • Savoir utiliser un logiciel de FTP comme Filezilla (cela s’apprend en 5 minutes).
  • Savoir utiliser un logiciel de texte brut, comme Notepad2-mod ou Notepad++ sous Windows.
  • Cette plateforme ne fonctionne que sur un serveur web, pas sur un ordinateur local, car elle est programmée en PHP (langage interprété par tous les hébergeurs). Sauf si vous installez un serveur (comme Apache) sur votre ordinateur local, bien-sûr.

Pourquoi ce projet de mini-plateforme vidéo

  • Le but est d’avoir un mini-site presque automatique pour afficher de façon agréable et invitante des fichiers MP4 encodés légers (avec handbrake).
  • Avant je copiais des fichiers sur un serveur FTP et les gens pouvaient y accéder. Cela fonctionnait, tout en étant très spartiate : il y avait juste la liste des fichiers, souvent répartie dans des sous-dossiers pour plus de clarté, mais « sèche », sans aucune éditorialisation possible :
    <span class="caps">PNG</span> - 38.3 ko
  • Avec ce mini CMS (Content Management System), que j’ai nommé BL_VIDEO_CMS, l’usage est presque aussi simple que de déposer des fichiers MP4 dans un FTP. Mais le CMS génère de façon quasi automatique de jolies pages que l’on peut éditorialiser.
  • Le but est de ne pas perdre de temps pour mettre les fichiers en ligne, par exemple après une intervention pédagogique, et pourtant de pouvoir immédiatement offrir une jolie interface, ce qui est important pour la valorisation et la pérennité des productions.

Structure de fonctionnement

Deux fonctionnements possibles :

  • Avec arborescence : il y a un dossier « racine » pour la page d’accueil, qui contient des sous-dossiers dans lesquels on dépose les fichiers vidéo. Par exemple pendant l’été 2018 j’ai animé des ateliers de réalisation de films dans plusieurs centres de vacances CCAS : je souhaitais une page d’accueil qui permette d’accéder aux films réalisés dans chaque centre.
  • Page unique : mais si on a juste une seule liste de films, donc besoin d’une seule page, j’ai fait une déclinaison du CMS pour page unique, qui fonctionne sur le même principe de façon plus simple.

Dans cet article j’explique le fonctionnement du CMS avec arborescence. La page unique est plus simple, vous pouvez la télécharger, elle parle d’elle-même avec l’exemple qu’elle contient.

Ce que l’on doit préparer pour que cela marche

Au lieu d’avoir seulement un sous-dossier /mp4/ dans mon ordinateur dans lequel je prépare les fichiers MP4 encodés avec handbrake, j’ai trois dossiers : /mp4/, /jpg/ et /txt/, dans lesquels je vais mettre ce qu’il faut pour qu’ensuite le CMS affiche les films de façon automatique :

  • Les fichiers vidéo encodés en MP4 légers (10 à 20Mo par minute). Dans le dossier : /mp4/.
  • Créer une vignette JPEG légère (720 pixels de large par exemple) pour chaque film. On les range dans le dossier /jpg/.
  • Créer un fichier TXT correspondant à chaque film. Rangés dans le dossier /txt/. Ce fichier est constitué de trois lignes :
    1. Le titre à afficher
    2. Le nom du réalisateur.
    3. Le synopsis du film.

Important : les noms des fichiers mp4, jpg et txt doivent être exactement les mêmes, et ne doivent pas avoir de majuscules, caractères accentués ni espaces.

On peut les numéroter les dossiers et les fichiers si on veut un ordre d’affichage.

On doit préparer aussi :

  • Écrire deux petit textes : pour la page de chaque sous-dossier et pour la page d’accueil.
  • Choisir un logo pour chaque page ainsi que pour la page d’accueil.

Puisqu’une image vaut mille mots, voici un exemple concret d’arborescence :
<span class="caps">PNG</span> - 49.9 ko

Structure des fichiers et dossiers

Les fichiers qu’on trouve à la racine sont :

  • index.php
  • logo_page.jpg : le logo de la page d’accueil, et du site.
  • texte_page.jpg : le texte qui s’affichera en haut de la page d’accueil.

Et il y a autant qu’on veut de sous-dossiers identiques de ce type :

  • /01_morgat/
    • /jpg/
    • /mp4/
    • /txt/
    • index.php

Donc, on voit qu’il y a deux fichiers index.php distincts : celui qui se trouve à la racine et celui qui se trouve dans chaque sous-dossier. Ce CMS est constitué de ces deux fichiers index.php, tout simplement, et d’une structure de dossiers et fichiers dans lesquels ils vont puiser.

Détails du fonctionnement

index.php (dans un sous-dossier)

Il a besoin qu’il y ait trois sous-dossiers :

  • /jpg/ : dedans il y a les vignettes des films + un fichier logo_page.jpg, qui est le logo de cette page (utilisé en page d’accueil pour faire les liens).
  • /mp4/ : dedans il y a juste les fichiers MP4 des films.
  • /txt/ : dedans il y a les fichiers textes des films + deux autres fichiers :
    • texte_page.txt : texte qui s’affiche en haut de la page
    • texte_accueil.txt : ce qui s’affiche en page d’accueil ainsi que dans le menu de droite. Fichier en deux lignes : nom du centre de vacances + dates.

index.php (à la racine)

Il a besoin de tout le monde, au moins un sous-dossier avec tout ce qu’il faut dedans, et puis ses deux fichiers à lui à la racine :

  • logo_page.jpg : le logo de la page d’accueil, et du site.
  • texte_page.jpg : le texte qui s’affichera en haut de la page d’accueil (sur une seule ligne pour le moment).

Résumé : ce qu’on doit faire pour mettre en ligne les vidéos

  1. Encoder les vidéos (en MP4 léger, avec handbrake avec case « Web optimize » cochée. Débit max : 10 à 20Mo / minute).
  2. Créer une vignette par vidéo (JPEG, 720 pixels de large maxi, fichiers super légers).
  3. Créer un fichier TXT par vidéo (avec titre + réalisateur + synopsis, sur trois lignes).
  4. Choisir un logo par sous-dossier (JPEG super léger aussi).
  5. Créer un texte par sous-dossier (fichier TXT avec le texte qui sera en haut).
  6. Choisir un logo général.
  7. Créer un texte général (sur une seule ligne).

Voilà, on prépare tout ça, c’est quand même très rapide. Puis on crée les dossiers qui vont bien, et enfin on met les deux fichiers index.php. Et le site marche tout de suite !

Téléchargement

Vous trouverez ici le CMS à télécharger. Il contient un exemple avec un film et un sous-dossier. Vous n’aurez plus qu’à le recopier dans un dossier chez votre hébergeur pour qu’il marche tout de suite. A vous de le personnaliser !

Vous trouverez les deux versions : une version arborescente et une version pour une seule page de vidéos :
www.benoitlabourdette.com/_docs/ ?dir=projets/2018/2018_bl_video_cms.

Exemples

Plateforme vidéo avec arborescence :

Plateforme vidéo avec page unique :

Template CSS employé

Pour la mise en forme graphique, je me suis appuyé sur un template CSS du W3C :


Voir aussi