Vidéos HTML5 10 choses que les concepteurs doivent savoir
La révolution HTML5 enthousiasme les concepteurs Web de toutes les régions du monde. Les nouvelles spécifications prennent en charge des dizaines d'éléments et d'attributs pour la construction de sites Web sémantiques. Ces nouvelles fonctionnalités comprennent des balises multimédia pour les formats audio et vidéo.
Ces dernières années, un lecteur multimédia basé sur Flash était plus que suffisant pour la diffusion en continu sur le Web et cette technologie était toujours nécessaire pour prendre en charge les navigateurs traditionnels. Heureusement, les normes modernes ont évolué et l'inclusion de la vidéo HTML5 ouvre la voie à des dizaines de nouvelles opportunités..
Dans ce guide, j'aimerais proposer une introduction à la vidéo HTML5 pour le Web. Il vous faudra un peu de pratique pour comprendre le lecteur natif intégré au navigateur et toutes ses fonctionnalités. Et le meilleur moyen de se familiariser est de plonger la tête la première!
1. Types de médias
Lorsque vous travaillez avec un lecteur vidéo flash, il est courant d'associer tous les formats vidéo au format .flv. Bien que cela fonctionne, la plupart des fichiers flv ne peuvent pas conserver la qualité des formats de fichiers / codecs plus avancés. HTML5 prend en charge 3 types de vidéos importants: MP4, WebM et Ogg / Ogv. Le type de fichier MPEG-4 est généralement codé en H.264, ce qui permet la lecture sur des lecteurs Flash tiers. Cela signifie que vous n'avez pas besoin de conserver une copie vidéo .flv pour prendre en charge une méthode de secours! WebM et Ogg sont deux types de fichiers beaucoup plus récents liés à la vidéo HTML5. Ogg utilise le codage Theora basé sur le format de fichier audio standard à code source ouvert. Ceux-ci peuvent être enregistrés avec une extension .ogg ou .ogv.
WebM est un projet de Google sur lequel vous pouvez en savoir plus sur le site Web de WebM Project. Le format est déjà pris en charge par Opera, Google Chrome, Firefox 4+ et, plus récemment, par Internet Explorer 9. Il est encore inconnu de la plupart des professionnels du Web, mais WebM est le principal format de média vidéo à l'avenir de la vidéo Web..
2. Support du navigateur
Alors, lequel de ces types de fichiers avez-vous besoin pour votre site Web? Dans l’idéal, les trois seraient excellents car ils fourniraient une gamme complète d’assistance. Pourtant, cela n’est pas réaliste et, en fait, vous ne pouvez couvrir que deux bases. Voici un aperçu de ce qui fonctionne pour chaque navigateur:
- Mozilla Firefox - WebM, Ogg
- Google Chrome - WebM, Ogg
- Opera - WebM, Ogg
- Safari - MP4
- Internet Explorer 9 - MP4
- Internet Explorer 6-8 - Pas de HTML5, Flash uniquement!
Si vous vous en souvenez, j'ai déjà mentionné que la plupart des lecteurs de vidéo flash prend en charge les fichiers MP4 tant qu'ils sont codés au format H.264. En tant que tel, chacun de ces navigateurs intégrera MP4 + Flash en dernier recours. Cela signifie que vous devez seulement créer deux différents formats vidéo pour supporter tous les navigateurs. MP4 pour Safari / IE9 et un choix entre WebM ou Ogg pour le reste.
À mon avis, je recommande fortement de rester avec le format WebM. Il a quelques grands noms derrière le projet (notamment Google) et a gagné beaucoup de traction dans la communauté HTML5. Ogg / Ogv sera pris en charge, mais perdra très probablement en popularité face aux fichiers plus petits de WebM. Vous pouvez lire un article sur l’avenir de la vidéo sur le Web, écrit par Sean Golliher..
3. Intégration de vidéos HTML5 simples
Voyons maintenant la syntaxe requise pour intégrer un exemple de code. Tout ce dont nous avons besoin est la balise vidéo HTML5 pour référencer chaque URL de film..
Remarquez le les contrôles et lecture automatique les attributs ne doivent pas nécessairement être définis avec des valeurs. J'ai aussi inclus un affiche attribuez le préchargement d’une image sur le lecteur vidéo avant la diffusion. Ceci est un aperçu commun avec de nombreux lecteurs Web.
Nous proposons des formats MP4 et WebM internes à l'élément vidéo. Si aucun de ceux-ci ne peut être chargé, nous affichons une erreur pour que l'utilisateur mette à jour son navigateur..
4. Offrir une solution de secours Flash
L'exemple ci-dessus est parfait pour tous les navigateurs Web conformes aux normes. Cependant, nous devons également considérer que le monde n'est pas toujours à la pointe de la technologie. Nous devons aider les utilisateurs des anciennes versions de Safari, Mozilla Firefox et surtout Internet Explorer..
Le meilleur moyen d'y parvenir consiste à utiliser un lecteur de secours Flash. Ceux-ci peuvent être ajoutés en utilisant le intégrer ou objet balises pour référencer un fichier tiers .swf. JW Player et Flowplayer sont deux solutions open source gratuites que vous pouvez envisager. Mais jetez également un œil aux lecteurs vidéo haut de gamme sur ActiveDen, qui peuvent coûter aussi peu que 15 $ à 20 $.
Modifions maintenant le code ci-dessus pour inclure un lecteur Flash de secours prenant en charge presque tous les navigateurs existants..
5. Prise en charge des appareils mobiles
Ce sujet fait toujours l’objet de débats, car le secteur de la téléphonie mobile est très jeune. Apple a annoncé la prise en charge de MP4 sur les appareils Mac et iOS. Cela signifie que vous pouvez diffuser nativement des fichiers vidéo au format .mp4 sur votre iPad, iPhone ou iPod Touch dans l'interface vidéo standard. Cela couvre beaucoup de parts de marché.
Récemment, les appareils Android avaient du mal à atteindre ce même niveau de support. Cependant, Google a finalement adopté le streaming Web .mp4 qui exploite désormais presque tous les utilisateurs mobiles. Et puisque Flash n’est pas une option, MP4 est la meilleure solution disponible. C'est pourquoi vous souhaitez tout d'abord intégrer le code .mp4 afin que les appareils iOS puissent reconnaître immédiatement le fichier..
6. Agent utilisateur Safari
Un bogue à mentionner est celui existant entre les lecteurs Flash et le streaming .mp4 HTML5 natif sur Safari. Étant donné que le navigateur peut prendre en charge les deux fichiers, vous pouvez avoir des difficultés à obtenir le flux vidéo HTML5 à la place de Flash. Cependant, grâce à cet excellent article de blog sur TUAW, il est facile de changer votre agent utilisateur de navigation.
Cela forcera votre page Web à reconnaître le navigateur en cours d'exécution sur un autre appareil. Il est fort probable que vous choisissiez un iPad, qui ne prend en charge aucune lecture Flash. C’est le seul problème majeur que vous pouvez rencontrer lorsque vous testez les méthodes de lecture MP4 en mode natif et flash..
7. Gérer les contrôles du joueur
Croyez-le ou non, vous pouvez également utiliser des méthodes pour manipuler les commandes du lecteur vidéo HTML5. Tout peut être fait en JavaScript en tirant d'un ensemble de méthodes ouvertes. Il y en a beaucoup trop à énumérer ici, mais essayez de parcourir les documents relatifs aux éléments multimédias du W3C pour plus de détails..
Pour vous donner une idée générale, le blog Opera dev a publié quelques tutoriels qui sont parfaits pour les débutants. Même si vous n'avez jamais utilisé JavaScript ou jQuery auparavant, c'est toujours simple de lancer le jeu avec celui-ci. Vous pouvez faire appel à des attributs spécifiques du support vidéo tels que en sourdine ou heure actuelle. Vous pouvez ensuite effectuer des actions (atténuer l'arrière-plan, afficher des annonces) en fonction de ces critères en manipulant le DOM dans jQuery..
Le même développeur dans l'article d'Opera fournit une démonstration de travail de son lecteur vidéo scripté. La possibilité de personnaliser vos propres contrôles d'interface utilisateur est exceptionnelle. Cela montre bien à quel point la vidéo HTML5 devient puissante.
8. Conversion de format vidéo
C’est un autre problème important qui risque de semer la confusion chez les personnes moins férues de technologie. Vous voulez juste que votre site soit en ligne et en streaming et maintenant vous avez à faire avec la conversion de vidéos? En fait, ce n'est pas si difficile.
Pour gérer MP4, qui est votre plus grande priorité, vous pouvez utiliser HandBrake, une solution libre et open source fonctionnant sur les 3 principaux systèmes d’exploitation. Il supportera le H.264 avec quelques autres codecs, ce qui en fait la meilleure option pour les utilisateurs de billets de faveur. Si vous avez de l'argent à dépenser, je vous recommande le convertisseur Xilisoft, disponible sur le Mac App Store, pour seulement une licence à vie de 40 $..
Cela ressemble à la route WebM rend la vie beaucoup plus facile. Miro Video Converter est un outil gratuit pour Windows et OS X qui produit des fichiers WebM d'excellente qualité. Il peut également faire l’encodage Ogg Theora qui est aussi d'excellente qualité..
9. Construire un lecteur Web
Les formats vidéo avec les spécifications HTML5 sont encore nouveaux pour les développeurs. Il existe des protocoles ouverts qui ne demandent qu'à être utilisés pour permettre des contrôles personnalisés, des curseurs, des icônes de lecture / pause, etc. Si vous vous sentez audacieux, consultez ce tutoriel sur la création de votre propre lecteur HTML5 (publié sur Splashnology)..
Le code est un peu intense pour les nouveaux arrivants car il nécessite un ciblage CSS avancé et un peu de jQuery formel. Il existe d'autres cadres sur lesquels vous pouvez construire et qui offrent déjà une conception de lecteur personnalisée. De la même manière, cette présentation SlideShare constitue une excellente introduction à la création d’un lecteur vidéo HTML5..
Construire un lecteur vidéo HTML510. Bibliothèque VideoJS
VideoJS est probablement ma solution préférée pour les lecteurs vidéo HTML5. Tout ce dont vous avez besoin est leur feuille de style JavaScript et CSS auto-hébergée, quelque part dans votre document. Ensuite, vous écrivez le code vidéo standard HTML5 avec quelques classes supplémentaires pour le skinning. J'ai ajouté leur exemple de code ci-dessous:
Si vous exécutez un blog WordPress, vous pouvez également essayer leur plugin WP personnalisé. Il inclura automatiquement la bibliothèque js / css sur les pages où vous affichez une vidéo HTML5. Et vous pouvez le faire depuis n'importe quel poste ou éditeur de page en utilisant des codes abrégés (voir ici).
Conclusion
J'espère que ce guide d'introduction peut susciter votre intérêt pour l'avenir de la vidéo Web. Avec l'augmentation du nombre d'utilisateurs qui se tournent vers le mobile, il est important que les normes HTML5 soient adoptées pour ces types de support. Le Web doit être simplifié afin que les développeurs puissent produire des solutions entièrement prises en charge beaucoup plus rapidement. Nous aimerions connaître vos idées et vos suggestions pour l’avenir de la vidéo HTML5. Si vous souhaitez partager, n'hésitez pas à laisser un commentaire dans l'espace de discussion ci-dessous.
