This translation is incomplete. Please help translate this article from English.

Ara que estem a gust afegint imatges senzilles a una pàgina web, el següent pas és començar a afegir els reproductors de vídeo i àudio als documents HTML! En aquest article veurem com es fa exactament això amb els elements <video> i <audio>; després acabarem mirant com afegir títols/subtítols als vídeos

Requisits previs: Coneixements bàsics d'informàtica, instal.lació programari bàsic, coneixements bàsics de treballar amb arxius, familiaritzar-se amb els fonaments HTML (com s'explica en Inici en HTML) i Imatges en HTML.
Objectiu: Aprendre com incrustar vídeo i àudio en una pàgina web, i afegir títols/subtítols a un vídeo.

Àudio i vídeo a la web

Els desenvolupadors web han volgut utilitzar vídeo i àudio a la web des de fa molt de temps, des de la dècada del 2000, quan vam començar a tenir un ample de banda prou ràpid com per suportar qualsevol tipus de vídeo (els arxius de vídeo són molt més grans que els de text o fins i tot les imatges). En els primers dies, les tecnologies web natives com HTML no tenien la capacitat d'integrar vídeo i àudio a la web, per la qual cosa les tecnologies propietàries (basades en el plug-in) com Flash (i més tard, Silverlight) es van fer populars per al maneig d'aquests continguts. Aquest tipus de tecnologia funcionan bé, però tenen una sèrie de problemes, incloent, que no funcionan bé amb les característiques HTML/CSS, problemes de seguretat i problemes d'accessibilitat.

Una solució nativa resoldria gran part d'això si es feia bé. Afortunadament, uns anys més tard, l'especificació HTML5 havia afegit aquestes característiques, amb els elements <video> i <audio>, i alguns nous i brillants JavaScript APIs per controlar-los. No estarem veient JavaScript aquí - només els fonaments bàsics que es poden aconseguir amb HTML.

No estem per ensenyar com produir arxius d'àudio i vídeo - aixó requereix un conjunt d'habilitats completament diferents. Us hem proporcionat unes mostres d'arxiu d'àudio i vídeo i codi d'exemple perquè pugueu experimentar, en cas que no pugueu aconseguir-ho vosaltres mateixos.

Nota: Abans de començar aquí, també s'ha de saber que hi ha un bon nombre OVPs (proveïdors de vídeo en línia) com YouTube, Dailymotion i Vimeo, i proveïdors d'àudio en línia com Soundcloud. Aquestes empreses ofereixen una forma còmoda i fàcil d'allotjar i consumir videos, pel que no ha de preocupar l'enorme consum d'ample de banda. OVP, fins i tot, en general, ofereix codi ja preparat per incrustar vídeo/àudio a les seves pàgines web. Si anem per aquest camí, es pot evitar algunes de les dificultats que es discuteixen en aquest article. Estarem discutint aquest tipus de servei, una mica més, en el proper article.

L'element <video>

L'element <video> permet incrustar un vídeo molt fàcilment. Un exemple realment senzill és el següent:

<video src="rabbit320.webm" controls>
  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.webm">link to the video</a> instead.</p> 
</video>

Les característiques de la nota són:

src
De la mateixa manera que l'element <img>, l'atribut src conté una ruta d'accés al vídeo que es vol incrustar. Funciona exactament de la mateixa manera.
controls
Els usuaris han de poder controlar la reproducció de vídeo i d'àudio (és especialment important per a les víctimes de l'epilepsia.) S'ha d'utilitzar l'atribut controls per incloure la pròpia interfície de control del navegador, o construir la interfície amb l'API JavaScript apropiat. Com a mínim, la interfície ha d'incloure una manera d'iniciar i aturar els medis i ajustar el volum.
El paràgraf dins de les etiquetes <video>

Això es coneix com a contingut alternatiu - aquest és mostrat si el navegador per accedir a la pàgina no és compatible amb l'element <video>, ens permet oferir una alternativa per a navegadors antics. Això pot ser qualsevol cosa; en aquest cas, hem proporcionat un enllaç directe a l'arxiu de vídeo, de manera que l'usuari pogui, almenys, tenir accés a ell, d'alguna manera, independentment de quin navegador estan fent servir.

El vídeo incrustat es veurà semblant a això:

A simple video player showing a video of a small white rabbit

Podeu provar l'exemple viu aquí ( vegeu també el codi font.)

Suport de múltiples formats

Hi ha un problema amb l'exemple anterior, el qual us haureu adonat al intentar accedir a l'enllaç directe, anteriorment, amb un navegador com Safari o Internet Explorer. El vídeo no es reprodueix! Això és perquè diferents navegadors suporten diferents formats de vídeo (i àudio).

Anem a través de la terminologia ràpidament. Formats com MP3, MP4 i WebM es diuen formats contenidors. Contenen diferents parts en què es compon la cançó o vídeo - com una pista d'àudio, una pista de vídeo (en el cas del vídeo), i les metadades per descriure els medis en que són presentats.

Les pistes d'àudio i vídeo estan també en diferents formats, per exemple:

  • Un contenidor WebM generalment empaqueta àudio Ogg Vorbis amb vídeo VP8/VP9. Això és recolzat principalment en Firefox i Chrome.
  • Un contenidor MP4 sovint empaqueta àudio AAC o MP3 amb vídeo H.264. Això és recolzat principalment a Internet Explorer i Safari.
  • El contenidor Ogg més antic tendeix a anar amb àudio Ogg Vorbis i vídeo Ogg Theora . Això estava recolzat principalment en Firefox i Chrome, però bàsicament ha estat substituït pel format WebM de millor qualitat.

Un reproductor d'àudio tendeix a reproduir una pista d'àudio directament, per exemple, un arxiu MP3 o Ogg. Aquests no necessiten contenidors.

Nota: No és tan senzill, com es pot veure a la nostra taula de compatibilitat de còdec d'àudio i de vídeo. A més, molts navegadors de plataformes mòbils poden reproduir un format no suportat lliurant-ho al reproductor multimèdia del sistema subjacent per reproduir-ho. Però això ho farà ara com ara.

Els formats anteriors existeixen per comprimir video i àudio en arxius manejables (el video i l'àudio en brut són molt grans). Els navegadors contenen diferents Codecs, com Vorbis o H.264, que s'utilitzen per convertir el so comprimit i el vídeo en dígits binaris i a l'inrevés. Com hem indicar anteriorment, els navegadors per desgràcia no tots suporten als mateixos còdecs, pel que s'haurà de proporcionar diversos arxius per a cada producció de medis. Si falta el còdec adequat per descodificar el medi, simplement no es reproduirà.

Nota: És possible que ens pregunten per què existeix aquesta situació. MP3 (per a àudio) i MP4/H.264 (per a vídeo) són àmpliament recolzats, i de bona qualitat. No obstant això, també són gravats per patents - patents nord-americanes que cobreixen MP3 fins almenys 2017, i H.264 fins 2027 com molt aviat, el que significa que els navegadors que no tenen la patent han de pagar grans summes de diners per recolzar aquests formats. A més, moltes persones eviten el programari restringit en principi, a favor dels formats oberts. Aquesta és la raó per la qual hem de proporcionar múltiples formats per a diferents navegadors.

Llavors, com fem això? Fer una ullada a el següent exemple actualitzat (prova-ho qui viu aquí, també):

<video controls>
  <source src="rabbit320.mp4" type="video/mp4">
  <source src="rabbit320.webm" type="video/webm">
  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
</video>

Aquí hem pres l'atribut src fora de l'etiqueta <video> actual, i en el seu lloc hem inclòs elements <source>, per separat, que apunten a les seves pròpies fonts. En aquest cas, el navegador va a través dels elements <source> i reprodueix el primer còdec que té que donar suport. Incloent les fonts de WebM i MP4 hauria de ser suficient per reproduir els vídeos a la majoria de plataformes i navegadors actuals.

Cada element <source> també té un atribut type. Aquest és opcional, però s'aconsella que s'inclogui - conté el MIME types dels arxius de vídeo i els navegadors poden llegir aquests i saltar immediatament els vídeos que no entenen. Si no està inclòs, els navegadors carregan i tractan de reproduir cada arxiu fins a trobar un que funcioni, prenent encara més temps i recursos.

Nota: El nostre article sobre els formats dels medis compatibles conté alguna cosa en comú MIME types.

Altres característiques de <video>

Hi ha una sèrie d'altres característiques que es poden incloure en un vídeo HTML5. Fer una ullada al nostre tercer exemple, a continuació:

<video controls width="400" height="400"
       autoplay loop muted
       poster="poster.png">
  <source src="rabbit320.mp4" type="video/mp4">
  <source src="rabbit320.webm" type="video/webm">
  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
</video>

Això ens donarà una sortida semblant alguna cosa com això:

A video player showing a poster image before it plays. The poster image says HTML5 video example, OMG hell yeah! Les noves característiques són:

width and height
Es pot controlar la mida del vídeo, ja sigui amb aquests atributs o amb CSS. En ambdós casos, els vídeos mantenen la seva relació amplada-alçada nativa - coneguda com la relació d'aspecte. Si la relació d'aspecte no es manté per les mides que s'hagin definit, el vídeo creixerà per omplir l'espai horitzontal, i l'espai sense omplir acabarà tinguen un color de fons sòlid per defecte.
autoplay
Aquest atribut fa que l'inici d'àudio o vídeo es reprodueixi immediatament, mentre que la resta de la pàgina s'està carregant. Es recomana no utilitzar el vídeo en reproducció automàtica (o àudio) en els vostres llocs, ja que els usuaris poden trobar que és realment molest.
loop
Aquest atribut fa que el vídeo (o àudio) comenci reproduir-se, de nou, cada vegada que acabi. Això també pot ser molest, de manera que només s'utilitzi quan sigui realment necessari.
muted
Aquest atribut fa que el medi es reprodueixi amb el so desactivat per defecte.
poster
Aquest atribut pren com a valor l'adreça URL d'una imatge, que es podrà veure abans de reproduir-se el vídeo. Està destinat a ser utilitzat per a una pantalla de presentació o de publicitat.
preload

Aquest atribut s'utilitza en l'element per emmagatzemar en búfer arxius grans. Pot prendre un dels 3 valors:

  • "none" no emmagatzema l'arxiu en búfer
  • "auto" emmagatzema l'arxiu multimèdia en búfer
  • "metadata" només emmagatzema en búfer les metadades de l'arxiu

Es pot trobar l'exemple anterior disponible per reproduir en viu en Github (també veureu el codi font.) Recordeu que no hem inclòs l'atribut de reproducció automàtica en la versió en viu - si el vídeo comença a reproduir-se tan aviat com es carrega la pàgina, no es veurà el cartell!

L'element <audio>

L'element <audio> funciona exactament de la mateixa manera que l'element <video>, amb algunes petites diferències com s'indica a continuació. Un exemple típic podria ser així:

<audio controls>
  <source src="viper.mp3" type="audio/mp3">
  <source src="viper.ogg" type="audio/ogg">
  <p>Your browser doesn't support HTML5 audio. Here is a <a href="viper.mp3">link to the audio</a> instead.</p>
</audio>

Això produeix alguna cosa, com el següent, en un navegador:

A simple audio player with a play button, timer, volume control, and progress bar

Aquest ocupa menys espai que un reproductor de vídeo, ja que no hi ha component visual - només ha de mostrar els controls per reproduir l'àudio. Altres diferències amb el vídeo HTML5 són els següents:

  • L'element <audio> no suporta els atributs width/height - de nou, no hi ha cap component visual, de manera que no hi ha res per assignar una amplada o l'alçada.
  • Així mateix, no és compatible amb l'atribut poster - de nou, cap component visual.

A part d'això, <audio> suporta les mateixes característiques que <video> - reviseu les seccions anteriors per obtenir més informació sobre ells.

Visualitzar pistes de text de vídeo

Ara parlarem d'un concepte una mica més avançat que és molt útil conèixer. Moltes persones no poden o no volen escoltar el contingut d'àudio/vídeo que troben a la web, almenys en determinats moments. Per exemple:

  • Moltes persones tenen problemes auditius (més comunament coneguda com problemes d'audició o sordesa) pel que no poden sentir l'àudio.
  • Altres poden no ser capaços d'escoltar l'àudio perquè es troben en ambients sorollosos (com un bar ple de gent quan s'està veient un joc d'esports) o no voldrien molestar a altres persones si estan en un lloc tranquil (com una biblioteca.)
  • Les persones que no parlen l'idioma del vídeo, pot ser que vulguin una transcripció del text traduït o fins i tot una ajuda per entendre el contingut del medi.

No seria agradable proporcionar a aquestes persones amb una transcripció de les paraules que es parla en l'àudio/vídeo? Bé, gràcies a vídeo HTML5, es pot amb el format WebVTT i l'element <track>.

Nota: "transcriure" i "transcripció" vol dir escriure les paraules parlades com a text.

WebVTT és un format per escriure arxius de text que contenen diverses cadenes de text juntament amb metadades, així com a quina hora volem que en el video, es mostri cada cadena de text i fins i tot informació limitada d'estil/posicionament. Aquestes cadenes de text s'anomenen senyals, i també poden mostrar diferents tipus per a diferents propòsits, sent els més comuns:

subtitles
Traduccions de material estranger, per a persones que no entenen les paraules pronunciades en l'àudio.
captions
Transcripcions sincronitzades de diàleg o descripcions de sons significatius, permeten a les persones que no poden sentir l'àudio entendre el que està passant.
timed descriptions
Text per a la conversió a àudio, serveix a les persones amb discapacitat visual.

Un arxiu típic WebVTT es veurà així:

WEBVTT

1
00:00:22.230 --> 00:00:24.606
This is the first subtitle.

2
00:00:30.739 --> 00:00:34.074
This is the second.

  ...

Perquè es visualitzi juntament amb la reproducció de medis HTML, cal:

  1. Guardar-ho com un arxiu .vtt en un lloc sensible.
  2. Enllaçar al arxiu .vtt amb l'element <track>. <track> ha de ser col·locat dins <audio> o <video>, però després de tots els <source>. Utilitzar l'atribut kind per especificar si els senyals són subtitles, captions o descriptions. A més, utilitzar srclang per indicar al navegador l'idioma en què s'han escrit els subtítols.

Heus aquí un exemple:

<video controls>
    <source src="example.mp4" type="video/mp4">
    <source src="example.webm" type="video/webm">
    <track kind="subtitles" src="subtitles_en.vtt" srclang="en">
</video>

Això resultarà un vídeo que mostrarà subtítols, agradable com aixó:

Video player with stand controls such as play, stop, volume, and captions on and off. The video playing shows a scene of a man holding a spear-like weapon, and a caption reads "Esta hoja tiene pasado oscuro."

Per a més detalls, si us plau llegiu Afegir llegendes i subtitols a video HTML5. Es pot trobar l'exemple que acompanya aquest article a Github, escrit per Ian Devlin (veureu també el codi font .) En aquest exemple s'utilitza una mica de JavaScript per permetre als usuaris triar entre diferents subtítols. Recordeu que per activar els subtítols, cal prémer el botó "CC" i seleccionar una opció - English, Deutch o Español.

Nota: Les pistes de text també ajudan amb SEO, ja que els motors de cerca prosperen especialment en el text. Les pistes de text, fins i tot, permeten que els motors de cerca enllacin directament a un lloc parcial a través del vídeo.

Aprenentatge actiu: Incrustar el nostre àudio i vídeo

Per a aquest aprenentatge actiu, ens agradaria (idealment) que sortíssiu al món i registréssiu alguns vídeos i àudio - la majoria dels telèfons, avui dia, permeten gravar àudio i vídeo molt fàcilment, i sempre es pot transferir al ordinador, ho podeu fer servir. Podria ser necessari fer una mica de conversió acabant amb un WebM i MP4 en el cas de vídeo, i un MP3 i Ogg en el cas de l'àudio, però hi ha suficients programes que permeten fer això sense masses problemes, com Miro Video Converter i Audacity. Ens agradaria que ho provéssiu!

Si no podeu tenir qualsevol font de vídeo o d'àudio, llavors sou lliures d'utilitzar els nostres arxius d'àudio i vídeo d'exemple per dur a terme aquest exercici. També es pot utilitzar el nostre codi d'exemple com a referència.

Ens agradaria que:

  1. Guardar els arxius d'àudio i vídeo en un nou directori a l'equip.
  2. Crear un nou arxiu HTML en el mateix directori, anomenat index.html.
  3. Afegir els elements <audio> i <video> a la pàgina; fer que es mostrin els controls del navegador per defecte.
  4. Proporcionar, a tots dos, elements <source> perquè els navegadors trobin el format d'àudio que millor suportin i carregar-lo. Aquests han d'incloure els atributs type.
  5. Donar a l'element <vídeo> un cartell que es mostrarà abans que el vídeo comenci a ser reproduït. Divertir-vos creant el vostre cartell gràfic.

Per a un bo addicional, es podria intentar investigar les pistes de text, i trobar la manera d'afegir una mica de subtítols al vídeo.

Sumari

I això és un embolcall; esperem que us hagi divertit jugar amb vídeo i àudio en les pàgines web! En el proper article, veurem altres formes d'inserir continguts a la web, utilitzant tecnologies com <iframe> i <object>.

Veure

Document Tags and Contributors

 Contributors to this page: Legioinvicta
 Last updated by: Legioinvicta,