Cet article a fait l'objet d'une traduction automatique.
Création d'applications HTML5
HTML5 Audio et Vidéo multinavigateur pratique
Téléchargez l'exemple de Code
Lorsque les balises audio et vidéos de HTML5 ont été introduites, incompatibilités de codec et navigateur rendent difficile à utiliser et irréaliste de déployer sur des sites Web à grande échelle.Les balises sont grands pour les entreprises en écrivant du code expérimental ou faire le développement des médias de cross-browser, mais les médias HTML5 API étaient trop peu fiable pour un usage général.
Aujourd'hui, les choses sont différentes.Les navigateurs et les bibliothèques JavaScript ont évolué au point où vous pouvez — et — utiliser HTML5 médias comme la valeur par défaut pour tous les projets qui afficheront le contenu audio et vidéo.Réaménagement même les Flash et Silverlight contenu vidéo pour une lecture en HTML5 est devenu assez simple.Dans cet article, je vais explorer les avantages de l'utilisation de HTML5 pour lecture de média montrent un exemple de code, aborder certaines questions importantes que les développeurs sont confrontés et présentent des solutions à ces problèmes.
Avantages du support de HTML5
L'avantage d'utiliser HTML5 pour les médias est que vous pouvez utiliser vos compétences en HTML, CSS et JavaScript plutôt que de l'apprentissage de Flash ou Silverlight.Si vous pouvez créer des boutons en HTML et les contrôler avec JavaScript, vous savez déjà tous que vous devez développer des médias HTML5.Support HTML5 a prise en charge intégrée pour les légendes et sous-titres en utilisant le nouvel élément de la piste et des propositions pour des fonctionnalités supplémentaires — comme octets accès direct aux manipulations vidéo — sont déjà envisagés.
En outre, médias qui utilise des audio et vidéo HTML5 exécute mieux que médias, joué par l'intermédiaire de plug-ins comme Flash ou Silverlight, résultant en une plus longue vie de la batterie et de la lecture plus facile.En outre, les appareils mobiles exécutant Windows Phone 7.5, Apple iOS et Android (ainsi que le navigateur de style Metro de Windows 8) soutien lecture de média que par le biais de HTML5 audio et vidéo.Certains appareils Android incluent Flash, mais Adobe a récemment abandonné ses efforts Flash mobiles, ce qui signifie que le HTML5 sera la seule façon de jouer à l'avenir des médias sur les périphériques mobiles.
Contrôles et la simple lecture de HTML5
Dans les jours de l'utilisation de Flash ou Silverlight pour la lecture vidéo, le plus simple balisage possible d'afficher une vidéo (video.mp4 dans ce cas) serait ont cherché quelque chose comme ceci :
<object width="640" height="360" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0">
<param name="src" value="player.swf?file=video.mp4">
<embed src="player.swf?file=video.mp4" width="640"
height="360"></embed>
</object>
Comparer ces objet imbriqué, param et incorporer des balises avec cette balise vidéo de HTML5 utilisé pour jouer la même vidéo encodés h.264 :
<video src="video.mp4" controls></video>
Il est beaucoup plus simple — just plain HTML qui a besoin de très peu d'explications. Lorsque le navigateur a téléchargé suffisamment d'une vidéo afin de déterminer la largeur et la hauteur native, il redimensionne la vidéo en conséquence. Mais, avec les balises img, il est toujours préférable de spécifier les attributs de la hauteur et la largeur afin que la page n'a pas besoin de refusion. Vous pouvez également utiliser l'attribut style pour spécifier les valeurs de width et height px ou % (j'utilise aussi bien dans les exemples qui suivent).
J'ai ajouté les attributs est contrôles. Cela indique au navigateur d'afficher sa propre barre de contrôle de lecture intégré, qui comprend généralement une bascule de lecture/pause, un indicateur de progression et les contrôles de volume. Contrôles est un attribut booléen, qui signifie il n'a pas besoin d'avoir une valeur assignée à elle. Pour une syntaxe XHTML ressemblant davantage, vous pourriez écrire contrôles = « contrôles », mais le navigateur toujours considère que les contrôles d'être false s'il n'est pas présent et true si elle est présente ou une valeur assignée.
HTML5 Enfant Source balises et les attributs de médias
Les éléments audio et vidéos d'introduire plusieurs nouveaux attributs qui déterminent comment le navigateur présentera le contenu des médias pour l'utilisateur final.
- SRC spécifie un fichier de média unique pour la lecture (pour des sources multiples avec différents codecs, veuillez voir la discussion ci-dessous).
- affiche est une URL vers une image qui sera affichée avant un utilisateur appuie sur Play (vidéo seulement).
- précharge détermine quand et comment le navigateur chargera le fichier multimédia à l'aide de trois valeurs possibles : None signifie que la vidéo ne se télécharge pas jusqu'à ce que l'utilisateur initie la lecture ; métadonnées indique au navigateur de télécharger juste assez de données pour déterminer la hauteur, la largeur et la durée des médias ; auto laisse le navigateur décider combien de la vidéo pour lancer le téléchargement avant que l'utilisateur initie à la lecture.
- exécution automatique est un attribut booléen utilisé pour démarrer une vidéo dès le chargement de la page (appareils mobiles souvent ignorent ceci afin de préserver la bande passante).
- boucle est un attribut booléen qui provoque une vidéo de recommencer quand elle atteint la fin.
- sourdine est un attribut booléen indiquant si la vidéo devrait commencer en sourdine.
- contrôles est un attribut booléen indiquant si le navigateur doit afficher ses propres contrôles.
- largeur et hauteur dire une vidéo à afficher en une certaine taille (vidéo seulement ; ne peut pas être un pourcentage).
Pistes de texte chronométré
Les navigateurs sont également commencer à mettre en œuvre l'élément track, qui fournit des sous-titres, fermé de légendes, traductions et commentaires de vidéos. Voici un vidéo élément avec un élément de la piste enfant :
<video id="video1" width="640" height="360" preload="none" controls>
<track src="subtitles.vtt" srclang="en" kind="subtitles" label="English subtitles">
</video>
Dans cet exemple, j'ai utilisé quatre des cinq attributs possibles de l'élément de la piste :
- SRC est un lien vers un fichier Web vidéo Timed Text (WebVTT) ou un fichier Timed Text Markup Language (TTML).
- srclang est la langue du fichier TTML (comme fr, es ou ar).
- genre indique le type de contenu de texte : sous-titres, légendes, des descriptions, de chapitres ou métadonnées.
- étiquette contient le texte affiché à l'utilisateur de choisir une voie.
- par défaut est un attribut booléen qui détermine l'élément track de démarrage.
WebVTT est un simple format basé sur du texte qui commence par une déclaration d'une ligne (fichier WEBVTT) et puis listes début et de fin des temps séparés par la--> caractères, suivi par le texte à afficher entre les deux fois. Ici est un simple fichier de WebVTT qui affiche deux lignes de texte à deux intervalles de temps différents :
WEBVTT FILE
00:00:02.5 --> 00:00:05.1
This is the first line of text to display.
00:00:09.1 --> 00:00:12.7
This line will appear later in the video.
De cette écriture, seulement Internet Explorer 10 Platform Preview et Chrome 19 soutiennent l'élément track, mais autres navigateurs sont censés le faire bientôt. Certaines des bibliothèques JavaScript nous discutons ensuite ajouter le support de l'élément track pour les navigateurs qui n'ont pas encore appliquées il, mais il y a aussi une bibliothèque de voie autonome appelée captionator.js (captionatorjs.com) que Parse suivre les balises, lit les fichiers WebVTT et TTML (ainsi que SRT et YouTube SBV) et fournit une interface utilisateur pour les navigateurs qui n'est pas encore prise en charge native.
Script de support de HTML5
Plus tôt, j'ai utilisé l'attribut de contrôles pour dire au navigateur d'afficher ses contrôles natifs par-dessus les balises vidéos ou audio. Le problème est que chaque navigateur possède un ensemble différent de contrôles qui sont peu susceptibles de correspondre la conception de votre site Web. Pour créer une expérience cohérente, vous pouvez supprimer des contrôles du navigateur et ensuite ajouter des boutons personnalisés à la page que vous contrôlez avec le JavaScript. Vous pouvez également ajouter des écouteurs pour suivre l'état de la lecture vidéo ou audio. Dans l'exemple suivant, j'ai supprimé l'attribut contrôles et ajouté la balise sous la vidéo pour servir comme une barre de contrôle de base :
<video id="video1" style="width:640px; height:360px" src="video.mp4"> </video>
<div>
<input type="button" id="video1-play" value="Play" />
<input type="button" id="video1-mute" value="Mute" />
<span id="video1-current">00:00</span>
<span id="video1-duration">00:00</span>
</div>
Le JavaScript simple en Figure 1 devront contrôler la lecture vidéo et le courant du temps dans la vidéo, et créera le joueur complète de travail décrit dans Figure 2(rendu dans Internet Explorer 9). (Notez qu'en HTML5, le type = « text/javascript » attribut n'est pas requis pour la balise script.)
La figure 1, contrôler la lecture vidéo
<script>
// Wrap the code in a function to protect the namespace
(function() {
// Find the DOM objects
var video = document.getElementById("video1"),
playBtn = document.getElementById("video1-play"),
muteBtn = document.getElementById("video1-mute"),
current = document.getElementById("video1-current"),
duration = document.getElementById("video1-duration");
// Toggle the play/pause state
playBtn.addEventListener("click", function() {
if (video.paused || video.ended) {
video.play();
playBtn.value = "Pause";
} else {
video.pause();
playBtn.value = "Play";
}
}, false);
// Toggle the mute state
muteBtn.addEventListener("click", function() {
if (video.muted) {
video.muted = false;
muteBtn.value = "Mute";
} else {
video.muted = true;
muteBtn.value = "Unmute";
}
}, false);
// Show the duration when it becomes available
video.addEventListener("loadedmetadata", function() {
duration.innerHTML = formatTime(video.duration);
}, false);
// Update the current time
video.addEventListener("timeupdate", function() {
current.innerHTML = formatTime(video.currentTime);
}, false);
function formatTime(time) {
var
minutes = Math.floor(time / 60) % 60,
seconds = Math.floor(time % 60);
return (minutes < 10 ? '
0' + minutes : minutes) + ':' +
(seconds < 10 ? '
0' + seconds : seconds);
}
})();
.png)
La figure 2, lecteur de vidéo qui montre le temps de travail
Le code de Figure 1 introduit la pièce et méthodes de pause, les événements timeupdate et loadedmetadata et les propriétés pause, fin, currentTime et la durée. Les médias pleine de HTML5 API (w3.org/TR/html5/video.html) comprend beaucoup plus qui peut être utilisé pour créer un lecteur multimédia complet. En plus de l'HTML5 médias balise attributs répertoriés précédemment, HTML5 médias objets ont autres propriétés accessibles uniquement via JavaScript :
- currentSrc décrit le fichier multimédia navigateur évolue lorsqu'on utilise des balises de la source.
- videoHeight et videoWidth indiquent les dimensions natives de la vidéo.
- volume spécifie une valeur entre 0 et 1 pour indiquer le volume. (Appareils mobiles ignorent cela en faveur de contrôles du volume matériel.)
- currentTime indique la position actuelle de lecture en secondes.
- durée est le temps total en secondes du fichier multimédia.
- tampon est un tableau indiquant quelles parties du fichier multimédia ont été téléchargées.
- playbackRate est la vitesse à laquelle la vidéo est jouée (par défaut : 1). Modifier ce nombre pour aller plus vite (1,5) ou plus lent (0,5).
- fin indique si la vidéo a atteint la fin.
- Pause est toujours true au démarrage et faux puis une fois que la vidéo a commencé à jouer.
- recherche indique le navigateur tente de télécharger et de se déplacer vers une nouvelle position.
Objets de médias de HTML5 comprennent également les méthodes suivantes pour le script :
- jouer tente de charger et lire la vidéo.
- Pause arrête une vidéo en cours de lecture.
- canPlayType(type) détecte les codecs un navigateur prend en charge. Si vous envoyez un type comme video/mp4, le navigateur répondra avec probablement, peut-être, n'ou une chaîne vide.
- charger est appelée pour charger la vidéo si vous modifiez l'attribut src.
Les spécifications de support de HTML5 fournit les 21 événements ; Voici certaines des plus courantes :
- loadedmetadata se déclenche lorsque la durée et les dimensions sont connues.
- loadeddata se déclenche lorsque le navigateur peut jouer à la position actuelle.
- jouer commence la vidéo quand la vidéo n'est plus suspendue ou terminée.
- jeu se déclenche lors de la lecture a commencé après la pause, mise en mémoire tampon ou chercher
- Pause arrête la vidéo.
- fin se déclenche lorsque la fin de la vidéo est atteint.
- progrès indique plus de fichier multimédia a été téléchargé.
- recherche est vrai lorsque le navigateur a commencé à chercher.
- recherchées a la valeur false lorsque le navigateur a fini de chercher.
- timeupdate déclenche que joue la ressource des médias.
- volumechange feux lorsque mis en sourdine ou propriétés de volume ont changé.
Ces propriétés, les méthodes et les événements sont de puissants outils pour présenter aux utilisateurs une expérience multimédia, tous conduits par HTML, CSS et JavaScript. Dans l'exemple de base de Figure 1, tout d'abord créer les variables pour tous les éléments sur la page :
// Find the DOM objects
var video = document.getElementById("video1"),
playBtn = document.getElementById("video1-play"),
muteBtn = document.getElementById("video1-mute"),
current = document.getElementById("video1-current"),
duration = document.getElementById("video1-duration");
Puis j'ajouter un événement click pour mes boutons pour contrôler la lecture média. Ici, je bascule la pièce et suspendre l'état de la vidéo et de modifier l'étiquette sur le bouton :
// Toggle the play/pause state
playBtn.addEventListener("click", function() {
if (video.paused || video.ended) {
video.play();
playBtn.value = "Pause";
} else {
video.pause();
playBtn.value = "Play";
}
}, false);
Enfin, j'ajoute les événements à l'objet de médias pour suivre son état actuel. Ici, j'écoute pour l'événement timeupdate et mise à jour de la barre de contrôle à l'heure actuelle de la tête de lecture, les secondes à un style en minutes : secondes de mise en forme :
// Update the current time
video.addEventListener("timeupdate", function() {
current.innerHTML = formatTime(media.currentTime);
}, false);
Problèmes avec le support de HTML5
N'obtenir médias HTML5 pour travailler dans tous les navigateurs et périphériques est malheureusement pas aussi simple que dans mon exemple. Je l'ai déjà mentionné que pas tous les navigateurs ne supportent l'élément track, et maintenant je vais aborder trois questions supplémentaires que vous rencontrez lorsque vous utilisez les balises audio et vidéos, ainsi que des solutions pour les surmonter. À la fin de l'article, je vais présenter certaines bibliothèques JavaScript que toutes ces solutions encapsulent dans des paquets simples, facilement déployables.
HTML5 Audio et Codec vidéo en charge la première question qui vous font face lors du développement avec le support de HTML5 est l'aide incompatible pour les codecs audio et vidéos. Mes exemples fonctionnent dans Internet Explorer 9 et plus tard, Chrome et Safari, mais ils ne fonctionnent pas dans Firefox ou opéra parce que bien que les navigateurs prennent en charge la balise vidéo de HTML5, qu'ils ne supportent pas le codec h.264. En raison des préoccupations du droit d'auteur, les vendeurs de navigateur ont divisé en deux camps de codec, et cela nous amène au graphique HTML5 médias familier de le Figure 3, montrant les codecs fonctionnent avec les navigateurs.
La figure 3 Support de Codec dans différents navigateurs
| Vidéo | IE8 | ANNONCÉE + | Chrome | Safari | Mobile | Firefox | Opéra |
| MP4 (h.264/AAC) | non | oui | oui | oui | oui | non | non |
| WebM (VP8/Vorbis) | non | installer | oui | non | non | oui | oui |
Internet Explorer 9++, Safari, Chrome et appareils mobiles (iPhone, iPad, Android 2.1 + et Windows Phone 7,5 +) prend en charge le codec vidéo h.264, qui est habituellement placé dans un conteneur MP4. Firefox et Opera, en revanche, prend en charge le codec vidéo VP8, qui est placé à l'intérieur du conteneur WebM. Chrome supporte WebM aussi et s'est engagé à supprimer h.264 soutien à un certain point. Internet Explorer 9++ peut rendre WebM si le codec a été installé par l'utilisateur final. Enfin, Firefox, Opera et Chrome également en charge le codec Theora, placé dans un conteneur Ogg, mais cela a été en grande partie éliminé en faveur de WebM (sauf si vous avez besoin à l'appui de Firefox 3.x), donc j'ai laissé elle des graphique et des exemples pour plus de simplicité.
Pour l'audio, les vendeurs de navigateur sont encore divisés en deux camps, avec le premier groupe (Internet Explorer 9, Chrome et Safari) soutenant le format MP3 familier et le deuxième groupe (Firefox et Opera) soutenant le codec Vorbis à l'intérieur d'un conteneur Ogg. Plusieurs navigateurs peuvent également jouer le format de fichier WAV. Voir la figure 4.
La figure 4 Audio Support dans différents navigateurs
| Audio | IE8 | ANNONCÉE + | Chrome | Safari | Mobile | Firefox | Opéra |
| MP3 | non | oui | oui | oui | oui | non | non |
| Ogg Theora | non | installer | oui | non | non | oui | oui |
| WAV | non | non | peut-être | oui | oui | oui | oui |
Pour faire face à ces différences, les balises vidéos et audio prend en charge plusieurs balises de source enfant, qui permet aux navigateurs de choisir un fichier de média qu'ils peuvent jouer. Chaque élément de source a deux attributs :
- SRC spécifie une URL pour un fichier multimédia.
- type spécifie le type MIME et éventuellement le codec spécifique de la vidéo.
Afin d'offrir les h.264 et le codec vidéo VP8, utilisez le balisage suivant :
<video id="video1" width="640" height="360">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
</video>
Notez que les précédentes versions d'iOS et Android besoin le fichier MP4 être énumérée en premier.
Ce balisage fonctionnera sur tous les navigateurs modernes. Le code JavaScript devront contrôler quelle vidéo navigateur décide elle peut jouer. Pour l'audio, le balisage ressemble à ceci :
<audio id="audio1">
<source src="audio.mp3" type="audio/mp3">
<source src="audio.oga" type="audio/oga">
</audio>
Si vous êtes d'hébergement de contenu audio ou vidéo sur votre propre serveur, vous devez avoir le bon type MIME pour chaque fichier multimédia ou HTML5 prête beaucoup de navigateurs (comme Internet Explorer et Firefox) ne jouera pas les médias. Pour ajouter des types MIME dans IIS 7, aller à la vue des fonctionnalités, double-cliquez sur Types MIME, cliquez sur le bouton Ajouter dans le volet Actions, ajoutez l'extension (mp4) et le type MIME (video/mp4) et appuyez sur OK. Puis faire de même pour les autres types (webm et vidéo/webm) que vous prévoyez d'utiliser.
Soutenir les navigateurs plus anciens y compris les deux fichiers de médias (comme le MP4 et WebM vidéo) rend HTML5 médias travaillent dans tous les navigateurs modernes. Mais lorsque les navigateurs plus anciens (tels que Internet Explorer 8) rencontrent la balise vidéo, ils ne peut pas afficher la vidéo. Ils, cependant, rendra le code HTML de mettre entre l'ouverture de <video> et fermeture </video> balises. L'exemple suivant inclut un message demandant aux utilisateurs d'obtenir un navigateur plus récent :
<video id="video1" width="640" height="360" >
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<p>Please update your browser</p>
</video>
Pour permettre aux visiteurs avec des navigateurs non-HTML5-prêt à jouer la vidéo, vous pouvez fournir une alternative avec Flash intégré qui joue le même MP4 que vous fournissez pour Internet Explorer 9, Safari et Chrome, comme le montre Figure 5.
Figure 5 la lecture vidéo avec Flash
<video id="video1" width="640" height="360" >
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<object width="640" height="360" classid="clsid:
d27cdb6e-ae6d-11cf-96b8-444553540000" codebase=
"http://fpdownload.macromedia.com/pub/
shockwave/cabs/flash/swflash.cab#version=8,0,0,0">
<param name="SRC" value="player.swf?file=video.mp4">
<embed src="player.swf?file=video.mp4" width="640"
height="360"></embed>
<p>Please update your browser or install Flash</p>
</object>
</video>
Ce balisage présente tous les navigateurs avec une façon de jouer la vidéo. Navigateurs HTML5 ni de Flash allez voir un message incitant à la mise à niveau. Pour plus d'informations sur comment et pourquoi ce balisage imbriqué travaille, voir "Vidéo pour tous » de Kroc Carmen (camendesign.com/code/video_for_everybody).
Cette approche présente certains inconvénients, cependant. Tout d'abord, il y a beaucoup de balisage pour maintenir. Deuxièmement, vous devez coder et de stocker des fichiers multimédia au moins deux. Et Troisièmement, tous les contrôles HTML/JavaScript que vous ajouter à la page ne fonctionnera pas avec le lecteur Flash incorporé. Plus tard, je vous suggère plusieurs bibliothèques JavaScript qui peuvent vous aider à surmonter ces problèmes, mais la première, nous allons aborder une dernière question.
Support plein écran Flash et Silverlight incluent un mode plein écran qui permet aux utilisateurs de surveillance vidéo et d'autres contenus sur leur totalité de l'écran. Vous pouvez implémenter cette fonctionnalité en créant un bouton simple et attachant à un ActionScript (pour Flash) ou le plein écran commande de c# (pour Silverlight).
Les navigateurs d'aujourd'hui ont un mode plein écran similaire qui peuvent déclencher des utilisateurs avec une commande de menu ou le clavier (souvent F11 ou Ctrl + F). Mais, jusqu'à récemment, aucune API JavaScript équivalent a permis aux développeurs de lancer le mode plein écran d'un bouton sur une page. Cela signifiait que HTML5 vidéo pourrait être affichée uniquement dans une fenêtre « complète » qui rempli la fenêtre du navigateur, mais pas la totalité de l'écran.
À la fin de 2011, Safari, Chrome et Firefox a ajouté le support pour le W3C proposée des API de plein écran, qui offre des capacités similaires à celles de Flash et de Silverlight. L'équipe Opera travaille actuellement sur la mise en œuvre, mais l'équipe Internet Explorer a, de cette écriture, pas encore décidé si elle mettra en oeuvre de l'API. Le navigateur de style Metro de Windows 8 sera plein écran par défaut, mais le Bureau utilisateurs d'Internet Explorer vont devrez passer en mode plein écran manuellement à l'aide des options de menu ou la touche F11.
Pour passer en mode plein écran dans les navigateurs qui la soutiennent, vous appelez la requestFullscreen méthode sur l'élément à être affichées plein écran. La commande pour quitter le mode plein écran est appelée sur l'objet document : méthode de document.exitFullscreen. La proposition du W3C est toujours un travail en cours, donc je n'entrerai pas plus en détail ici, mais je suis suivi de l'état de l'API sur mon blog : bit.ly/zlgxUA.
HTML5 Vidéo et Audio les bibliothèques JavaScript
Un certain nombre de développeurs ont créé des bibliothèques JavaScript que HTML5 audio et vidéo plus facile en intégrant tout le code dans un seul paquet. Certaines des bibliothèques open source mieux sont MediaElement.js, jPlayer, VideoJS, Projekktor, Playr et induisant. Vous trouverez une liste complète avec comparaison à praegnanz.de/html5video.
Tout ce que vous devez faire est de fournir une balise vidéo ou audio et de la bibliothèque va automatiquement créer un ensemble de contrôles personnalisés, ainsi qu'insérer un lecteur Flash pour les navigateurs qui ne supportent pas les médias HTML5. Le seul problème est que les joueurs Flash qu'insérer de nombreuses bibliothèques ne toujours regarder ou fonctionner comme le joueur de HTML5. Cela signifie que les événements de HTML5, que vous ajoutez ne fonctionnent pas avec Flash player et tout CSS personnalisé que vous utilisez ne sera visible, non.
Dans mon propre travail, m'a demandé de créer un lecteur vidéo HTML5 avec diapositives synchronisées et transcriptions (voir online.dts.edu/player pour une démo). Nous avions une bibliothèque existante de plus de 3 000 fichiers de vidéo h.264, et il a été jugé faisable pour transcoder les de WebM pour Firefox et Opera. Nous avons également besoin de soutenir les anciens navigateurs tels que Internet Explorer 8, mais un Flash séparé secours ne marcherait parce qu'il ne serait pas répondre à des événements pour les diapositives et les transcriptions.
Pour surmonter ces difficultés, j'ai créé un des joueurs mentionnés précédemment appelé MediaElement.js (mediaelementjs.com). C'est une bibliothèque JavaScript open source (MIT/GLPv2) qui inclut les lecteurs Flash et Silverlight spéciales qui imitent l'API HTML5. Au lieu d'un lecteur Flash totalement distinct, MediaElement.js utilise Flash seulement pour rendre la vidéo et ensuite encapsule la vidéo avec un objet JavaScript qui ressemble à l'API du HTML5. Cela met effectivement à tous les navigateurs donc ils peuvent utiliser la balise vidéo et codecs supplémentaires pas nativement pris en charge. Pour démarrer le lecteur avec un fichier h.264 unique à l'aide de jQuery, vous devez uniquement le code suivant :
<video id="video1" width="640" height="360" src="video.mp4" controls></video>
<script>
jQuery(document).ready(function() {
$("video1").mediaelementplayer();
});
</script>
Pour les navigateurs qui ne supportent pas la balise vidéo (comme Internet Explorer 8) ou ceux qui ne prennent en charge h.264 (Firefox et Opera), MediaElement.js insère le Flash (ou Silverlight, selon ce que l'utilisateur a installé) shim à ces navigateurs « upgrade » donc ils gagnent les HTML5 médias propriétés et les événements, j'ai couvert.
Pour le support audio, vous pouvez utiliser un seul fichier MP3 :
<audio id="audio1" src="audio.mp3" controls></audio>
Alternativement, vous pouvez inclure un fichier Ogg/Vorbis :
<audio id="audio1" src="audio.oga" controls></audio>
Encore une fois, pour les navigateurs qui ne supportent pas la balise audio (Internet Explorer 8) ou celles qui ne supportent pas Ogg/Vorbis (Safari et Internet Explorer 9++), MediaElement.js va insérer une cale pour les navigateurs "upgrade" donc ils sont tous fonctionnent comme si ils ont pris en charge nativement le codec. (Note : Ogg/Vorbis ne sera pas jouable sur des appareils mobiles.)
MediaElement.js inclut également le support pour l'élément track, ainsi que le mode plein écran pour les navigateurs qui ont mis en place l'API JavaScript natif. Vous pouvez ajouter vos propres événements HTML5 ou suivre les propriétés et il travaillera dans chaque navigateur et appareil mobile.
J'espère que j'ai montré que, malgré quelques bizarreries, les éléments audio et vidéos HTML5, surtout avec les bibliothèques excellents que je l'ai laissé entendre, sont faciles à ajouter aux sites Web déjà existants et devrait être la valeur par défaut pour les nouveaux projets.
John Dyer est directeur du développement Web pour les Dallas Theological Seminary (dts.edu). Blogs d'a à j.hn.
Grâce à des experts techniques suivants pour l'examen de cet article : John Hrvatin et Satrom de Brandon