Vous avez correctement préparé un fichier vidéo pour le Web. Vous lui avez donné les bonnes dimensions et la bonne résolution. Vous avez même créé des fichiers WebM et MP4 distincts pour différents navigateurs.
Pour que tous les utilisateurs puissent regarder votre vidéo, vous devez l'ajouter à une page Web. Pour cela, vous devez ajouter deux éléments HTML: l'élément <video> et l'élément <source>. En plus des informations de base concernant ces balises, cet article décrit les attributs que vous devez ajouter à ces balises pour offrir une expérience utilisateur de qualité.
Spécifier un seul fichier
Bien que cela ne soit pas recommandé, vous pouvez utiliser l'élément vidéo seul. Utilisez toujours l'attribut type comme indiqué ci-dessous. Le navigateur l'utilise pour déterminer s'il peut lire le fichier vidéo fourni. Si ce n'est pas le cas, le texte entre guillemets s'affiche.
<video src="chrome.webm" type="video/webm">
<p>Your browser cannot play the provided video file.</p>
</video>
Spécifier plusieurs formats de fichiers
Comme nous l'avons vu dans les principes de base des fichiers multimédias, tous les navigateurs n'acceptent pas les mêmes formats vidéo. L'élément <source> vous permet de spécifier plusieurs formats en remplacement si le navigateur de l'utilisateur n'accepte pas l'un de ces formats.
L'exemple ci-dessous génère la vidéo intégrée qui sera utilisée comme exemple plus loin dans cet article.
<video controls>
<source src="https://storage.googleapis.com/web-dev-assets/video-and-source-tags/chrome.webm" type="video/webm">
<source src="https://storage.googleapis.com/web-dev-assets/video-and-source-tags/chrome.mp4" type="video/mp4">
<p>Your browser cannot play the provided video file.</p>
</video>
Vous devez toujours ajouter un attribut type à l'événement de balises <source>, bien que celui-ci soit facultatif. Cela garantit que le navigateur ne télécharge que le fichier qu'il peut lire.
Cette approche présente plusieurs avantages par rapport à la diffusion de différents scripts HTML ou côté serveur, en particulier sur mobile:
- Vous pouvez lister les formats par ordre de préférence.
- Le basculement côté client réduit la latence ; une seule requête est effectuée pour obtenir du contenu.
- Laisser le navigateur choisir un format est plus simple, plus rapide et potentiellement plus fiable qu'une base de données de support côté serveur avec détection des user-agents.
- Spécifier le type de chaque source de fichier améliore les performances réseau. Le navigateur peut sélectionner une source vidéo sans avoir à télécharger une partie de la vidéo pour "renifler" le format.
Ces problèmes sont particulièrement importants dans les contextes mobiles, où la bande passante et la latence sont limitées, et la patience de l'utilisateur est probablement limitée. L'omission de l'attribut type peut affecter les performances lorsque plusieurs sources comportent des types non compatibles.
Il existe plusieurs façons d'entrer dans les détails. Consultez A Digital Media Primer for Geeks pour en savoir plus sur le fonctionnement de la vidéo et de l'audio sur le Web. Vous pouvez également utiliser le débogage à distance dans les outils de développement pour comparer l'activité réseau avec des attributs de type et sans attributs de type.
Spécifier les codes temporels de début et de fin
Économisez de la bande passante et rendez votre site plus réactif: utilisez des fragments multimédias pour ajouter les heures de début et de fin à l'élément vidéo.
Pour utiliser un fragment multimédia, ajoutez #t=[start_time][,end_time] à l'URL du contenu multimédia. Par exemple, pour lire la vidéo de la 5e à 10 secondes, spécifiez:
<source src="video/chrome.webm#t=5,10" type="video/webm">
Vous pouvez également spécifier les heures dans <hours>:<minutes>:<seconds>. Par exemple, #t=00:01:05 démarre la vidéo à une minute et cinq secondes. Pour ne lire que la première minute de la vidéo, spécifiez #t=,00:01:00.
Vous pouvez utiliser cette fonctionnalité pour fournir plusieurs vues sur la même vidéo (comme des points de repère dans un DVD) sans avoir à encoder et à diffuser plusieurs fichiers.
Pour que cette fonctionnalité fonctionne, votre serveur doit prendre en charge les requêtes de plage et cette fonctionnalité doit être activée. La plupart des serveurs activent les requêtes de plage par défaut. Étant donné que certains services d'hébergement les désactivent, vous devez vérifier que les requêtes de plage sont disponibles pour l'utilisation de fragments sur votre site.
Heureusement, vous pouvez le faire dans les outils pour les développeurs de votre navigateur. Dans Chrome, par exemple, il se trouve dans le panneau "Network" (Réseau). Recherchez l'en-tête Accept-Ranges et vérifiez qu'il indique bytes. Dans l'image, j'ai dessiné un cadre rouge
autour de cet en-tête. Si bytes n'est pas la valeur, vous devez contacter votre fournisseur d'hébergement.
Inclure une image poster
Ajoutez un attribut "poster" à l'élément video afin que les spectateurs se fassent une idée du contenu dès le chargement de l'élément, sans avoir à télécharger la vidéo ni à lancer la lecture.
<video poster="poster.jpg" ...>
…
</video>
Une affiche peut également servir de remplacement si l'élément src de la vidéo ne fonctionne pas ou si aucun des formats vidéo fournis n'est compatible. Le seul inconvénient des images poster est une requête de fichier supplémentaire, qui consomme une certaine bande passante et nécessite un rendu.
Pour en savoir plus, consultez Encoder efficacement les images.
Assurez-vous que les vidéos ne dépassent pas les conteneurs
Lorsque les éléments vidéo sont trop grands pour la fenêtre d'affichage, ils peuvent dépasser de leur conteneur, ce qui empêche l'utilisateur de voir le contenu ou d'utiliser les commandes.
Vous pouvez contrôler les dimensions des vidéos à l'aide de CSS. Si le CSS ne répond pas à tous vos besoins, des bibliothèques et des plug-ins JavaScript tels que FitVids peuvent vous aider, même pour les vidéos provenant de YouTube et d'autres sources. Malheureusement, ces ressources peuvent augmenter la taille des charges utiles de réseau, ce qui peut avoir des conséquences négatives sur vos revenus et sur le portefeuille de vos utilisateurs.
Pour les utilisations simples, comme celles que je décrit ici, utilisez des requêtes média CSS pour spécifier la taille des éléments en fonction des dimensions de la fenêtre d'affichage. max-width:
100% est votre ami.
Pour le contenu multimédia dans des cadres iFrame (comme des vidéos YouTube), essayez une approche responsive (comme celle proposée par John Surdakowski).
CSS
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 0;
height: 0;
overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
HTML
<div class="video-container">
<iframe
src="//www.youtube.com/embed/l-BA9Ee2XuM"
frameborder="0"
width="560"
height="315"
></iframe>
</div>
Comparez l'exemple responsif à la version qui ne répond pas. Comme vous pouvez le voir, la version qui ne répond pas n'est pas une excellente expérience utilisateur.
Orientation de l'appareil
L'orientation de l'appareil n'est pas un problème pour les moniteurs d'ordinateur de bureau ou les ordinateurs portables, mais elle est extrêmement importante lorsque vous envisagez de concevoir des pages Web pour les appareils mobiles et les tablettes.
Safari sur iPhone permet de basculer entre les orientations portrait et paysage:
L'orientation de l'appareil sur un iPad et dans Chrome sur Android peut poser problème. Par exemple, sans aucune personnalisation, une vidéo lue sur un iPad en mode paysage se présente comme suit:
Définir la vidéo width: 100% ou max-width: 100% avec CSS peut résoudre de nombreux problèmes de mise en page liés à l'orientation de l'appareil.
Lecture automatique
L'attribut autoplay détermine si le navigateur télécharge et lit une vidéo immédiatement. Le fonctionnement précis dépend de la plate-forme et du navigateur.
Chrome: dépend de plusieurs facteurs, y compris, mais sans s'y limiter, du visionnage sur ordinateur, et du fait que l'utilisateur mobile ait ajouté votre site ou application à son écran d'accueil. Pour en savoir plus, consultez Bonnes pratiques concernant la lecture automatique.
Firefox: bloque l'ensemble des contenus vidéo et audio, mais permet aux utilisateurs d'assouplir ces restrictions pour tous les sites ou pour certains sites spécifiques. Pour en savoir plus, consultez Autoriser ou bloquer la lecture automatique des contenus multimédias dans Firefox.
Safari: auparavant, cette exigence a été assouplie dans les versions récentes. Pour en savoir plus, consultez Nouvelles règles <video> pour iOS.
Même sur les plates-formes où la lecture automatique est possible, vous devez déterminer s'il est judicieux de l'activer:
- La consommation de données peut être coûteuse.
- La lecture d'un contenu multimédia avant que l'utilisateur ne le souhaite peut augmenter la bande passante et le processeur, ce qui retarde l'affichage de la page.
- Les utilisateurs peuvent se trouver dans un contexte où la lecture d'une vidéo ou d'un son est envahissante.
Précharger
L'attribut preload indique au navigateur la quantité d'informations ou de contenu à précharger.
| Valeur | Description |
|---|---|
none |
L'utilisateur peut choisir de ne pas regarder la vidéo. Par conséquent, ne préchargez rien. |
metadata |
Les métadonnées (durée, dimensions, pistes de texte) doivent être préchargées, mais avec peu de vidéo. |
auto |
Il est recommandé de télécharger immédiatement l'intégralité de la vidéo. Une chaîne vide produit le même résultat. |
L'attribut preload a des effets différents selon les plates-formes.
Par exemple, Chrome met en mémoire tampon 25 secondes de vidéo sur les ordinateurs, mais aucune sur iOS ou Android. Cela signifie que sur mobile, il peut y avoir des retards au démarrage de la lecture qui ne se produisent pas sur ordinateur. Pour en savoir plus, consultez la page Lecture rapide avec préchargement audio et vidéo ou le blog de Steve Souders.
Maintenant que vous savez comment ajouter des contenus multimédias à votre page Web, découvrez l'accessibilité multimédia. Dans ce cas, vous pouvez ajouter des sous-titres à votre vidéo pour les malentendants ou lorsque la lecture de l'audio n'est pas une option viable.