La balise vidéo HTML5 facilite l'ajout de vidéo à vos pages Web. Mais si cela semble facile en surface, il y a beaucoup de choses que vous devez faire pour que votre vidéo soit opérationnelle. Ce tutoriel vous guidera à travers les étapes pour créer une page en HTML5 qui exécutera la vidéo dans tous les navigateurs modernes.
- Hébergement de votre propre vidéo HTML5 et utilisation de YouTube
- Présentation rapide du support vidéo sur le Web
- Créer et éditer votre vidéo
- Convertir la vidéo en Ogg pour Firefox
- Convertir la vidéo en MP4 pour Safari
- Convertir la vidéo au format FLV pour Internet Explorer
- Ajouter l'élément vidéo à votre page Web
- Ajouter le JavaScript et Flash Player pour faire fonctionner Internet Explorer
- Testez dans autant de navigateurs que vous le pouvez
Hébergement de votre propre vidéo HTML 5 et utilisation de YouTube
YouTube est un site formidable. Il est facile d’intégrer rapidement une vidéo dans des pages Web et, à quelques exceptions mineures près, l’exécution de ces vidéos est relativement transparente. Si vous publiez une vidéo sur YouTube, vous pouvez être sûr que quiconque pourra la visionner.
Mais utiliser YouTube pour intégrer vos vidéos présente certains inconvénients
La plupart des problèmes liés à YouTube concernent le consommateur, et non le concepteur, par exemple:
- Recherche lente et indexation
- Pannes de serveur
- Contenu supprimé (apparemment) arbitrairement
- Trop de mauvais contenu
Mais il existe certaines raisons pour lesquelles YouTube est également néfaste 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 présente certains avantages par rapport à YouTube
L'utilisation de HTML5 pour la vidéo vous permet de contrôler chaque aspect de votre vidéo, en définissant qui peut le visionner, combien de temps il est, son contenu, son emplacement et le comportement du serveur. Et la vidéo HTML5 vous donne la possibilité d’encoder votre vidéo dans autant de formats que vous devez pour vous assurer que le plus grand nombre de personnes peut la voir. Vos clients n'ont pas besoin de plug-in ni d'attendre que YouTube publie une version plus récente.
Bien sûr, la vidéo HTML5 présente certains inconvénients
Ceux-ci inclus:
- Vous devez encoder votre vidéo en au moins trois codecs différents.
- Vous devez inclure du code JavaScript pour vous assurer que les navigateurs qui ne prennent pas en charge HTML5 fonctionneront.
- Votre serveur doit pouvoir gérer les besoins en bande passante pour l'hébergement de vidéos
Continuer la lecture ci-dessous
02 sur 10Présentation rapide du support vidéo sur le Web
L'ajout de vidéos à des pages Web a longtemps été un processus difficile. Il y avait tellement de choses qui pourraient aller mal:
- Tout d'abord, vous utilisez le tag pour intégrer votre vidéo dans votre page. MAIS cette balise est déconseillée au profit d'une autre balise. Et certains navigateurs ne l’ont jamais bien supporté de toute façon.
- Donc, vous passez à la tag, mais les navigateurs plus anciens ne le supportent pas et les nouveaux navigateurs sont fragmentaires dans son support.
- Alors tu penses que Flash! Et encodez votre vidéo sous forme de fichier FLV. Mais Flash n'est pas pris en charge sur de nombreux appareils mobiles et de nombreuses personnes détestent Flash, quelle que soit son utilisation (25% des personnes interrogées dans mon sondage me demandent comment vous vous sentez à propos de Flash et déclarent ne pas le supporter.
- Vous décidez donc de télécharger votre vidéo sur un site d'intégration de vidéos tel que YouTube, mais vous avez ensuite les problèmes avec YouTube dont nous avons discuté.
- Enfin, vous décidez d'utiliser HTML5, mais Internet Explorer ne le prend pas en charge (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 les utiliser. Prise en charge du navigateur pour les codecs et les conteneurs vidéo
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 de la vidéo à vos pages Web fonctionnant sous Firefox 3.5, Opera 10.5, Chrome 3.0, Safari 3 et 4, iPhone et Android, Flash et Internet Explorer 7 et 8. Vous devez également disposer des clés nécessaires pour prendre en charge d’autres navigateurs plus anciens.
Continuer la lecture ci-dessous
03 sur 10Créer et éditer 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 prendre des photos en continu, puis les modifier pour créer une fonctionnalité, ou vous pouvez créer un script et planifier à l'avance. Dans les deux cas, cela fonctionne bien, c'est ce qui vous met à l'aise. Si vous ne savez pas quel type de vidéo vous devez faire, consultez ces idées dans le Guide vidéo sur le bureau:
- Projets vidéo familiaux
- Vidéos de marketing et de promotion
- 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 claires font mal aux yeux et trop sombres, elles ont juste l'air boueuses et peu professionnelles. Même si vous ne prévoyez qu'une vidéo de 30 secondes sur votre site, plus elle sera de qualité, mieux elle reflétera votre site Web.
N'oubliez pas non plus que le droit d'auteur s'applique à tous les sons ou à la musique (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 devez trouver de la musique libre de droits pour la jouer en arrière-plan. Vous pouvez également stocker des séquences d’images à ajouter à vos vidéos.
Montage de votre vidéo
Peu importe le logiciel d'édition que vous utilisez, du moment que vous le connaissez et que vous pouvez l'utiliser efficacement. Gretchen, le Guide vidéo sur le bureau, propose des astuces de montage vidéo professionnelles qui peuvent vous aider à éditer vos vidéos pour les rendre plus belles.
Enregistrez votre vidéo sur un MOV ou AVI (ou MPG, CD, DV)
Pour le reste de ce tutoriel, 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 de vidéo que nous avons déjà abordés. Les pages suivantes expliqueront comment convertir votre fichier en trois types, de manière à ce qu'il soit visible par le plus grand nombre de navigateurs.
04 sur 10Convertir la vidéo en Ogg pour Firefox
Le premier format que nous convertirons est Ogg (parfois appelé Ogg-Theora). Ce format est celui que Firefox 3.5, Opera 10.5 et Chrome 3 peuvent tous afficher.
Malheureusement, bien que Ogg prenne en charge les navigateurs, de nombreux programmes vidéo bien connus que vous pouvez acheter (Adobe Media Encoder, QuickTime, etc.) ne proposent pas d’option de conversion Ogg. La seule façon de convertir votre vidéo au format Ogg consiste donc à rechercher 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 avons essayé avec ma vidéo de test de 3 secondes, nous ne pouvions pas la faire fonctionner sur mon Mac. Mais vous pouvez avoir plus de chance. Ce site a l'avantage d'être gratuit.
Parmi les autres outils que nous avons trouvés, citons:
- Miro Video Converter (Windows Macintosh) - Ce programme présente l’avantage de convertir à la fois en Ogg et en MP4 (H.264) et en open source.
- Koyote Video Converter (Windows)
- Free Video Converter Nous pensons que cela a à la fois une version Windows et une version Macintosh, mais il était difficile de dire de leur site
- Simple Theora Encoder (Macintosh) - C’est celui que nous avons tendance à utiliser.
Une fois que votre vidéo est enregistrée au format Ogg, enregistrez-la dans un emplacement de votre site Web et accédez à la page suivante pour la convertir en un autre format compatible avec d'autres navigateurs.
Continuer la lecture ci-dessous
05 sur 10Convertir la vidéo en MP4 pour Safari
Le format suivant dans lequel vous devriez convertir votre vidéo est MP4 (vidéo H.264) pour pouvoir être lu sur Safari 3 et 4, ainsi que sur l'iPhone et Android. De plus, les vidéos H.264 peuvent être facilement converties en fichiers FLV pour les regarder en Flash.
Ce format est plus facilement disponible dans les produits commerciaux et vous avez probablement déjà un programme qui convertira en MP4 si vous avez un éditeur de vidéo. Si vous avez Adobe Premiere, vous pouvez utiliser Adobe Video Encoder ou QuickTime Pro, qui fonctionnera également. La plupart des convertisseurs dont nous avons parlé à la page précédente convertissent également les vidéos en MP4.
- MediaConvert - Un outil AWS en ligne.
- Miro Video Converter (Windows Macintosh) - Ce programme présente l’avantage de convertir à la fois en Ogg et en MP4 (H.264) et en open source.
- SUPER (Windows) - convertira de nombreux types de fichiers différents en MP4 et FLV
- Free Video Converter Nous pensons que cela a à la fois une version Windows et une version Macintosh, mais il était difficile de dire à partir de leur site.
Enregistrez votre fichier MP4 sur votre site Web et vous devrez ensuite le convertir en Flash pour que Internet Explorer puisse l'utiliser.
06 sur 10Convertir la vidéo au format FLV pour Internet Explorer
Le moyen le plus simple de convertir des vidéos au format FLV consiste à utiliser Flash lui-même. C'est ainsi que nous convertissons mes vidéos en Flash. Mais si vous ne possédez pas Flash, voici deux outils populaires pour convertir des fichiers au format FLV:
- SUPER (Windows) - convertira de nombreux types de fichiers différents en MP4 et FLV
- ffmpegX (Macintosh) - convertira de nombreux types de fichiers différents en Mp4 et FLV.
Enregistrez votre fichier FLV sur votre site Web. La page suivante vous montrera comment écrire le code HTML afin que vous puissiez lire vos vidéos.
Continuer la lecture ci-dessous
07 sur 10Ajouter l'élément vidéo à votre page Web
Il est très facile d’utiliser HTML 5 pour ajouter de la 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 en charge de la même manière. Cela signifie toutefois que si vous enregistrez votre vidéo aux formats Ogg et MP4, vous ne pourrez écrire que quatre ou cinq lignes de code HTML afin de l'afficher dans la plupart des navigateurs modernes (sauf Internet Explorer 8). Voici comment:
Ecrivez le marqueur de type de document HTML 5 pour que les navigateurs sachent qu’ils attendent HTML 5:
- Créez votre page Web comme vous le feriez normalement:
- À l'intérieur du corps, placez le
- Déterminez les attributs que vous souhaitez attribuer à votre vidéo: Nous vous recommandons d'utiliser les commandes et le préchargement. Utilisez l'option affiche si votre vidéo n'a pas une bonne première scène.
- autoplay - pour commencer dès qu'il est téléchargé
- contrôles - permettent à vos lecteurs de contrôler la vidéo (pause, rembobinage, avance rapide)
- loop - démarre la vidéo depuis le début à la fin
- préchargement - pré-téléchargez la vidéo pour qu'elle soit prête plus rapidement lorsque le client clique dessus
- affiche - définit l'image que vous souhaitez utiliser lorsque la vidéo est arrêtée
- Ajoutez ensuite les fichiers source des deux versions de votre vidéo (MP4 et OGG) dans le
- 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 au moins dans Firefox 3.5 et Safari 4, car ils utilisent chacun un codec différent.
C'est tout. 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?
Internet Explorer n'aime pas HTML 5 ou le
Dans la section suivante, nous parlerons de ce que vous pouvez faire pour que IE 8 joue correctement avec vos balises vidéo HTML 5 et affiche une vidéo. Vous devez utiliser Flash.La bonne nouvelle est que IE 9 devrait prendre en charge HTML 5 et la balise video.
08 sur 10Ajouter le JavaScript et Flash Player pour faire fonctionner Internet Explorer
Vous avez peut-être remarqué que dans le code HTML de la page précédente, il n'y avait pas de ligne source pour le fichier FLV. Et si vous testiez cette page dans Internet Explorer, cela ne fonctionnerait pas. En effet, Internet Explorer ne reconnaît pas HTML 5 et ne peut lire ni les vidéos OGG ni MP4 de manière native. Pour qu'Internet Explorer 7 et 8 fonctionnent, vous devez le faire lire la vidéo au format Flash. Mais pour que cela fonctionne, il faut plus que simplement ajouter le fichier FLV.
Étape 1: Obtenez un lecteur vidéo Flash pour votre site Web
Nous vous recommandons d’acquérir FlowPlayer car il s’agit d’un lecteur vidéo Flash open source que vous pouvez installer sur votre serveur Web et utiliser lorsque vous avez des vidéos Flash à lire. La version gratuite de FlowPlayer insère de la publicité dans vos vidéos, mais vous pouvez également acheter des licences commerciales si vous en avez besoin.
Suivez les instructions du site FlowPlayer pour installer FlowPlayer sur votre site Web. En un mot, vous allez installer 2 fichiers SWF et un fichier JavaScript sur votre site. Au bas de votre code HTML (avant la tag) vous allez ajouter une ligne:
Mais Internet Explorer ne lit toujours pas la vidéo, vous devez lui apprendre à reconnaître les balises HTML 5.
Étape 2: convaincre Internet Explorer de lire les balises HTML 5
Il existe un script pratique sur Google Code appelé "HTML Shiv" qui aidera IE à reconnaître les éléments HTML 5. Donc dans le
de votre document HTML que vous souhaitez référencer. Il est préférable de l'insérer dans les commentaires conditionnels d'IE pour éviter la confusion des autres navigateurs:
Ok, maintenant IE va reconnaître le
