Les utilisateurs aiment les contenus multimédias, en particulier les vidéos. Ils peuvent être amusants et informatifs. Sur les appareils mobiles, les vidéos peuvent être un moyen plus simple de consommer des informations que le texte. Pour une bonne expérience utilisateur, les vidéos ne doivent pas utiliser plus de bande passante que celle disponible. Les utilisateurs doivent pouvoir les utiliser quel que soit l'appareil sur lequel ils les consultent. Les utilisateurs ne doivent jamais avoir à attendre que les contenus multimédias soient téléchargés. Personne n'aime appuyer sur le bouton de lecture et ne rien obtenir.
Vous avez sans doute déjà regardé des vidéos sur votre propre appareil, ce qui signifie que rien dans ce dernier paragraphe ne vous surprend. Vous devez maintenant apprendre à mettre une vidéo ou un autre fichier multimédia sur votre propre site Web. Les exigences techniques d'ajout de contenus multimédias doivent être au service de l'expérience utilisateur.
Exigences techniques
- Les versions d'un fichier multimédia sont au format Web courant, contenant à la fois des flux audio et vidéo.
- La résolution est adaptée aux appareils de vos utilisateurs.
- Le débit ne surcharge pas la bande passante réseau de vos utilisateurs.
- Le résultat est visible dans tous les principaux navigateurs à l'aide des technologies appropriées.
- Le fichier est chiffré (facultatif).
La section Multimédia de ce site Web vous aidera à respecter ces exigences techniques. Ne vous inquiétez pas si ces concepts vous semblent encore un peu abstraits. Nous les expliquerons progressivement dans tous les articles. Dans la première section, vous découvrirez les concepts de base des contenus multimédias, puis comment les ajouter au Web dans la deuxième section. Enfin, dans la dernière section, vous découvrirez les applications pratiques, avec quelques techniques avancées, de l'utilisation des contenus multimédias sur le Web.
Afficher des vidéos sur le Web
Vous pouvez adopter quatre approches pour diffuser des vidéos sur un site.
- Mettez vos vidéos en ligne sur un fournisseur d'hébergement multimédia tel que YouTube ou Vimeo. Pour ces options, vous devez intégrer leurs lecteurs sur votre site.
- Intégration auto-hébergée de base à l'aide des éléments HTML
<video>et<audio>. - Intégration plus complète à l'aide d'une bibliothèque vidéo telle que Shaka Player, JW Player ou Video.js.
- Créer votre propre serveur multimédia et votre application de streaming
Ce site présente principalement les principes de base de l'intégration de contenus multimédias. Toutefois, nous abordons certains sujets plus avancés pour vous aider à créer votre propre application de streaming multimédia. Cette tâche n'est pas simple. Nous avons donc créé une PWA multimédia avec prise en charge hors connexion à utiliser comme référence. Elle devrait vous montrer comment y parvenir et à quel point cela nécessite des efforts. L'application n'est en aucun cas une offre prête à la production ni un concurrent de services tels que YouTube ou Vimeo, mais elle vous fournira un point de départ pour apprendre quelque chose de nouveau et de stimulant.
Franchement, créer un concurrent des services multimédias hébergés nécessiterait une équipe d'ingénieurs experts et des milliers d'heures de travail. À moins que votre objectif ne soit d'entrer sur ce marché en tant que concurrent, il est préférable d'utiliser l'une des autres méthodes. Il est utile de comprendre la technologie. Même si vous ne déployez pas votre propre application ou lecteur vidéo, il est intéressant d'explorer et de tester les dernières fonctionnalités de compatibilité avec les navigateurs, ou au moins d'utiliser l'une des bibliothèques vidéo existantes.
Ce que nous allons apprendre
La collection Media se compose de trois parties. Dans cette première section, nous allons vous présenter les concepts et les informations préalables nécessaires pour ajouter des contenus multimédias à votre site. Il explique comment les fichiers multimédias sont créés, les principes de base des applications dont vous avez besoin pour préparer vos fichiers pour le Web et les concepts de streaming. La deuxième section explique comment préparer vos fichiers et les convertir dans différents formats, et éventuellement ajouter un chiffrement. Dans la dernière section, nous vous montrerons comment intégrer un fichier multimédia dans une page Web, discuter des bonnes pratiques d'activation automatique, utiliser des frameworks multimédias, mettre des vidéos hors connexion et rendre vos vidéos accessibles.
Il y a beaucoup de choses à voir, alors commençons par les principes de base des fichiers multimédias.