Vous êtes à :
  1. Accueil > 
  2. Nos techniques > 
  3. Présenter des vidéos
Passer le menu Aller au pied de page

Licences Joueb English version Accessibilité

Les techniques relatives à la vidéo

En parallèle de son compte vimeo, les vidéos chez micr0lab sont diffusées grâce à Video.js. Cette page explique brièvement comment mettre en place sur un site un lecteur vidéo avec cet outil. Les outils employés pour manipuler les fichiers vidéos sont eux décrits par là.

Sommaire : Viméo ?Convertir ?Mise en placeRemarques supplémentaires

 

Remarques préliminaires à propos de vimeo

micr0lab se méfie des services externes lorsque ceux-ci ne sont pas exempts de publicités, faussement gratuits ou de vastes laboratoires des pratiques de leurs inscrits en vue d’optimisation publicitaire.

Vimeo fait de la réclame incessante pour son offre « pro », oblige à être inscrit et connecté pour télécharger une vidéo, affiche des « Sponsored Links », appartient à un groupe (I.A.C.) côté en bourse. Par contre la possibilité de proposer du contenu en haute-définition (une vidéo par semaine), n'autoriser que le contenu crée par les utilisateurs, autoriser le « commercial purpose » si on est a « small-scale independent production company, non-profit, or artist » sont des atouts intéressants. La facilité de la mise en place, la bande passante et quelques autres avantages ont fait pencher la balance en leur faveur, même si nous restons méfiants.

Un dernier mot — technique — sur le lecteur embarqué de viméo : celui-ci n’est pas conforme aux recommandations du W3C du fait des attributs « allowfullscreen », « webkitallowfullscreen » et « mozallowfullscreen » (Attribute allowfullscreen not allowed on element iframe at this point). Le docteur html et tools4noobs proposent des solutions, mais qui ne semblent pas valides non plus en html5 contrairement à cette solution, que nous avons appliqué pendant un temps.

 

Conversion

Pour une compatibilité optimale, votre vidéo doît être proposée en trois formats : ogv, mp4 et webm (si vous souhaitez ignorer les navigateurs pré-2014 et Opera mini, alors le format mp4 est suffisant). Le premier pas est donc de convertir votre vidéo source, nous allons ici employer FFmpeg. Vous pouvez utiliser une interface graphique pour ce logiciel, comme MiroVideoConverter/ (pour Windows et Mac).

Si vous décidez d’employer la ligne de commande, un très bon tableau résumant les options et les formats peut être trouvé à https://develop.participatoryculture.org/index.php/ConversionMatrix.

Nous allons ici partir d’une vidéo au format 3gp depuis un terminal sous linux :

Vers webm

ffmpeg -i /chemin/video_source.3gp -c:v libvpx-vp9 -pass 1 -b:v 1000K -threads 1 -speed 4 \
-tile-columns 0 -frame-parallel 0 \
-g 9999 -aq-mode 0 -an -f webm /dev/null

ffmpeg -i /chemin/video_source.3gp -c:v libvpx-vp9 -pass 2 -b:v 1000K -threads 1 -speed 0 \
-tile-columns 0 -frame-parallel 0 -auto-alt-ref 1 -lag-in-frames 25 \
-g 9999 -aq-mode 0 -c:a libopus -b:a 64k -f webm "/chemin/video_sortie.webm
Cf. https://corydowdy.com/blog/converting-mp4-to-webm.

Vers mp4

ffmpeg -i /chemin/video_source.3gp -acodec aac -vcodec libx264 \
 -pix_fmt yuv420p -profile:v baseline -level 3 /chemin/video_sortie.mp4

Vers ogv

ffmpeg -i /chemin/video_source.3gp -acodec libvorbis -b 1500k /chemin/video_sortie.ogv

Quelques explications :

À signaler que vous pouvez également utiliser l’option -metadata key=value, dont voici quelques exemples :

 

Mise en place

Toutes les informations utiles (mais en anglais) se trouvent sur dans la documentation de Video.js. Cette façon d’afficher des vidéos est compatible HTML5, relativement simple à mettre en place, et hautement compatible : le top !

 

Mais aussi…

Pour compresser les vidéos, fonctionne assez bien:

ffmpeg -i input.mp4 -vcodec libx265 -crf 28 output.mp4

À ce que j’en sais, ça marche avec tous les formats.

Et pour générer un aperçu au hasard d’une vidéo, vous pouvez utiliser le script qui suit.

#!/bin/bash

if [[ $1 ]]
then
    # Quelques variables à propos de notre argument
    filename=$(basename "$1")
    filename=${filename%.*}
    directory=$(dirname "$1")
    
    
    # On établit la durée (au format hh:mm:ss) de la vidéo
    duration=$(ffmpeg -i "$1" 2>&1 | grep Duration | awk '{print $2}' | tr -d ,)
    # On sépare les trois champs
    minutes=${duration%:*}
    hours=${minutes%:*}
    minutes=${minutes##*:}
    seconds=${duration##*:}
    seconds=${seconds%.*}

    # On définit une heure comme 3600 secondes, et une minute comme 60 secondes:
    hours=$((hours*3600))
    minutes=$((minutes*60))

    # On calcule la durée totale de la vidéo, en secondes
    total=$(expr $hours + $minutes + $seconds)
    
    # On choisit un nombre de secondes "légal" et aléatoire.
    number=$RANDOM
    let "number %= $total"
    
    # Finalement, on génère l'image avec ffmpeg:
    echo "On génére un aperçu à $number secondes de $1"
    ffmpeg -i "$1" -filter:v bwdif=mode=send_field:parity=auto:deint=all -an -ss $number -t 00:00:01 -r 1 -y -vcodec mjpeg -f mjpeg -loglevel error "$directory/$filename.jpg" 2>&1
else
    echo "Il me faut un argument! Par exemple, './apercu.sh mu0l_0053/mu0l_0053_8.mkv'."
fi

Télécharger ce script.

Contact :

Contact Plan Lettre F.a.q. C.G.U.