Utilisation de HTML5 pour afficher la vidéo dans les navigateurs actuels

Hébergement de votre propre vidéo HTML 5 vs. Utiliser YouTube

YouTube est un excellent site. Il facilite l'intégration de la vidéo dans les pages Web rapidement, et à quelques exceptions mineures près, l'exécution de ces vidéos est assez transparente. Si vous publiez une vidéo sur YouTube, vous pouvez être assez sûr que n'importe qui pourra la regarder.

Mais utiliser YouTube pour intégrer vos vidéos présente certains inconvénients

La plupart des problèmes avec Youtube sont du côté du consommateur, plutôt que du côté du concepteur, des choses comme:

• Recherche et indexation lentes
• Pannes de serveur
• Contenu supprimé (apparemment) arbitrairement
• Trop de mauvais contenu

Mais il y a certaines raisons pour lesquelles YouTube est également mauvais pour les développeurs de contenu, notamment:

• Durée maximale de 10 minutes pour les vidéos (pour les comptes gratuits)
• Mauvaises performances de téléchargement
• YouTube obtient des droits d'utilisation illimités sur votre vidéo
• Tout utilisateur de YouTube obtient des droits d'utilisation illimités sur votre vidéo

La vidéo HTML5 offre certains avantages par rapport à YouTube

Utilisant HTML5 pour la vidéo vous permet de contrôler chaque aspect de votre vidéo, de qui peut la visionner, combien de temps elle dure, ce que le contenu contient, où il est hébergé et comment le serveur fonctionne. Et HTML5 vous donne la possibilité d'encoder votre vidéo dans autant de formats que vous le souhaitez pour vous assurer qu'un maximum de personnes peuvent la visionner. Vos clients n'ont pas besoin d'un plugin ou d'attendre que YouTube publie une version plus récente.

Bien sûr, la vidéo HTML5 présente quelques inconvénients

Ceux-ci inclus:

• Vous devez encoder votre vidéo dans au moins trois codecs différents.
• Vous devez inclure du JavaScript pour vous assurer que les navigateurs qui ne prennent pas en charge HTML5 marchera.
• Votre serveur doit être capable de gérer les besoins en bande passante de l'hébergement de vidéos.

Présentation rapide du support vidéo sur le Web

L'ajout de vidéo aux pages Web a longtemps été un processus difficile. Il y avait tellement de choses qui pouvaient mal tourner:

• Tout d'abord, vous utilisez le tag pour intégrer votre vidéo dans votre page. MAIS cette balise est dépréciée au profit d'une autre balise. Et certains navigateurs ne l'ont jamais bien supporté de toute façon.
• Alors vous passez au tag, mais les navigateurs plus anciens ne le prennent pas en charge et les navigateurs plus récents sont sommaires dans sa prise en charge.
• Alors tu penses Éclat! Et encodez votre vidéo en tant que fichier FLV. Mais Éclat n'est plus pris en charge sur les appareils Windows.
• Vous décidez donc de télécharger votre vidéo sur un site d'intégration de vidéos comme YouTube, mais vous avez alors les problèmes avec YouTube dont nous avons discuté.
• Enfin, vous décidez d'utiliser HTML5, mais Internet Explorer ne le supporte pas (pas avant Internet Explorer 9). Et même si vous le faites, deux normes de codec vidéo sont prises en charge et un seul navigateur peut utiliser les deux.

Alors qu'est-ce que tu es censé faire? Abandonner la vidéo n'est plus une option pour la plupart des sites, car la vidéo devient de plus en plus importante. Et de nombreux sites sont passés avec succès à la vidéo.

Les pages suivantes de cet article vous expliqueront comment ajouter une vidéo à vos pages Web qui fonctionnent dans Firefox 3.5, Opera 10.5, Chrome 3.0, Safari 3 et 4, iPhone et Android et Internet Explorer 7 et 8. Vous aurez également les clés dont vous avez besoin pour ajouter le support d'autres navigateurs plus anciens si nécessaire.

Créez et modifiez votre vidéo

La première chose dont vous avez besoin lorsque vous allez mettre une vidéo sur une page Web est la vidéo elle-même. Vous pouvez soit filmer en continu et éditer par la suite pour créer un long métrage, soit le scripter et le planifier à l'avance. Quoi qu'il en soit, cela fonctionne bien, c'est tout ce avec quoi vous êtes à l'aise. Si vous ne savez pas quel type de vidéo vous devez réaliser, consultez ces idées du Desktop Video Guide:

• Projets vidéo familiaux
• Vidéos marketing et promotionnelles
• Visites virtuelles vidéo
• Comment faire des vidéos
• Vidéos de mariage

Apprenez à enregistrer une vidéo de haute qualité

Assurez-vous de savoir comment enregistrer à l'intérieur et à l'extérieur ainsi que comment enregistrer de l'audio. L'éclairage est également très important: les photos trop lumineuses font mal aux yeux et trop sombres ont l'air boueuses et peu professionnelles. Même si vous ne prévoyez d'avoir qu'une vidéo de 30 secondes sur votre site, plus sa qualité est élevée, mieux elle se reflétera sur votre site Web.

N'oubliez pas non plus que le droit d'auteur s'applique à tous les sons ou musiques (ainsi qu'aux séquences d'archives) que vous souhaitez utiliser dans votre vidéo. Si vous n'avez pas accès à un ami qui peut écrire et jouer une chanson pour vous, vous devrez trouver Musique libre de droits pour jouer en arrière-plan. Il existe également des endroits où vous pouvez stocker des séquences à ajouter à vos vidéos.

Modification de votre vidéo

Peu importe le logiciel de montage que vous utilisez, du moment que vous le connaissez et que vous pouvez l'utiliser efficacement. Gretchen, le Desktop Video Guide, propose des conseils de montage vidéo professionnels qui peuvent vous aider à éditer vos vidéos pour qu'elles soient superbes.

Enregistrez votre vidéo au format MOV ou AVI (ou MPG, CD, DV)

Pour le reste de ce didacticiel, nous allons supposer que votre vidéo est enregistrée dans un type de format de haute qualité (non compressé) comme AVI ou MOV. Bien que vous puissiez utiliser ces fichiers tels quels, vous rencontrez tous les problèmes avec la vidéo dont nous avons déjà parlé. Les pages suivantes expliquent comment convertir votre fichier en trois types afin qu'il soit visible par le plus grand nombre de navigateurs.

Convertir la vidéo en Ogg pour Firefox

Le premier format vers lequel nous allons convertir est Ogg (parfois appelé Ogg-Theora). Ce format est un format que Firefox 3.5, Opera 10.5 et Chrome 3 peuvent tous afficher.

Malheureusement, bien qu'Ogg prenne en charge les navigateurs, de nombreux programmes vidéo bien connus que vous pouvez acheter (Adobe Media Encoder, QuickTime, etc.) n'offrent pas d'option de conversion Ogg. Donc, la seule façon de convertir votre vidéo en Ogg est de trouver un programme de conversion sur le Web.

Options de conversion

Il existe un outil en ligne appelé Media-Convert qui prétend convertir divers formats vidéo (et audio) en d'autres formats vidéo (et audio). Lorsque nous l'avons essayé avec ma vidéo de test de 3 secondes, nous n'avons pas pu le faire fonctionner sur mon Mac. Mais vous aurez peut-être plus de chance. Ce site a l'avantage d'être gratuit.

Parmi les autres outils que nous avons trouvés, citons:

• Convertisseur vidéo Miro (Windows Macintosh): Ce programme a l'avantage de convertir à la fois en Ogg et en MP4 (H.264) et il est open-source.
• Convertisseur vidéo gratuit: Nous pensons qu'il existe à la fois une version Windows et une version Macintosh, mais c'était difficile à dire sur leur site
• Encodeur Theora simple (Macintosh): C'est celui que nous avons tendance à utiliser.

Une fois que vous avez enregistré votre vidéo au format Ogg, enregistrez-la dans un emplacement de votre site Web et passez à la page suivante pour la convertir en d'autres formats pour d'autres navigateurs.

Convertir la vidéo en MP4 pour Safari et Internet Explorer

Le prochain format dans lequel vous devez convertir votre vidéo est MP4 (vidéo H.264) afin qu'elle puisse être lue sur Internet Explorer 9 et versions ultérieures, Safari 3 et 4, ainsi que sur iPhone et Android.

Ce format est plus facilement disponible dans les produits commerciaux, et vous avez probablement déjà un programme qui convertit en MP4 si vous avez un éditeur vidéo. Si tu as Adobe première vous pouvez utiliser Adobe Video Encoder, ou si vous avez QuickTime Pro qui fonctionne également. De nombreux convertisseurs dont nous avons parlé à la page précédente convertissent également les vidéos en MP4.

• MediaConvert: Un outil AWS en ligne.
• Convertisseur vidéo Miro (Windows Macintosh): Ce programme a l'avantage de convertir à la fois en Ogg et en MP4 (H.264) et il est open-source.
• SUPER (Windows): convertira de nombreux types de fichiers différents en MP4
• Convertisseur vidéo gratuit: Nous pensons qu'il existe à la fois une version Windows et une version Macintosh, mais c'était difficile à dire sur leur site.

Ajouter l'élément vidéo à votre page Web

1. Créez votre page Web comme vous le feriez normalement:

2. A l'intérieur du corps, placez le
3. Décidez des attributs que vous souhaitez donner à votre vidéo: nous vous recommandons d'utiliser les commandes et de précharger. Utilisez l'option affiche si votre vidéo n'a pas une bonne première scène.
   lecture automatique - pour démarrer dès qu'il est téléchargé
4. contrôles - permettez à vos lecteurs de contrôler la vidéo (pause, rembobinage, avance rapide)
5. boucle - démarre la vidéo depuis le début quand elle se termine
6. preload - prétéléchargez la vidéo pour qu'elle soit prête plus rapidement lorsque le client clique dessus
7. poster - définissez l'image que vous souhaitez utiliser lorsque la vidéo est arrêtée
8. Ajoutez ensuite les fichiers sources des deux versions de votre vidéo (MP4 et OGG) dans le
9. Ouvrez la page dans Chrome 1, Firefox 3.5, Opera 10 et/ou Safari 4 et assurez-vous qu'elle s'affiche correctement. Vous devriez le tester dans au moins Firefox 3.5 et Safari 4 - car ils utilisent chacun un codec différent.

C'est ça. Une fois que vous avez ce code en place, vous aurez une vidéo qui fonctionne dans Firefox 3.5, Safari 4, Opera 10 et Chrome 1. Mais qu'en est-il d'Internet Explorer?

Il est très facile d'utiliser HTML 5 pour ajouter une vidéo à des pages Web. La plupart des navigateurs modernes prennent en charge la vidéo HTML 5, bien qu'ils ne la prennent pas tous de la même manière. Mais cela signifie que si vous enregistrez votre vidéo aux formats Ogg et MP4, vous ne pouvez écrire que quatre ou cinq lignes de code HTML pour qu'elle s'affiche dans la plupart des navigateurs modernes (sauf Internet Explorer 8). Voici comment:

Écrivez le marqueur de doctype HTML 5 afin que les navigateurs sachent s'attendre à HTML 5:

1. Créez votre page Web comme vous le feriez normalement:

2. A l'intérieur du corps, placez le
3. Décidez des attributs que vous souhaitez donner à votre vidéo: nous vous recommandons d'utiliser les commandes et de précharger. Utilisez l'option affiche si votre vidéo n'a pas une bonne première scène.
   lecture automatique - pour démarrer dès qu'il est téléchargé
4. contrôles - permettez à vos lecteurs de contrôler la vidéo (pause, rembobinage, avance rapide)
5. boucle - démarre la vidéo depuis le début quand elle se termine
6. preload - prétéléchargez la vidéo pour qu'elle soit prête plus rapidement lorsque le client clique dessus
7. poster - définissez l'image que vous souhaitez utiliser lorsque la vidéo est arrêtée
8. Ajoutez ensuite les fichiers sources des deux versions de votre vidéo (MP4 et OGG) dans le
9. Ouvrez la page dans Chrome 1, Firefox 3.5, Opera 10 et/ou Safari 4 et assurez-vous qu'elle s'affiche correctement. Vous devriez le tester dans au moins Firefox 3.5 et Safari 4 car ils utilisent chacun un codec différent.

C'est ça. Une fois que vous avez ce code en place, vous aurez une vidéo qui fonctionne dans Firefox 3.5, Safari 4, Opera 10, Internet Explorer 9+ et Chrome 1.

Testez dans autant de navigateurs que possible

Pour votre tranquillité d'esprit, vous devriez également tester dans des navigateurs plus anciens pour voir ce qu'ils font, surtout si beaucoup de vos lecteurs utilisent des navigateurs plus anciens.

Le test des pages vidéo est essentiel si vous voulez réussir votre lancement. Vous devez vous assurer de tester votre page dans les navigateurs et les versions les plus populaires de votre site Web.

Nous avons constaté que s'il est possible d'utiliser des outils tels que BrowserLab et AnyBrowser pour tester la vidéo, ce n'est pas aussi fiable que d'afficher la page sur un navigateur vous-même. Lorsque vous faites cela, vous pouvez vraiment voir si cela fonctionne ou non.

Puisque vous vous êtes donné la peine d'encoder votre vidéo dans plusieurs formats, vous devez la tester pour vous assurer qu'elle s'affiche dans plusieurs navigateurs. Cela signifie, au minimum, que vous devez le tester dans Firefox, Safari et IE.

Pour votre tranquillité d'esprit, vous devriez également tester dans des navigateurs plus anciens pour voir ce qu'ils font, surtout si beaucoup de vos lecteurs utilisent des navigateurs plus anciens.

Faire fonctionner la vidéo dans les navigateurs plus anciens

Comme pour toute page Web, vous devez d'abord considérer à quel point il est important de faire fonctionner ces navigateurs. Si 90% de vos clients utilisent Netscape, alors vous devriez avoir un plan de secours pour eux. Mais si moins de 1% le font, cela n'a peut-être pas tellement d'importance.

Une fois que vous avez décidé quels navigateurs vous allez essayer de prendre en charge, le moyen le plus simple consiste simplement à créer une autre page pour qu'ils puissent visionner la vidéo. Sur cette autre page, vous intégreriez une vidéo à l'aide de HTML 4. Et puis utilisez une forme de détection de navigateur pour les rediriger là-bas ou ajoutez simplement un lien vers cette page sur celle-ci.