Les utilisateurs aiment les médias, en particulier les vidéos ; ils peuvent être amusants et informatifs. 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 nécessiter plus de bande passante que la bande passante disponible. Les utilisateurs doivent pouvoir les utiliser quel que soit l'appareil avec lequel ils les consultent. Les utilisateurs ne doivent jamais avoir à attendre que le contenu multimédia soit téléchargé. Personne n'aime quand on appuie sur le bouton de lecture et rien ne se passe.
Vous avez sans doute regardé des vidéos sur votre propre appareil, ce qui signifie que rien de 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 liées à l'ajout de contenus multimédias doivent être en adéquation avec l'expérience utilisateur.
Exigences techniques
- Les versions d'un fichier multimédia sont proposées dans 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 affichable dans 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 détaillerons progressivement dans tous les articles. Dans la première section, vous découvrirez les concepts de base des médias. Dans la deuxième section, vous apprendrez à ajouter des contenus multimédias sur le Web. Dans la dernière section, vous découvrirez des applications pratiques de l'utilisation des médias sur le Web ainsi que quelques techniques avancées.
Affichage de vidéos sur le Web
Quatre approches sont possibles pour diffuser des vidéos sur un site.
- Mettez en ligne vos vidéos auprès d'un fournisseur d'hébergement multimédia tel que YouTube ou Vimeo. Ces options nécessitent l'intégration de leurs lecteurs dans votre site.
- Intégration de base auto-hébergée à 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 propre 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. La tâche n'est pas simple. C'est pourquoi nous avons créé une PWA multimédia compatible avec le mode hors connexion et que vous pouvez utiliser comme référence. Elle doit vous montrer comment y parvenir et vous indiquer l'ampleur de la tâche. L'application n'est en aucun cas une offre prête pour 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 pour les 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 de pénétrer 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 s'il est inutile de déployer votre propre application ou votre propre lecteur vidéo, il peut être utile d'explorer et de tester des navigateurs de pointe ou, au minimum, d'utiliser l'une des bibliothèques vidéo existantes.
Ce que nous allons apprendre
La collection multimédia se compose de trois parties. Dans cette première section, nous allons vous présenter les concepts et les conditions préalables à l'ajout de supports sur votre site. Cela inclut l'explication de l'organisation 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 comment ajouter éventuellement le chiffrement. Dans la dernière section, nous allons vous montrer comment intégrer un fichier multimédia dans une page Web, évoquer les bonnes pratiques de lecture automatique, utiliser des frameworks multimédias, enregistrer des vidéos hors connexion et rendre vos vidéos accessibles.
La route est vaste. Commençons donc par la présentation des principes de base des fichiers multimédias.