Les utilisateurs aiment les contenus multimédias, en particulier les vidéos. Ils peuvent être amusants et instructifs. Sur les appareils mobiles, les vidéos peuvent être un moyen plus facile de consommer des informations que du texte. Pour une expérience utilisateur de qualité, les vidéos ne doivent pas dépasser la bande passante disponible. Les utilisateurs doivent pouvoir les utiliser quel que soit l'appareil avec lequel ils les consultent. Les utilisateurs ne devraient jamais avoir à attendre le téléchargement d'un contenu multimédia. Personne n'aime ça quand ils appuient sur le bouton de lecture et que rien ne se passe.
Vous avez sans doute regardé des vidéos sur votre propre appareil, ce qui signifie que rien du dernier paragraphe ne vous surprend. Maintenant, vous devez apprendre à placer une vidéo ou un autre fichier multimédia sur votre propre site web. Les exigences techniques liées à l'ajout de médias doivent être conformes à l'expérience utilisateur.
Les exigences techniques
- Les versions d'un fichier multimédia correspondent à des formats Web courants 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 sur tous les principaux navigateurs utilisant les technologies appropriées.
- Le fichier est chiffré (facultatif).
La section Médias de ce site Web vous aidera à répondre à ces exigences techniques. Ne vous inquiétez pas si ces concepts sont encore un peu abstraits. Nous les expliquerons progressivement dans tous les articles. Dans la première section, vous allez découvrir les concepts de base des médias, puis comment ajouter des contenus multimédias sur le Web dans la deuxième. Enfin, dans la dernière section, vous découvrirez des applications pratiques, accompagnées de quelques techniques avancées, de l'utilisation de médias sur le Web.
Affichage de la vidéo sur le Web
Quatre approches sont possibles pour la diffusion de vidéos sur un site.
- Mettez vos vidéos en ligne sur un fournisseur d'hébergement multimédia tel que YouTube ou Vimeo. Ces options nécessitent que vous intégriez leurs lecteurs dans 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 de vidéos telle que Shaka Player, JW Player ou Video.js
- Créer votre propre serveur multimédia et votre application de streaming
Ce site traite principalement des bases de l'intégration de médias. Toutefois, nous abordons des sujets plus avancés pour vous aider à créer votre propre application de streaming multimédia. L'effort à faire n'est pas chose aisée. Nous avons donc créé une PWA média avec un fonctionnement hors connexion comme référence, qui devrait à la fois vous montrer comment y parvenir et connaître les efforts nécessaires. L'application n'est en aucun cas une offre prête pour la production ou un concurrent de services tels que YouTube ou Vimeo, mais elle vous fournira un point de départ pour apprendre quelque chose de difficile et de nouveau.
Honnêtement, créer un concurrent pour les services de médias hébergés nécessiterait une équipe d'ingénieurs experts et des milliers d'heures de travail. À moins que vous ne souhaitiez entrer sur ce marché en tant que concurrent, il est préférable d'utiliser l'une des autres méthodes. Il est bon de comprendre la technologie. Même si vous ne déployez pas votre propre application ou votre propre lecteur vidéo, il est utile d'explorer et de tester des fonctionnalités de pointe en matière 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 multimédia se compose de trois parties. La première section présente les concepts et les conditions préalables à l'ajout de médias à votre site. Cela inclut l'explication de l'assemblage des fichiers multimédias, les principes de base des applications dont vous aurez besoin pour préparer vos fichiers pour le Web, ainsi que 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 allons vous montrer comment intégrer un fichier multimédia à une page Web. Nous verrons également les bonnes pratiques concernant la lecture automatique, l'utilisation de frameworks multimédias, la possibilité d'ajouter des vidéos au mode hors connexion et de les rendre accessibles.
Nous avons beaucoup de chemin à parcourir. Commençons donc par les principes de base des fichiers multimédias.