Condividi tramite

Il presente articolo è stato tradotto automaticamente.

Creazione di applicazioni HTML5

Pratica tecnologia HTML5 per audio e video multibrowser

John Dyer

Scaricare il codice di esempio

Quando sono stati introdotti i tag audio e video di HTML5, incompatibilità codec e browser li rendeva difficile da usare e irrealistica di distribuire su siti Web su larga scala.I tag sono stati grandi per le aziende di scrittura del codice sperimentale o fare cross-browser media sviluppo, ma i mezzi di comunicazione di HTML5 API era troppo inaffidabili per uso generale.

Oggi, le cose sono diverse.Browser e librerie JavaScript hanno maturato al punto dove è possibile — e dovrebbe — utilizzare i media HTML5 come impostazione predefinita per tutti i progetti che visualizzerà i contenuti audio e video.Retrofitting anche Silverlight e Flash esistenti contenuti video per la riproduzione di HTML5 sono diventato abbastanza semplici.In questo articolo, I potrai esplorare i vantaggi dell'utilizzo di HTML5 per la riproduzione multimediale, mostrano qualche codice di esempio, affrontare alcune questioni importanti che gli sviluppatori di fronte e presentano soluzioni a tali problemi.

Vantaggi di HTML5 Media

Il vantaggio dell'utilizzo di HTML5 per media è che è possibile sfruttare le vostre abilità HTML, CSS e JavaScript piuttosto che imparare Flash o Silverlight.Se potete creare pulsanti in HTML e controllarli con JavaScript, si sa già tutto il che necessario per sviluppare mezzi HTML5.HTML5 media ha il supporto incorporato per le didascalie e sottotitoli utilizzando il nuovo elemento di traccia e proposte per funzionalità aggiuntive — come ad esempio l'accesso di byte per la manipolazione video diretto — sono già considerati.

Inoltre, mezzi di comunicazione che utilizza audio e video di HTML5 esegue meglio di supporti svolto attraverso plug-in come Flash o Silverlight, con conseguente durata della batteria e la riproduzione liscia.Inoltre, i dispositivi mobili in esecuzione Windows Phone 7.5, Apple iOS e Android (nonché il browser della metropolitana in stile Windows 8) supporta la riproduzione multimediale solo attraverso HTML5 audio e video.Alcuni dispositivi Android comprendono Flash, ma Adobe ha recentemente cessato il suoi sforzi Flash mobili, il che significa che HTML5 sarà l'unico modo per riprodurre contenuti multimediali su dispositivi mobili in futuro.

Controlli e semplice riproduzione di HTML5

Nei giorni di utilizzo di Flash o Silverlight per la riproduzione video, il più semplice possibile markup per visualizzare un video (video.mp4 in questo caso) avrebbe guardato qualcosa come questo:

<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>

Confrontare questi oggetto nidificato, param e incorporare tag con questo HTML5 video tag utilizzato per riprodurre lo stesso video con codifica h. 264:

<video src="video.mp4" controls></video>

Essa è molto più semplice — solo un semplice codice HTML che ha bisogno di spiegazione molto poco. Quando il browser ha scaricato abbastanza di un video per determinare la larghezza e l'altezza nativo, ridimensiona il video di conseguenza. Ma, proprio come con tag img, è sempre meglio specificare gli attributi di altezza e la larghezza in modo che la pagina non ha bisogno di riflusso. È anche possibile utilizzare l'attributo style per specificare px o % valori width e height (potrai utilizzare entrambi negli esempi che seguono).

L'uno attributo che ho aggiunto è controlli. Questo dice al browser di visualizzare la propria barra di controllo la riproduzione incorporato, che di solito comprende un cavicchio play/pausa, un indicatore di progresso e controlli di volume. Controlli è un attributo booleano, il che significa che non ha bisogno di avere assegnato un valore. Per una sintassi più XHTML-come si potrebbero scrivere controlli = "controlli", ma il browser sempre ritiene controlli per essere false se non è presente e vero se è presente o assegnato un valore.

HTML5 Media attributi e bambino fonte Tags

Gli elementi audio e video introducono molti nuovi attributi che determinano come il browser presenterà i contenuti multimediali per l'utente finale.

  • src consente di specificare un file singolo multimediale per la riproduzione (per fonti multiple con diversi codec, si veda la discussione che segue).
  • manifesto è un URL a un'immagine che verrà visualizzata prima che un utente preme Play (solo video).
  • precarico determina come e quando il browser verrà caricato il file multimediale utilizzando tre possibili valori: nessuno si intende che il video non scaricherà fino a quando l'utente avvia la riproduzione; metadati dice al browser di scaricare dati appena sufficienti per determinare l'altezza, la larghezza e la durata dei mezzi di comunicazione; auto lascia il browser decidere quanto di video per iniziare a scaricare prima che l'utente avvia la riproduzione.
  • Autoplay è un attributo booleano utilizzato per avviare un video, non appena la pagina viene caricata (dispositivi mobili spesso ignorano questo per preservare la larghezza di banda).
  • ciclo è un attributo booleano che provoca un video di ricominciare quando raggiunge la fine.
  • silenziato è un attributo booleano che specifica se il video dovrebbe iniziare in sordina.
  • controlli è un attributo booleano che indica se il browser dovrebbe visualizzare controlli propri.
  • larghezza e altezza raccontare un video per visualizzare a una certa dimensione (video solo; non può essere una percentuale).

Tracce di testo temporizzata

I browser sono anche inizio per implementare l'elemento della pista, che fornisce i sottotitoli, chiuso didascalie, traduzioni e commenti ai video. Ecco un video elemento con un elemento di traccia del figlio:

<video id="video1" width="640" height="360" preload="none" controls>
  <track src="subtitles.vtt" srclang="en" kind="subtitles" label="English subtitles">
</video>

In questo esempio, io ho usato quattro dei cinque possibili attributi dell'elemento brano:

  • src è un link a un file Web Video Timed Text (WebVTT) o a un file Timed Text Markup Language (TTML).
  • srclang è la lingua del file (ad esempio, en, es o ar) TTML.
  • tipo indica il tipo di contenuto di testo: sottotitoli, didascalie, descrizioni, capitoli o metadati.
  • etichetta contiene il testo visualizzato per un utente scegliendo una traccia.
  • predefinito è un attributo booleano che determina l'elemento di traccia di avvio.

WebVTT è un semplice formato testuale che inizia con una riga singola dichiarazione (FILE WEBVTT) e poi liste di iniziano e finiscono volte separati da--> caratteri, seguita dal testo da visualizzare tra due volte. Ecco un semplice file di WebVTT che verrà visualizzate due righe di testo a due intervalli di tempo diversi:

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.

Stesura di questo documento, solo Internet Explorer 10 Platform Preview e Chrome 19 supportano l'elemento di traccia, ma altri browser è attesi a farlo presto. Alcune delle librerie JavaScript discutere di più tardi aggiungere il supporto per l'elemento di traccia nei browser che non hanno ancora attuato esso, ma c'è anche una biblioteca di pista indipendente chiamata captionator.js (captionatorjs.com) che analizza traccia tag, legge WebVTT e TTML (come pure SRT e YouTube SBV) file e fornisce un'interfaccia utente per i browser che non hanno ancora il supporto nativo.

HTML5 Media di scripting

In precedenza, ho usato l'attributo controlli per dire al browser per visualizzare i relativi controlli nativi sui tag audio o video. Il problema di questo è che ogni browser ha un diverso insieme di controlli che è improbabile che abbinare il design del tuo sito Web. Per creare un'esperienza coerenza, potete rimuovere i controlli del browser e quindi aggiungere pulsanti personalizzati alla pagina che controlla con JavaScript. È inoltre possibile aggiungere listener di eventi per tenere traccia dello stato della riproduzione audio o video. Nell'esempio seguente, ho rimosso l'attributo controlli e markup sotto il video per servire come una barra di controllo di base ha aggiunto:

<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>

La semplice JavaScript in Figura 1 controllare la riproduzione video e visualizza l'attuale tempo nel video e creerà il giocatore completo di lavoro rappresentato in Figura 2(rendered in Internet Explorer 9). (Notare che in HTML5, il tipo = "text/javascript" attributo non è richiesta sul tag script.)

Figura 1 controllando la riproduzione Video

<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);
}

})();

A Working Video Player That Shows the Time
Figura 2 Player Video che mostra l'orario di lavoro

Il codice in Figura 1 introduce il gioco e pausa metodi, le proprietà currentTime e durata in pausa, si è conclusa e gli eventi timeupdate e loadedmetadata. Il completo supporto HTML5 API (w3.org/TR/html5/video.html) comprende molto di più che può essere utilizzato per costruire un vero e proprio media player. Oltre all'HTML5 supporti etichetta gli attributi elencati in precedenza, HTML5 oggetti multimediali hanno altre proprietà accessibile solo via JavaScript:

  • currentSrc descrive il file multimediale il browser attualmente sta giocando quando vengono utilizzati tag di origine.
  • videoHeight e videoWidth indicare le dimensioni native del video.
  • volume consente di specificare un valore compreso tra 0 e 1 per indicare il volume. (Dispositivi mobili ignorano questo in favore di controlli di volume hardware.)
  • currentTime indica la posizione corrente della riproduzione in pochi secondi.
  • durata è il tempo totale in secondi del file multimediale.
  • tamponata è una matrice che indica quali porzioni del file multimediale sono stati scaricati.
  • playbackRate è la velocità alla quale, il video viene riprodotto (predefinito: 1). Cambiare questo numero per andare più veloce (1.5) o più lento (0,5).
  • si è conclusa indica se il video ha raggiunto la fine.
  • in pausa è sempre vero all'avvio e quindi falso, una volta che il video ha cominciato a giocare.
  • Cerco indica che il browser sta cercando di scaricare e spostare in una nuova posizione.

HTML5 oggetti multimediali comprendono i seguenti metodi per lo scripting:

  • giocare tenta di caricare e riprodurre il video.
  • una pausa si ferma un video attualmente in riproduzione.
  • canPlayType(type) rileva che un browser supporta i codec. Se si invia un tipo come video mp4, il browser risponderà con probabilmente, forse, non o una stringa vuota.
  • caricare viene chiamato per caricare il nuovo video se si modifica l'attributo src.

Le specifiche di mezzi di comunicazione di HTML5 fornisce 21 eventi; qui sono alcuni di quelli più comuni:

  • loadedmetadata viene generato quando la durata e le dimensioni sono noti.
  • loadeddata viene generato quando il browser può giocare dalla posizione corrente.
  • giocare inizia il video quando il video è non più in pausa o si è conclusa.
  • giocando viene generato quando la riproduzione è iniziata dopo la pausa, memorizzazione nel buffer o in cerca di
  • una pausa si ferma il video.
  • si è conclusa viene generato quando viene raggiunta la fine del video.
  • progressi indica più di file multimediale è stato scaricato.
  • Cerco è true se il browser ha cominciato a cercare.
  • cercata è false, quando il browser ha finito che cercano.
  • timeupdate gli incendi come risorsa multimediale sta giocando.
  • volumechange quando silenziato incendi o le proprietà del volume sono cambiati.

Queste proprietà, metodi ed eventi sono strumenti potenti per la presentazione di utenti con un'esperienza multimediale, tutto guidata da HTML, CSS e JavaScript. Nell'esempio in base Figura 1, creare innanzitutto variabili per tutti gli elementi della pagina:

// 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");

Quindi aggiunto un evento clic ai miei pulsanti per controllare la riproduzione di supporti. Qui attivare o disattivare il gioco e stato del video una pausa e cambiare l'etichetta sul pulsante:

// 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);

Infine, aggiungere eventi all'oggetto multimediale per monitorare il suo stato attuale. Qui, ascolta per l'evento timeupdate e l'aggiornamento, la barra di controllo per il tempo corrente dell'indicatore di riproduzione, i secondi per uno stile di minuti: secondi di formattazione:

// Update the current time
video.addEventListener("timeupdate", function() {
  current.innerHTML = formatTime(media.currentTime);
}, false);

Problemi con HTML5 Media

Purtroppo, ottenere HTML5 media per lavorare su tutti i browser e dispositivi non è abbastanza semplice come nel mio esempio. Ho già detto che non tutti i browser supportano l'elemento di traccia, e adesso rivolgo tre ulteriori problemi che incontrano quando si utilizza il tag audio e video, insieme a soluzioni per superarli. Alla fine dell'articolo, I'll introdurre alcune librerie JavaScript che tutte queste soluzioni avvolgono in pacchetti unico, facilmente implementabile.

HTML5 Audio e Video Codec supportano il primo numero affrontano quando si sviluppa con HTML5 media è il supporto incoerente per codec audio e video. Miei esempi funzionano in Internet Explorer 9 e versioni successive, cromo e Safari, ma essi non funziona in Firefox o Opera, perché anche se i browser supportano il tag video di HTML5, essi non supportano il codec h. 264. A causa di problemi di copyright, fornitori di browser sono divisi in due campi di codec, e che ci porta al grafico HTML5 Media familiare in Figura 3, mostrando che i codec lavoro con quali browser.

Supporto Codec 3 figura nei vari browser

Video IE8 IE9 + Colore Safari Cellulare Firefox Opera
MP4 (concorre) no sì sì sì sì no no
WebM (VP8/Vorbis) no installare sì no no sì sì

 

9++-Internet Explorer, Safari, Chrome e dispositivi mobili (iPhone, iPad, Android 2.1 + e Windows Phone + 7,5) supportano il codec video h. 264, che di solito viene inserito in un contenitore MP4. Firefox e Opera, al contrario, supporta il codec video VP8, che si trova all'interno del contenitore WebM. Chrome supporta WebM e si è impegnata a rimuovere il supporto h. 264 a un certo punto. Internet Explorer 9++ può rendere WebM se il codec è stato installato dall'utente finale. Infine, Firefox, Opera e Chrome supportano anche il codec Theora collocato all'interno di un contenitore Ogg, ma questo è stato in gran parte gradualmente in favore di WebM (a meno che non è necessario supportare Firefox 3. x), così ho lasciato fuori del grafico ed esempi per semplicità.

Per l'audio, i venditori di browser ancora una volta sono divise in due campi, con il primo gruppo (Internet Explorer 9, cromo e Safari) supporta il formato MP3 familiare e il secondo gruppo (Firefox e Opera) di supporto codec all'interno di un contenitore Ogg Vorbis. Molti browser può anche giocare il formato del file WAV. Vedi Figura 4.

Figura 4 supporto Audio nei vari browser

Audio IE8 IE9 + Colore Safari Cellulare Firefox Opera
MP3 no sì sì sì sì no no
Ogg Theora no installare sì no no sì sì
WAV no no forse sì sì sì sì

 

Per affrontare queste differenze, i tag video e audio supportano più tag di origine bambino, che permette di scegliere un file multimediale che può giocare browser. Ogni elemento di origine ha due attributi:

  • src consente di specificare un URL per un file multimediale.
  • tipo specifica il tipo MIME e facoltativamente il codec specifico del video.

Di offrire sia h. 264 e codec video VP8, utilizzare il seguente codice:

<video id="video1" width="640" height="360">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
</video>

Notare che la build precedenti di iOS e Android devono essere elencati per primi il file MP4.

Questo markup lavorerà su tutti i browser moderni. Il codice JavaScript sarà il controllo qualunque video decide il browser può giocare. Per l'audio, il markup è simile al seguente:

<audio id="audio1">
  <source src="audio.mp3" type="audio/mp3">
  <source src="audio.oga" type="audio/oga">
</audio>

Se stai hosting di contenuto audio o video sul proprio server, è necessario che il tipo MIME corretto per ogni file multimediale o molti browser HTML5 pronti (come Internet Explorer e Firefox) non giocherà i mezzi di comunicazione. Per aggiungere tipi MIME in IIS 7, andare alla funzionalità di visualizzazione, fare doppio clic su tipi MIME, fare clic sul pulsante Aggiungi nel riquadro azioni, aggiungere l'estensione (mp4) e il tipo MIME (video/mp4) e quindi premere OK. Poi fare lo stesso per gli altri tipi (webm e video/webm) si prevede di utilizzare.

Supporto browser meno recenti tra cui due file multimediali (ad esempio MP4 e WebM per video) rende HTML5 mezzi di lavoro in tutti i browser moderni. Ma quando browser meno recenti (ad esempio, Internet Explorer 8) incontrano il tag video, essi non è possibile visualizzare il video. Essi, tuttavia, rendering HTML mettere tra l'apertura <video> e chiusura </video> Tag. L'esempio seguente include un messaggio sollecitando gli utenti per ottenere un browser più recente:

<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>

Per consentire ai visitatori con browser-HTML5-ready per riprodurre il video, è possibile fornire un'alternativa con il Flash incorporato che svolge la stessa MP4 forniti per Internet Explorer 9, Safari e Chrome, come mostrato nella Figura 5.

Figura 5 la riproduzione di Video con 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>

Questo markup presenta tutti i browser con qualche modo di giocare video. I browser HTML5 né Flash verranno visualizzato un messaggio esortandoli per eseguire l'aggiornamento. Per ulteriori informazioni su come e perché funziona questo markup nidificato, vedere "Video per tutti" di Kroc Camen (camendesign.com/code/video_for_everybody).

Questo approccio ha alcuni inconvenienti, tuttavia. In primo luogo, c'è un sacco di markup per mantenere. In secondo luogo, è necessario codificare e memorizzare i file multimediali almeno due. E in terzo luogo, tutti i controlli HTML/JavaScript che aggiungere alla pagina non funzionerà con il lettore Flash incorporato. Più tardi, ti suggerisco di diverse librerie JavaScript che possono aiutare a superare questi problemi, ma prima, diamo affrontare una questione finale.

Schermo pieno supporto Flash e Silverlight includono una modalità a schermo intero che consente agli utenti di guardare video e altri contenuti sul proprio schermo intero. È possibile implementare questa funzionalità creando un semplice pulsante e legandolo ad un ActionScript (per Flash) o schermo intero ordine di c# (per Silverlight).

Browser di oggi hanno una simile modalità a schermo intero che gli utenti possono attivare con un comando di menu o tastiera (spesso F11 o Ctrl + F). Ma fino a poco tempo fa, nessun equivalente API JavaScript ha permesso agli sviluppatori di avviare la modalità a schermo intero da un pulsante in una pagina. Questo significava che HTML5 video potrebbe essere visualizzato solo in una "finestra completa" che ha riempito la finestra del browser, ma non l'intero schermo.

In fine del 2011, Safari, Chrome e Firefox aggiunto il supporto per il W3C proposto FullScreen API, che offre funzionalità simili a quelle in Flash e Silverlight. Il team di Opera sta attualmente lavorando su attuazione della stessa, ma il team di Internet Explorer ha, come di questa scrittura, non ancora deciso se attuerà l'API. Il browser della metropolitana in stile Windows 8 sarà a schermo intero per impostazione predefinita, ma gli utenti di Internet Explorer desktop saranno necessario immettere la modalità a schermo intero manualmente utilizzando le opzioni del menu o il tasto F11.

Per entrare in modalità schermo intero nei browser che supportano, chiamare il requestFullscreen metodo sull'elemento per essere visualizzato a schermo intero. Il comando per uscire a schermo intero viene chiamato sull'oggetto del documento: document.exitFullscreen metodo. La proposta del W3C è ancora un work in progress, quindi non mi addentrerò in modo più dettagliato, ma io sto monitoraggio dello stato dell'API sul mio blog: bit.ly/zlgxUA.

HTML5 Video e Audio librerie JavaScript

Un certo numero di sviluppatori hanno creato le librerie JavaScript che rendono HTML5 audio e video più facile integrando tutto il codice rilevante in un unico pacchetto. Alcune delle librerie meglio open source sono MediaElement.js, jPlayer, VideoJS, Projekktor, Playr e LeanBack. Troverete un elenco completo con confronto tra le funzionalità a praegnanz.de/html5video.

Tutto quello che dovete fare è fornire un tag audio o video e la biblioteca sarà automaticamente costruire un insieme di controlli personalizzati, come inserire un player Flash per i browser che non supportano la Media di HTML5. L'unico problema è che i giocatori Flash che inserire molte librerie non sempre guardare o funzionare come il giocatore HTML5. Questo significa che tutti gli eventi di HTML5 che è aggiungere non funzioneranno con il player Flash e qualsiasi CSS personalizzati utilizzare non sono visibili, neanche.

Nel mio lavoro, mi è stato chiesto di creare un lettore video HTML5 con diapositive sincronizzate e trascrizioni (vedere online.dts.edu/player per una demo). Abbiamo avuto una libreria esistente di più di 3.000 file video h. 264 e si era considerata impraticabile per transcodificare li WebM per Firefox e Opera. Abbiamo inoltre necessarie per supportare più vecchi browser come Internet Explorer 8, ma un lampo separato fallback non avrebbe funzionato perché esso non sarebbe rispondere agli eventi per le diapositive e le trascrizioni.

Per superare queste difficoltà, ho creato uno dei giocatori menzionati in precedenza chiamato MediaElement.js (mediaelementjs.com). Essa è una libreria JavaScript di open source (MIT/GLPv2) che comprende giocatori speciali Silverlight e Flash che imitano l'API di HTML5. Invece di un player Flash totalmente separato, MediaElement.js utilizza Flash solo per eseguire il rendering di video e quindi esegue il wrapping di video con un oggetto JavaScript che sembra proprio come le API di HTML5. Questo aggiornamenti efficacemente tutti i browser in modo da poter utilizzare il tag video e ulteriori codec supportati non in modo nativo. Per avviare il giocatore con un file singolo, h. 264 utilizzando jQuery, è necessario solo il codice seguente:

<video id="video1" width="640" height="360" src="video.mp4" controls></video>
<script>
jQuery(document).ready(function() {
  $("video1").mediaelementplayer();
});
</script>

Per i browser che non supportano il tag video (come Internet Explorer 8) o quelli che non supportano h. 264 (Firefox e Opera), MediaElement.js inserirà il Flash (o Silverlight, a seconda di ciò che l'utente ha installato) shim di "aggiornamento" i browser in modo essi ottenere l'HTML5 media proprietà ed eventi ho coperto.

Per il supporto audio, è possibile utilizzare un singolo file MP3:

<audio id="audio1" src="audio.mp3" controls></audio>

In alternativa, si potrebbe includere un singolo file Ogg/Vorbis:

<audio id="audio1" src="audio.oga" controls></audio>

Ancora una volta, per browser che non supportano il tag audio (Internet Explorer 8) o quelli che non supportano Ogg/Vorbis (9++-Internet Explorer e Safari), MediaElement.js inserirà un shim di "aggiornamento" i browser così tutti funzionano come se supportati in modo nativo il codec. (Nota: Ogg/Vorbis non sarà giocabile su dispositivi mobili.)

MediaElement.js include anche il supporto per la pista elemento, nonché le modalità a schermo intero nativa per i browser che hanno implementato l'API JavaScript. È possibile aggiungere i proprio eventi HTML5 o tenere traccia di proprietà e funzionerà in ogni browser e dispositivi mobili.

Spero che vi ho mostrato che, nonostante alcune stranezze, gli elementi della audio e video di HTML5, soprattutto se abbinato con le librerie eccellenti che ve ha suggerito, sono facili da aggiungere ai siti Web esistenti e dovrebbe essere il valore predefinito per tutti i nuovi progetti.

John Dyer è il direttore di sviluppo Web per il seminario teologico di Dallas (dts.edu). Ha blog a j.hn.

Grazie ai seguenti esperti tecnici per la revisione di questo articolo: John Hrvatin e Brandon Satrom