Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Utiliser DASH avec les vidéos en HTML

Dynamic Adaptive Streaming over HTTP (DASH) est un protocole de streaming adaptatif : il permet de changer le débit de la vidéo en fonction des performances réseau afin que la vidéo ne soit pas interrompue lors de la lecture.

Utiliser DASH, côté serveur

Pour commencer, il faut convertir la vidéo WebM en manifeste DASH avec les vidéos associées aux différents débits. Pour cela, on aura besoin de :

1. Utiliser un fichier WebM afin de créer une piste audio et plusieurs fichiers vidéo

Dans les lignes d'exemple qui suivent, on utilise le fichier de départ in.video. Ce fichier peut être n'importe quel conteneur avec au moins un flux audio et un flux vidéo qui peut être décodé par ffmpeg.

On créera la piste audio avec :

ffmpeg -i in.video -vn -acodec libvorbis -ab 128k mon_audio.webm

On créera les pistes vidéos avec :

ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 -g 150 -tile-columns 4 -frame-parallel 1  -f webm -dash 1 \
-an -vf scale=160:190 -b:v 250k video_160x90_250k.webm 

ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 -g 150 -tile-columns 4 -frame-parallel 1  -f webm -dash 1 \
-an -vf scale=320:180 -b:v 500k video_320x180_500k.webm

ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 -g 150 -tile-columns 4 -frame-parallel 1  -f webm -dash 1 \
-an -vf scale=640:360 -b:v 750k  video_640x360_750k.webm

ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 -g 150 -tile-columns 4 -frame-parallel 1  -f webm -dash 1 \
-an -vf scale=640:360 -b:v 1000k  video_640x360_1000k.webm

ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 -g 150 -tile-columns 4 -frame-parallel 1  -f webm -dash 1 \
-an -vf scale=1280:720 -b:v 1500k  video_1280x720_1500k.webm

Autrement, on peut utiliser cette commande :

ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 \
-g 150 -tile-columns 4 -frame-parallel 1  -f webm -dash 1 \
-an -vf scale=160:190 -b:v 250k video_160x90_250k.webm \
-an -vf scale=320:180 -b:v 500k video_320x180_500k.webm \
-an -vf scale=640:360 -b:v 750k  video_640x360_750k.webm \
-an -vf scale=640:360 -b:v 1000k  video_640x360_1000k.webm \
-an -vf scale=1280:720 -b:v 1500k  video_1280x720_1500k.webm

2. Aligner les fragments pour permettre de changer de flux

Pour la vidéo, on pourra utiliser la commande suivante :

samplemuxer -i ma_video-250kbps.webm -o ma_video-250kbps-final.webm
etc.

Bien qu'on ne change pas de flux audio, il est nécessaire de traiter la piste avec samplemuxer. Afin que cela fonctionne sur Chrome, il est nécessaire que le numéro de piste soit différent de ceux utilisés par les fichiers vidéo (avec la valeur 0 par exemple).

samplemuxer -i mon_audio.webm -o mon_audio-final.webm -output_cues 1 -cues_on_audio_track 1 -max_cluster_duration 2 -audio_track_number

3. Créer le manifeste

webm_dash_manifest -o ma_video_manifest.mpd \
  -as id=0,lang=eng \
  -r id=0,file=ma_video-250kbps-finale.webm \
  -r id=1,file=ma_video-100kbps-finale.webm \
  -r id=2,file=ma_video-50kbps-finale.webm \
  -as id=1,lang=eng \
  -r id=4,file=mon_audio-final.webm

On pourra alors placer le fichier de manifeste créé à côté des fichiers vidéo sur le serveur web ou sur le CDN. DASH fonctionne via HTTP donc il suffit simplement que votre serveur prennent en charge les requêtes d'intervalles d'octets (byte range requests) et qu'il puisse servir les fichiers .mpd avec mimetype="application/dash+xml".

Utiliser DASH, côté client

Il faut modifier la page web pour que celle-ci pointe d'abord vers le manifeste, avant le fichier vidéo en tant que tel :

<video>
  <source src="movie.mpd">
  <source src="movie.webm">
  Votre navigateur ne prend pas en charge les vidéos HTML.
</video>

C'est tout !
Si le navigateur utilisé prend en charge DASH/MSE, la diffusion de la vidéo sera maintenant adaptative.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support simple (via MSE) 23 42 (42) 11 20 8.0
Fonctionnalité Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support simple (via MSE) ? 42.0 (42) ? ? ?

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight, nicoo
 Dernière mise à jour par : SphinxKnight,