Questa domanda è molto comune, quindi ho deciso di dedicarle un articolo a parte nelle lezioni. Poiché l'HTML non dispone di una tecnologia universale per la riproduzione dell'audio per tutti i browser, per risolvere questo problema, suggerisco di scaricare il file del lettore audio, come avviene sulla maggior parte dei siti. Facciamo tutto passo dopo passo:

1. Sull'hosting in cui si trova il tuo sito, nella directory principale (la cartella in cui si trova il file indice), crea la cartella audio. In futuro, inserirai tutti i file audio al suo interno.

3. Selezionare ora i file desiderati, preferibilmente in formato mp3. Crea una cartella audio nella root del sito e caricali.

4. Resta solo da inserire il codice di connessione del giocatore. È adatto a qualsiasi sito, nel posto giusto devi solo specificare il percorso del file del lettore e del file audio, sostituendo rispettivamente le parole tuo_dominio e nome_file_audio :

E tutto è pronto! Puoi anche vedere l'esempio funzionante.

Come impostare la musica di sottofondo in html Sfruttando la potenza dell'HTML e del browser, puoi anche inserire musica di sottofondo nella pagina. Avrai bisogno di un file audio del formato richiesto: WAV, AU, MIDI o MP3. È possibile utilizzare qualsiasi file con l'estensione specificata come esempio.

Il primo modo è il tag di incorporamento. L'elemento embed viene utilizzato per caricare e visualizzare oggetti (come file video, filmati flash, alcuni file audio, ecc.) che il browser non comprende nativamente.

La sintassi è abbastanza semplice:

Il tag di chiusura non è richiesto.

Ora guardiamo un esempio di un record con attributi e di seguito con la loro decodifica:

Incorpora gli attributi dei tag per riprodurre l'audio in html
width - la larghezza del pannello in pixel (o percentuale)
height - altezza del pannello in pixel (o percentuale)
align - posizione del pannello rispetto al testo, i valori possibili sono sinistra, destra, centro
hidden - permette di nascondere il pannello, valori degli attributi: true - il pannello è nascosto, false - il pannello è visibile (valore di default)
autostart - true - il lettore si avvia automaticamente quando la pagina viene caricata, false - attende che venga premuto il pulsante di riproduzione
loop - loop, true - la traccia viene riprodotta in cerchio e quando falso- solo una volta

Il secondo modo. Molto vecchio, ma anche pratico) Aggiungi la melodia nella stessa cartella (directory) in cui si trova il tuo file e scrivi il seguente codice nel corpo:

Di conseguenza, dopo aver caricato la pagina, suonerà la melodia specificata nel tag bgsound. Ora diamo un'occhiata più da vicino agli attributi del tag:

src - percorso del file audio
loop - quante volte ripetere la melodia (se -1, si ripete all'infinito)
balance - valore di bilanciamento stereo (da -10000 a 10000)
volume - il volume della melodia, dove 0 è il massimo e -10000 è il minimo.

Tuttavia, non sarà possibile controllare il lettore in alcun modo: ogni volta che la pagina viene aggiornata, la traccia verrà riprodotta di nuovo.

Dopo aver descritto il metodo di inserimento della musica di sottofondo, voglio dissuaderti da questo, poiché la maggior parte degli utenti, di norma, ascolta già la musica al momento della visita a vari siti. Pertanto, accompagnare l'accompagnamento musicale non può che costringerlo a chiudere la scheda con il sito.

Incorporamento di audio e musica in HTML5 - tag audio
audio - un tag di coppia che definisce il suono di sottofondo, la musica o altro flusso audio sul sito.

Attributi dei tag audio

riproduzione automatica: il file viene riprodotto immediatamente al caricamento della pagina (simile alla musica di sottofondo bgsound)
controlli - visualizza il pannello di controllo del lettore nel browser
loop - riproduce nuovamente il file al termine
preload - il file audio verrà caricato insieme al caricamento della pagina
src - percorso del file audio (mp3 o ogg)

Codice di esempio con tag audio

etichetta audio

Audio in HTML 5

Il tag audio non è supportato dal tuo browser.
Scaricare musica.

Con l'avvento di connessioni Internet ragionevolmente veloci, Flash era l'unico modo per riprodurre suoni sui siti web. Ma HTML5 cambierà radicalmente il modo in cui i suoni vengono riprodotti su Internet. In questo articolo, voglio parlarti in dettaglio di come utilizzare il tag sui tuoi siti.

Utilizzare per incorporare il file audio nella pagina Di seguito è riportato l'esempio più semplice di utilizzo del tag, carica un file mp3 e lo riproduce. Si noti l'attributo autopaly, utilizzato per riprodurre automaticamente il suono. Tuttavia, non dovresti riprodurre automaticamente i suoni sul sito, poiché ciò infastidirebbe gli utenti. Riproduzione di un suono in un loopVuoi riprodurre un suono in loop? L'attributo loop ti aiuterà a farlo. Ma ancora una volta, non abusare della riproduzione automatica e del loop se non vuoi che l'utente lasci il sito prematuramente. Mostra i controlli Invece di riprodurre i suoni automaticamente, che è sicuramente una cattiva pratica, dovresti lasciare che il browser mostri alcuni controlli, come il volume e i pulsanti di riproduzione/pausa. Questo è facile da fare semplicemente aggiungendo l'attributo controls. Vari formati di fileIl tag è supportato dalla maggior parte browser moderni, ma il problema è questo diversi browser supporta diversi formati di file. Safari, ad esempio, può riprodurre MP3, ma Firefox non può e riproduce invece file OGG. La soluzione a questo problema è utilizzare entrambi i formati in modo che ogni visitatore possa ascoltare l'audio, indipendentemente dal browser utilizzato. Specificare il tipo MIME dei file Quando si utilizzano diversi formati di file, è buona norma specificare il tipo MIME per ogni file per aiutare il browser a localizzare il file che supporta. Questo può essere fatto facilmente usando l'attributo type. Per i browser meno recenti Cosa succede se il visitatore utilizza IE6 o qualche altro browser preistorico che non supporta il tag? È facile: qui sotto c'è il codice che visualizzerà un messaggio per i browser che non supportano il tag. Il tuo browser non esegue il rendering del tag audio! Buffering dei file Quando si riproducono file di grandi dimensioni, è possibile utilizzare il buffering dei file. È possibile utilizzare l'attributo preload per questo. Può assumere 3 valori:

• none - se non vuoi usare il file buffer;
• auto - se vuoi che il browser memorizzi nel buffer l'intero file;
• metadati - per caricare solo le informazioni di servizio (durata del suono, ecc.).

Controllo della riproduzione tramite JavaScript Il controllo del lettore audio HTML5 tramite JavaScript è molto semplice. L'esempio seguente mostra come utilizzando JavaScript puoi creare i controlli di base del lettore audio: Riproduci Pausa Volume + Volume -

È tutto per oggi.
Spero che questo articolo ti abbia aiutato a comprendere le basi del tag HTML5.

In precedenza, i browser non disponevano di funzionalità integrate per supportare contenuti audio e video, ma con lo sviluppo di Internet, il supporto per elementi multimediali come funzionalità dei browser moderni è diventato una necessità. HTML5 ha introdotto nuovi elementi e che sono supportati in tutti i browser moderni. Il compito principale del tag è aggiungere contenuto audio alla pagina.

Il formato del file audio determina la struttura e le caratteristiche della presentazione dei dati audio quando vengono memorizzati su un supporto di memorizzazione (dispositivo di memorizzazione). Per eliminare la ridondanza dei dati audio, di norma vengono utilizzati codec audio speciali, grazie ai quali i dati audio vengono compressi. I browser moderni supportano i seguenti 3 formati audio:

Browser Ogg MP3 Wavmusica lirica CIOÈ bordo

SÌ	SÌ	SÌ
SÌ	SÌ	SÌ
SÌ	SÌ	SÌ
SÌ	SÌ	NO
SÌ	NO	NO
SÌ	SÌ	NO

• Il formato MP3 è allo stesso tempo un codec e un contenitore. È ampiamente utilizzato ovunque per ospitare musica scaricabile.
• Il formato WAV è anche un codec e un contenitore allo stesso tempo.
• Contenitore Ogg + codec audio Vorbis. Viene comunemente chiamato "Ogg Vorbis". È stato sviluppato dalla comunità Xiph per sostituire MP3, AAC e WMA proprietari.

Tipi MIME per l'audio:

Formatta i tipi MIMEMp3 Ogg wav

audio/mpg

audio/ogg

audio/wav

Supporto browser Etichetta
musica lirica
Esploratore
bordo

	4.0	3.5	10.5	4.0	9.0	12.0

Attributi Attributo Valore Descrizione

riproduzione automatica	riproduzione automatica	Specifica che l'audio verrà riprodotto automaticamente non appena sarà pronto.
controlli	controlli	Visualizza i controlli dei file multimediali integrati (pulsante di riproduzione/pausa, dispositivo di scorrimento per passare a una clip specifica e dispositivo di scorrimento del volume).
ciclo continuo	ciclo continuo	Riproduce in loop la riproduzione del file (la nostra canzone è buona - ricomincia da capo)..
silenziato	silenziato	Specifica che l'audio verrà silenziato (nessun suono).
precarico	auto metadati nessuno	Specifica come deve essere caricato l'audio quando la pagina viene caricata. L'attributo viene ignorato se è presente l'attributo autoplay.
src	URL	Specifica l'URL del file audio.

Esempio di utilizzo

L'elemento utilizza gli stessi attributi dell'elemento, ad eccezione degli attributi width (larghezza), height (altezza) e poster (immagine visualizzata prima della riproduzione del video). Analogamente all'utilizzo dell'elemento, puoi fornire più opzioni di formato audio utilizzando l'elemento, come mostrato nell'esempio seguente:

Audio in HTML5 Audio in HTML5 Il tuo browser non supporta questo formato audio. È possibile scaricare questo file dal collegamento seguente:

Scaricamento

In questo esempio, noi:

Abbiamo aggiunto contenuto audio alla pagina ( tag ), utilizzando l'attributo controls abbiamo aggiunto la visualizzazione dei controlli integrati per un file multimediale (un pulsante di riproduzione/pausa, un dispositivo di scorrimento che consente di andare a un frammento specifico del video, così come un controllo del volume).

Descrizione

Aggiunge, riproduce e gestisce le impostazioni di registrazione audio su una pagina web. Il percorso del file viene specificato tramite l'attributo src o un tag nidificato. All'interno del contenitore è possibile scrivere del testo che verrà visualizzato nei browser che non funzionano con questo tag.

L'elenco dei codec supportati dai browser è limitato ed è riportato in Tabella. 1.

Scheda. 1. Codec e browser

Codec	Internet Explorer	Cromo	musica lirica	safari	Firefox
ogg/vorbis
wav
mp3
AAC

Per la riproduzione universale nei browser specificati, l'audio viene codificato utilizzando diversi codec ei file vengono aggiunti simultaneamente tramite il tag.

Sintassi Attributi Il suono inizia a suonare non appena la pagina viene caricata. Aggiunge un pannello di controllo a un file audio. Ripete il suono dall'inizio alla fine. Utilizzato per scaricare un file insieme al caricamento di una pagina web. Specifica il percorso del file in riproduzione. Cartellino di chiusura

Necessario.

HTML5 IE 8 IE 9+ Cr Op Sa Fx

Audio

Alexander Klimenkov - Quattordici

Il tag audio non è supportato dal tuo browser. Scaricare musica.

Esempio risultato in Navigatore Opera mostrato in fig. 1.

Riso. 1. Riproduzione file audio

Browser

I controlli di riproduzione audio differiscono tra i browser nel loro aspetto, ma gli elementi di base sono gli stessi. Questi sono il pulsante di riproduzione / pausa, la durata della traccia, il tempo di riproduzione trascorso e totale, nonché il livello del volume.

andew

2015-08-10T19:23:37+00:00

2016-02-28T17:11:05+00:00

11937

L'articolo descrive la struttura dei contenitori audio e video HTML5, i tag video, audio, sorgente, traccia e i loro attributi con i possibili valori. Vengono forniti modelli HTML ed esempi dell'implementazione della riproduzione di file multimediali basati sulle funzionalità integrate nel browser. Viene mostrato il collegamento al video di una traccia testuale di sottotitoli, titoli, sommari utilizzando file in formato WEBVTT con esempi. Presentati modelli di codice HTML5 con markup schema.org per audio e video. Sono indicati i principali formati di file audio e video web con i loro tipi MIME e gli strumenti per convertire video e audio in questi formati.

HTML5 ha nuove funzionalità che ti consentono di riprodurre file audio e video direttamente dal browser senza utilizzare programmi di terze parti. Finora, mentre HTML5 non è più nuovo, c'è ancora disaccordo su come i browser gestiscono i tag video e audio e su come rendono il player stesso. Alcuni lo fanno meglio con ciascuno nuova versione altri sono ancora in ritardo. A livello globale, la tendenza è che i browser forniranno sempre più funzionalità per la riproduzione di file multimediali.

Screencast: un esempio di utilizzo dei modelli

Scarica video

Screencast: esempi di utilizzo dei modelli dall'articolo - sito web

Il video e l'audio HTML5 sono uno standard in evoluzione e non sono associati a nessun formato audio o video, quindi ci sono differenze tra i browser in ciò che supportano. formati file audio e video. Questa differenza è ora compensata codificando il file originale con diversi codec e collegando tutte queste versioni dei file a tag o tramite tag nidificati< source src=" URL">. Tuttavia, tra i formati di file audio e video supportati dai browser, stanno emergendo i leader. Per il video è ovviamente il formato mp4 (H.264) e per l'audio è il formato mp3 e m4a. Ora, probabilmente, tutti i browser sono in grado di riprodurre file di questi formati. Anche, Browser Firefox, Chrome e Opera hanno concordato di supportare lo standard WEBM come formato video comune. Dal mio punto di vista l'utilizzo ottimale di video e audio HTML5 per ora sarebbe uno schema basato sull'utilizzo di un unico file multimediale in formato mp4 ( H.264) per video e m4a per audio e lettore JS HTML5. Solo un file nel formato specificato è collegato al contenitore audio o video. Ora la maggior parte dei browser è in grado di riprodurre il formato mp4. La libreria JS connessa modellerà il lettore integrato nel browser. Se il browser non supporta il formato mp4 /m4a, allora il player JS, in questo caso, implementa la connessione Flash Player per riprodurre il file multimediale. Dato che il formato mp4 è diventato molto popolare, possiamo sperare in una bassa probabilità di problemi con la sua riproduzione nei browser. Questo schema richiede un solo file multimediale nel formato specificato, che consente di risparmiare spazio su disco e risorse di elaborazione dei file. Inoltre, tale schema sarà strategicamente più corretto, poiché la tendenza è che i browser eseguano un'implementazione maggiore e migliore di video e audio HTML5.

Per specificare il player HTML5 per riprodurre il file, oltre all'URL del file, è necessario passare il tipo MIME del file, in modo che il browser capisca quale codec deve utilizzare. La tabella seguente elenca i formati di file più comuni e i relativi tipi MIME.

Formati di file e loro tipi MIME Estensioni file multimediali Tipo MIME

sonoro mp3	mp3	audio/mpg
Audio mp4	m4a	audio/mp4
audio webm	webm	audio/webm
audio ogg	ogg	audio/ogg
Video mp4 (H.264)	mp4	video/mp4
Video webm	webm	video/webm
Video ogg	ogv	video/ogg

Strumenti per la codifica di file audio e video

Per codificare file video e audio nei formati web di cui sopra, puoi utilizzare programma aperto, che supporta la conversione di file audio e video nei principali formati comuni per il web ( MP4, WebM, Ogg Theora, MP3 ecc.). Mirò Convertitore video disponibile per diversi sistemi operativi- Windows, Mac e Linux ed è guscio grafico per le utilità della console e che sono convenienti da utilizzare su un server Web per elaborare video e audio scaricati in modalità automatica.

: codice di esempio audio HTML5 con micro-markup schema.org: Titolo audio

L'audio HTML5 non è supportato dal tuo browser.

Scarica l'audio

Ecco come appariranno i dati di markup estratti dal codice per il modello audio sopra descritto.

Audioobject itemType = http://schema.org/AudioObject name = Audio title description = Audio description... isfamilyfriendly = true encodingformat = mp3 duration = PT04M59S uploaddate = 2015-12-31 image = URL completo di image.jpg alternatename = Alternativo titolo audio contenturl href = URL del file.mp3 text = Scarica l'audio autore person itemType = http://schema.org/Person url href = URL text = Nome dell'autore name = Nome dell'autore image = URL completo di person.jpg

Il markup audio schema.org minimo deve includere itemprop ="name" , itemprop ="description" , itemprop ="contentUrl" . Il resto delle proprietà è facoltativo.

Un esempio dell'uso standard del tag HTML5:

Nella demo, ho richiesto il tag tramite attributo di classe Stili CSS che rendono dinamica la larghezza dell'area video in base alle dimensioni dello schermo. L'altezza del giocatore si regola da sola. Prova a ridimensionare la finestra del browser per vedere come funziona. Pertanto, nel codice sorgente di questa demo, non ci sono attributi di larghezza e altezza per il tag, sono sostituiti dagli stili CSS. Ma nell'elenco del codice del modello, questa accettazione non è mostrata, perché è già privato.

Codice di esempio video HTML5 con markup schema.org: titolo del video

Guarda su YouTube

Il video HTML5 non è supportato dal tuo browser.

Scarica video: titolo del video

Ecco come appariranno i dati di microdati estratti dal codice per il modello video sopra descritto.

Videoobject itemType = http://schema.org/VideoObject name = Miniatura del titolo del video imageobject itemType = http://schema.org/ImageObject contenturl = URL di video-thumbnail.jpg|png width = 100 height = 100 duration = PT14M59S isfamilyfriendly = vera data di caricamento = 2015-12-31 Breve descrizione per i video... url href = URL del file.mp4 text = Titolo del video autore person itemType = http://schema.org/Person url href = URL della pagina web dell'autore text = nome dell'autore name = nome dell'autore image = URL completo to author.jpg thumbnailurl = URL di file.jpg|png

Minimo necessario per i motori di ricerca, il markup video di schema.org dovrebbe includere tutte le proprietà itemprop fornite nel codice di esempio, ad eccezione del blocco itemprop ="author", che è facoltativo per i motori di ricerca e può essere rimosso se non ci sono dati per riempirlo. Per la miniatura video, Yandex richiede che il markup schema.org sia specificato come itemprop ="thumbnail" come ImageObject e Google richiede itemprop ="thumbnailUrl" , quindi devi inserire il file video-thumbnail due volte, ed è per questo che il secondo tag img ha lo stile display: none per non essere visualizzato nel browser. Invece di utilizzare il tag img con display:none, puoi passare questa proprietà come tag link tramite l'attributo href. Inoltre, nonostante il fatto che i microdati possano essere trasmessi attraverso non mostrati all'utente meta tags e link , si consiglia comunque, se possibile, di aggiungere micro-markup principalmente ai tag che verranno visualizzati dall'utente. La convalida dei microdati di Schema.org può essere eseguita a questi collegamenti: , . Il vantaggio principale dell'utilizzo del micro-markup è la praticità di tali contenuti per robot di ricerca e robot dei social network. Questi robot estraggono i dati etichettati e li aggregano. Pertanto, l'uso dei microdati migliora SEO sito e facilita la diffusione automatica dei dati in nei social network. Descrizione dettagliata dei microdati Schema.org per i video contrassegnati con lo schema VideoObjec t sul sito. Inoltre, vale la pena notare che per i casi in cui non incorpori direttamente un video sul tuo sito, ma utilizzi i widget di hosting video Yandex.Video o YouTube, puoi aggiungere il tuo blocco di codice HTML con una descrizione del video sotto il codice del widget block e in esso per incorporare i microdati Schema.org per questo video. Allo stesso tempo, come parametro URL - collegamenti al video, non specificare un collegamento diretto a un file statico, ma impostare il collegamento ricevuto dall'hosting del video. Sebbene la specifica Schema.org affermi che il collegamento dovrebbe essere diretto a un file, i motori di ricerca elaborano anche i collegamenti ai video dall'hosting video ( vedere esempi sul sito Web Yandex nella sezione Webmaster), nonostante non sia possibile scaricare il file da tale collegamento e non sia possibile visualizzarlo direttamente nel proprio lettore multimediale HTML5 sulla pagina, solo nel widget di hosting video.

Se ti trovi di fronte alla domanda da quale hosting caricare file audio e video multimediali, guarda l'articolo, che descrive l'opzione di inserire file multimediali su una pagina WEB da Yandex Disk.

Attributi e tag:

Gli attributi src , preload , autoplay , mediagroup , loop , muted , controls sono attributi comuni per tutti gli elementi multimediali, inclusi tag e .

attributo autoplay: o o

• l'attributo autoplay è specificato dalla sua presenza nel tag o, e questo attributo non ha bisogno di essere dato un valore, solo la sua presenza è sufficiente. Per Editor HTML, che modificano il codice degli elementi, puoi impostare questo attributo come autoplay ="autoplay ", che equivale alla sola presenza dell'attributo. La presenza dell'attributo autoplay indica al browser di avviare la riproduzione del file non appena la pagina Web viene caricata. Di conseguenza, l'attributo autoplay sovrascrive i valori dell'attributo preload, che controlla il caricamento del video nel player, perché la riproduzione del video dovrebbe iniziare immediatamente e quindi dovrebbe essere caricata. Per impostazione predefinita, manca l'attributo autoplay.

attributo controls: o o

• l'attributo controls indica al browser di mostrare il pannello di controllo del lettore quando la pagina è stata caricata ma la registrazione non è iniziata. Questo attributo, così come l'attributo autoplay, è impostato solo dalla presenza nel tag o e non richiede un valore, solo la sua presenza è sufficiente. Per impostazione predefinita, questo attributo è assente, ad es. il lettore non mostra il pannello di controllo finché non inizia la riproduzione. Quando la riproduzione del file viene avviata, il pannello di controllo apparirà quando si sposta il puntatore del mouse sull'area del lettore.

attributo loop: o o

• l'attributo loop fa sì che il lettore riproduca il file in cerchio. L'attributo è specificato solo dalla sua presenza nel tag o e non ha parametri. Per impostazione predefinita, manca l'attributo loop.

attributo di precaricamento:

• L'attributo preload definisce il caricamento del file insieme al caricamento della pagina Web e accetta uno dei seguenti tre valori:
  • none - non carica il file insieme al caricamento della pagina web. Ciò significa che il file inizierà a caricarsi nel lettore solo dopo aver premuto il pulsante di riproduzione. Questo può essere utile per velocizzare il caricamento della pagina. Il valore none è il valore predefinito per l'attributo preload, quindi va bene non inserire affatto un attributo preload sul tag, o per questo caso.
  • metadati: non caricare il file insieme al caricamento della pagina Web, ma caricare i metadati del file multimediale.
  • auto - esegue il download completo del file insieme al caricamento della pagina web. In questa opzione, i browser caricheranno automaticamente il file multimediale insieme a pagina web d, ma ciò non interferirà con il caricamento della pagina stessa e il suo rendering nel browser. Se l'attributo preload ="" è impostato nel tag o con valore vuoto, verrà utilizzato il relativo valore automatico.
  • Il valore dell'attributo preload verrà sovrascritto se viene utilizzato l'attributo autoplay.

attributo src:

• l'attributo src del tag o consente di impostare immediatamente il percorso del file multimediale nel tag. Il percorso può essere completo, indicante il protocollo e il dominio, oppure relativo alla root del sito corrente. Puoi anche impostare il percorso del file nei tag nidificati nel contenitore audio o video< source src=" URL"> .

L'attributo poster del tag video:

• l'attributo poster viene utilizzato solo nel tag e specifica l'URL dell'immagine (gif, png, jpeg, ecc.) che verrà mostrata mentre il video non è disponibile. Se l'attributo poster non è impostato, il player del browser tenterà di visualizzare il primo fotogramma del video.

Gli attributi di larghezza e altezza del tag video:

• gli attributi width e height si applicano solo al tag e impostano rispettivamente la larghezza e l'altezza dell'area di riproduzione del video player. Il valore deve essere un numero intero positivo, specificato in pixel o percentuali. L'impostazione di questi attributi influisce sulle dimensioni di visualizzazione del video, ma non modifica le proporzioni del video. Il video viene adattato alle dimensioni specificate mantenendone le proporzioni. Se le dimensioni specificate non corrispondono alle proporzioni del video, saranno presenti delle barre scure nella parte superiore e/o ai lati del video. Pertanto, quando si impostano questi parametri, è desiderabile selezionare il loro rapporto uguale a quello del video riprodotto, oppure impostare solo la larghezza e il lettore si regolerà in altezza.
• Se uno o entrambi questi parametri non sono specificati, i parametri non specificati verranno presi dalla dimensione corrispondente dell'immagine specificata nell'attributo poster.
• Se manca l'attributo poster, questi parametri verranno impostati come segue: per larghezza = 300 px e per altezza = 150px. Per non calcolare e coordinare le dimensioni dell'area video alle proporzioni della clip stessa, consiglierei di impostarne solo uno parametro di larghezza, l'altezza ( height ) dell'area di riproduzione verrà selezionata automaticamente in base alle proporzioni del video.
• Inoltre, le dimensioni e il design del player HTML5 possono essere influenzati proprietà CSS applicato ai tag o .

attributo disattivato: o o

• l'attributo muted imposta la sua presenza nei tag o nel suono allo stato muto nel player HTML5. L'attributo è assente per impostazione predefinita.

attributo crossorigin:

• l'attributo crossorigin indica al browser di effettuare una richiesta CORS per questo elemento. Per impostazione predefinita, l'attributo è mancante, il che significa che non utilizza affatto le richieste CORS. I seguenti valori sono possibili quando è presente l'attributo: anonymous e use-credentials . CORS () è una moderna tecnologia browser che consente di controllare le autorizzazioni per scaricare risorse sulla pagina Web corrente da domini diversi dal dominio della pagina corrente. Il supporto del browser per lo standard CORS consente di implementare lo scambio sicuro di dati tra domini effettuando una richiesta speciale (intestazione) al dominio della pagina corrente per sapere se è consentito caricare risorse su questa pagina da un altro dominio specificato. In risposta a tale richiesta, il server deve indicare i domini da cui è consentito il caricamento delle risorse.

attributo mediagroup: div ( margine: 1em auto; posizione: relativa; larghezza: 400px; altezza: 300px; ) video ( posizione; assoluto; fondo: 0; destra: 0; ) video:first-child ( larghezza: 100%; altezza : 100%; ) video:ultimo figlio ( larghezza: 30%; )

• l'attributo mediagroup consente di combinare la gestione di più file multimediali in un MediaController creando un gruppo di file multimediali in punti diversi della pagina. Questo gruppo verrà gestito contemporaneamente per tutti i file inclusi in esso. Ciò è utile, ad esempio, se è necessario riprodurre e controllare la stessa clip contemporaneamente in punti diversi della pagina con sottotitoli diversi o clip diverse.

I tag e richiedono un tag di chiusura.

Per quei casi in cui il browser non supporta HTML5 e tag, cosa ormai molto rara, viene scritto un messaggio di testo prima del tag di chiusura del contenitore e solitamente viene aggiunto un link per scaricare il file. Se il lettore HTML5 integrato nel browser è inoltre controllato dalla libreria JS (lettore JS), la maggior parte di essi collega il flash player se è impossibile riprodurre video e audio nel browser HTML5 a causa del fatto che il browser non supporta video e audio tag o formato di file multimediale.

Etichetta:

Il percorso del file in riproduzione può anche essere impostato utilizzando il tag con l'attributo src posto all'interno dei tag o. Il tag non ha un tag di chiusura.

Nella maggior parte dei casi, il tag ha questo aspetto:

e ha sempre l'attributo src e type, che nella maggior parte dei casi ha solo un tipo MIME.

Attributi tag:

• l'attributo src= "URL" del tag specifica l'URL del file multimediale. Il percorso può essere completo, indicante il protocollo e il dominio, oppure relativo alla root del sito.
• l'attributo type="tipo MIME" del tag, o più completamente type="tipo MIME; codecs="codec"" specifica il tipo MIME e il codec del file. Per l'audio è sufficiente specificare il tipo MIME, ad esempio per .mp3 - type="audio/mpeg". Sebbene secondo le specifiche per il video, l'attributo type debba anche specificare il codec, ora è comune specificare solo il tipo MIME senza il codec, lasciando ai browser la decisione.
• l'attributo media ="all|braille|handheld|print|screen|speech|projection|tty|tv" del tag specifica il tipo di dispositivo per il quale il file deve essere riprodotto. Il valore predefinito è all, quindi nella maggior parte dei casi questo attributo non è specificato a meno che non si desideri specificare specificamente il dispositivo di riproduzione.

Etichetta:

Per i video HTML5 è anche possibile visualizzare una traccia aggiuntiva nel lettore con informazioni come sottotitoli (sottotitoli), titoli (didascalie), capitoli (capitoli), descrizioni (descrizioni - non ancora supportate) e metadati (metadati - non ancora supportati ). Questa funzionalità viene implementata aggiungendo tag con gli attributi appropriati all'interno del tag.

- non ha un tag di chiusura.

Il tag consente di allegare al video file traccia aggiuntivi in ​​uno speciale formato WebVTT (Web Video Text Tracks Format), che indicano i messaggi di testo visualizzati con il loro riferimento temporale al file video. Lo standard WebVTT supporta non solo l'output di messaggi di testo, ma fornisce anche opzioni per esso. Stili CSS izzazione e opzioni per il posizionamento nell'area di visualizzazione del video. Al momento, i file WebVTT vengono utilizzati principalmente per collegare i sottotitoli di testo ai video, che è supportato da quasi tutti i browser. Altre funzionalità dello standard WebVTT non sono ancora completamente implementate dai browser stessi, quindi, per un uso più completo di WebVTT, è meglio utilizzare i lettori JS. Inoltre, i file WebVTT possono essere utilizzati in modo non standard dai lettori JS per passare dati aggiuntivi al lettore JS, come gli URL di anteprima delle immagini per i fotogrammi video. Alla domanda su come mostrare un'anteprima dei fotogrammi video sulla barra di scorrimento del lettore (Scrub Bar Thumbnails) come avviene sull'hosting video. Va detto qui che tale funzionalità non è ancora disponibile nei lettori integrati nei browser e quindi viene implementata tramite i lettori JS come componente aggiuntivo. Per questo, è collegata una libreria JS (js player), che prende il controllo dell'oggetto video e audio HTML5 ed esegue il suo stile. Tali lettori JS per la visualizzazione di anteprime di fotogrammi video utilizzano in modo non standard i file WEBVTT dal tag per passare gli URL delle immagini di anteprima attraverso di esso.

Il file in formato WebVTT è un file di testo semplice con estensione .vtt che, sotto forma di un elenco riga per riga, contiene timestamp con ora di inizio e ora di fine e messaggi di testo per l'output su questi indicatori. Puoi allegare più file WebVTT con testo in diverse lingue a un contenitore. Per ogni lingua che devi creare fascicolo separato e collegare ciascuno tramite il tag . I tag devono essere inseriti all'interno del contenitore dopo tutti i tag ma prima dei messaggi di errore video HTML5. Il tag con il file dei sottotitoli nella lingua predefinita deve essere posizionato per primo tra i tag nel contenitore corrente.

Un file WEBVTT può contenere uno o più timestamp. Il file inizia con la parola WEBVTT. Le righe vuote separano i timestamp con il testo e gli attributi associati. Il testo può contenere elementi di markup HTML e CSS. Il timestamp può essere preceduto da un ID per esso, in modo che sia possibile accedervi utilizzando espressioni speciali. Tutti questi dettagli sono descritti nello standard WEBVTT. specifica il tipo di traccia e può assumere i seguenti valori:

• sottotitoli - sottotitoli sotto forma di testo che viene visualizzato sopra il video. Per il file in riproduzione, puoi impostare i sottotitoli in diverse lingue per fornire la loro scelta nel lettore, se lo supporta. Nella maggior parte dei casi, questo tipo viene utilizzato perché è supportato dalla maggior parte dei browser.
• didascalie - didascalie sotto forma di testo e audio che vengono visualizzate sopra il video. Simile ai sottotitoli, ma, oltre al testo, può includere effetti sonori e altre informazioni audio.
• capitoli - capitoli visualizzati come testo in un menu elenco e destinati a navigazione veloce per file multimediale.
• descrizioni - descrizione, questo file di testo con le descrizioni dei video per riprodurli nello screen reader.
• metadati - metadati da passare agli script js.

L'attributo src del tag specifica l'URL del file di traccia con Informazioni aggiuntive. Il file allegato al tag ha il formato WebVTT e l'estensione .vtt.

L'attributo srclang del tag specifica la lingua della traccia tramite il codice della lingua. Per la lingua russa sarà uguale a "ru", per l'inglese "en".

L'attributo label del tag specifica il titolo della traccia che verrà mostrata nel player. Se l'attributo non è impostato, il browser mostrerà il suo nome di servizio.

L'attributo predefinito del tag specifica la selezione predefinita di questa traccia se sono presenti altre tracce nel contenitore video. Solo uno dei numerosi tag può avere un attributo predefinito. È meglio posizionare la traccia predefinita prima tra le altre tracce collegate.

Esempio di tag: