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 les internautes puissent voir votre vidéo, vous devez l'ajouter à une page Web. Pour ce faire, vous devez ajouter deux éléments HTML : l'élément <video> et l'élément <source>. En plus des principes de base de ces balises, cet article explique les attributs que vous devez ajouter à ces balises pour créer une bonne expérience utilisateur.
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 inclus 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
Rappelez-vous que, comme indiqué dans Principes de base des fichiers multimédias, tous les navigateurs ne sont pas compatibles avec les mêmes formats vidéo. L'élément <source> vous permet de spécifier plusieurs formats de remplacement au cas où le navigateur de l'utilisateur n'en accepterait pas un.
L'exemple ci-dessous produit la vidéo intégrée utilisée comme exemple plus loin dans cet article.
<video controls>
<source src="chrome.webm" type="video/webm">
<source src="chrome.mp4" type="video/mp4">
<p>Your browser cannot play the provided video file.</p>
</video>
Vous devez toujours ajouter un attribut type aux balises <source>, même s'il est facultatif. Cela garantit que le navigateur ne télécharge que le fichier qu'il est capable de 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 changement côté client réduit la latence : une seule requête est effectuée pour obtenir le contenu.
- Laisser le navigateur choisir un format est plus simple, plus rapide et potentiellement plus fiable que d'utiliser une base de données de compatibilité côté serveur avec détection de l'user-agent.
- La spécification du type de chaque source de fichier améliore les performances du réseau. Le navigateur peut sélectionner une source vidéo sans avoir à télécharger une partie de la vidéo pour "détecter" le format.
Ces problèmes sont particulièrement importants dans les contextes mobiles, où la bande passante et la latence sont limitées, et où la patience de l'utilisateur est probablement limitée. L'omission de l'attribut type peut affecter les performances lorsqu'il existe plusieurs sources avec des types non compatibles.
Il existe plusieurs façons d'examiner 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 les attributs de type et sans les attributs de type.
Spécifier les codes temporels de début et de fin
Économisez de la bande passante et améliorez la réactivité de votre site : utilisez des fragments multimédias pour ajouter des 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 média. Par exemple, pour lire la vidéo de la 5e à la 10e seconde, spécifiez :
<source src="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.
Cette fonctionnalité vous permet de proposer plusieurs vues d'une même vidéo (comme les points de repère d'un DVD) sans avoir à encoder et à diffuser plusieurs fichiers.
Pour que cette fonctionnalité soit opérationnelle, votre serveur doit accepter 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 utiliser des 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 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 la valeur n'est pas bytes, vous devrez contacter votre fournisseur d'hébergement.
Incluez une image poster
Ajoutez un attribut d'affiche à l'élément video pour que les spectateurs aient une idée du contenu dès que l'élément se charge, sans avoir à télécharger la vidéo ni à lancer la lecture.
<video poster="poster.jpg" ...>
…
</video>
Une affiche peut également servir de solution de remplacement si la vidéo src est défectueuse ou si aucun des formats vidéo fournis n'est compatible. Le seul inconvénient d'une image d'affiche est qu'elle nécessite une requête de fichier supplémentaire, ce qui consomme de la bande passante et nécessite un rendu.
Pour en savoir plus, consultez Encoder efficacement les images.
S'assurer que les vidéos ne dépassent pas des 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 de la vidéo à l'aide de CSS. Si le CSS ne répond pas à tous vos besoins, les bibliothèques et 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 de la charge utile de votre réseau, ce qui peut avoir des conséquences négatives sur vos revenus et le portefeuille de vos utilisateurs.
Pour les utilisations simples comme celles que je décris 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 les contenus multimédias dans des iFrames (comme les 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 responsive à la version non responsive. Comme vous pouvez le voir, la version non responsive n'offre pas une expérience utilisateur optimale.
Orientation de l'appareil
L'orientation de l'appareil n'est pas un problème pour les écrans d'ordinateur de bureau ou les ordinateurs portables, mais elle est extrêmement importante pour la conception de pages Web pour les appareils mobiles et les tablettes.
Safari sur iPhone gère bien le passage du mode portrait au mode paysage :
L'orientation de l'appareil sur un iPad et 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 les propriétés width: 100% ou max-width: 100% de la vidéo 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, si la consultation s'effectue sur un ordinateur et si l'utilisateur mobile a ajouté votre site ou votre application à son écran d'accueil. Pour en savoir plus, consultez les bonnes pratiques concernant la lecture automatique.
Firefox : bloque toutes les vidéos et tous les sons, mais permet aux utilisateurs d'assouplir ces restrictions pour tous les sites ou pour des sites spécifiques. Pour en savoir plus, consultez Autoriser ou bloquer la lecture automatique des contenus multimédias dans Firefox.
Safari : historiquement, un geste de l'utilisateur était requis, mais cette exigence a été assouplie dans les versions récentes. Pour en savoir plus, consultez New <video> Policies for iOS (Nouvelles règles concernant la balise <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 de contenus multimédias avant que l'utilisateur ne le souhaite peut monopoliser la bande passante et le processeur, et ainsi retarder l'affichage de la page.
- Les utilisateurs peuvent se trouver dans un contexte où la lecture de vidéos ou de contenus audio est intrusive.
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. Ne préchargez donc rien. |
metadata |
Les métadonnées (durée, dimensions, pistes de texte) doivent être préchargées, mais avec un minimum de vidéo. |
auto |
Il est préférable de télécharger l'intégralité de la vidéo immédiatement. 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 ordinateur, mais aucune sur iOS ou Android. Cela signifie que sur mobile, il peut y avoir des retards de démarrage de la lecture qui ne se produisent pas sur ordinateur. Pour en savoir plus, consultez 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, il est temps de découvrir l'accessibilité des contenus multimédias, qui vous permettra d'ajouter des sous-titres à votre vidéo pour les personnes malentendantes ou lorsque la lecture de l'audio n'est pas une option viable.