<video>

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

L'element HTML <vídeo> s'utilitza per incrustar el contingut d'un vídeo en un document. L'element video conté una o més fonts de vídeo. Per especificar una font de vídeo, utilitzeu l'atribut src o l'element <source>; el navegador escollirà el més adequat.

Per obtenir una llista de formats compatibles, consulteu Format dels mitjans admesos pels elements audio i video.

Context d'ùs

Categories de contingut Contingut dnàmic, contingut textual, contingut incrustat. Si té un atribut controls: contingut interactiu i contingut palpable.
Contingut permès

Si l'element té un atribut src: zero o més elements <track>, seguit pel contingut transparent que no conté elements mitjà - que no són <audio> o <video>

Llavors: zero o més elements <source>, seguit de zero o més elements <track>, seguits pel contingut transparent que no conté elements mitjà - que no són <audio> o <video>.

Omissió de l'etiqueta Cap, tant l'etiqueta inicial com l’etiqueta final són obligatòries
Elements pares permesos Qualsevol element que accepti contingut incrustat.
Interfície DOM HTMLVideoElement

Atributs

Igual que tots els altres elements HTML, aquest element és compatible amb els atributs globals.

autoplay
Un atribut booleà; si s'especifica, el vídeo comença a reproduir-se automàticament tan aviat com pugui fer-ho sense aturar-se per acabar de carregar les dades.
Note: Some versions of Chrome only acknowledge autostart, rather than autoplay
buffered
Un atribut que pot llegir per determinar els intervals de temps dels mitjans emmagatzemats en búfer. Aquest atribut conté un objecte TimeRanges.
controls
Si aquest atribut és present, el navegador ofereix controls per permetre a l'usuari controlar la reproducció de vídeo, incloent el volum, recerca i pausa/reprendre la reproducció.
crossorigin
Aquest atribut enumerat indica si s'ha d'utilitzar CORS per recuperar la imatge relacionada. Recursos habilitats per CORS poden ser reutilitzats en l'element <canvas> sense ser contaminada. Els valors permesos són:
anonymous
Envia una petició d'origen creuat sense una credencial. En altres paraules, s'envia a l'origen: capçalera HTTP sense una cookie, certificat X.509, o l'autenticació bàsica HTTP. Si el servidor no dóna credencials al lloc d'origen (si no s'estableix l'Access-Control-Allow-Origin: capçalera HTTP), la imatge quedarà contaminada i el seu ús restringit.
use-credentials
Envia una petició d'origen creuat amb una credencial. En altres paraules, s'envia a l'origen: capçalera HTTP amb una cookie, un certificat o la realització de l'autenticació bàsica HTTP. Si el servidor no dóna credencials al lloc d'origen (a través d'Access-Control-Allow-Credentials: capçalera HTTP), la imatge estarà contaminada i el seu ús restringit.
Quan no està present, el recurs es recupera sense una sol·licitud CORS (és a dir, sense necessitat d'enviar l'Origen: capçalera HTTP), impedint la seva contaminació utilitzant elements <canvas>. Si no és vàlid, es maneja com si s'utilitzés la paraula clau enumerat anonymous. Veure atributs de configuració CORS per obtenir informació addicional.
height
L'alçada de l'àrea de visualització del vídeo en píxels CSS.
loop
Un atribut booleà; si s'especifica, en arribar al final del vídeo, tornarà automàticament de nou al inici.
muted
Un atribut booleà que indica la configuració per defecte de l'àudio contingut en el vídeo. Si s'estableix, serà inicialment silenciat l'àudio. El seu valor per defecte és false, el que significa que l'àudio es reprodueix quan es reprodueix el vídeo.
played
Un objecte TimeRanges indica totes els rangs del vídeo que s'han reproduït.
preload
Aquest atribut enumerat està destinat a proporcionar un suggeriment al navegador sobre el que l'autor creu que li portarà a una millor experiència d'usuari. Pot tenir un dels següents valors:
  • none: indica que el vídeo no ha de ser precarregat.
  • metadata: Indica que només s'obtenen metadades de vídeo (per exemple, longitud).
  • auto: indica que tot l'arxiu de vídeo pot ser descarregat, encara que no s'espera que l'usuari ho utilitzi.
  • el empty string: sinònim del valor auto.

Si no s'estableix, el valor predeterminat és definit pel navegador (és a dir, cada navegador pot tenir el seu valor per defecte). L'especificació informa que s'estableixi en les metadata.

Nota d'ùs:
  • L'atribut autoplay té prioritat sobre la precàrrega. Si s'especifica la reproducció automàtica, el navegador necessitarà òbviament començar a descarregar el video per a la seva reproducció.
  • L'especificació no força el navegador a seguir el valor d'aquest atribut; és un mer suggeriment.
poster
Un URL que indica un cartell a mostrar fins que l'usuari reprodueixi o busqui. Si no s'especifica aquest atribut, no es mostra res fins que el primer fotograma estigui disponible; a continuació, el primer fotograma es mostra com el cartell.
src
La URL del vídeo a incrustar. Això és opcional; en el seu lloc podeu utilitzar l'element <source> dins el bloc de vídeo per especificar el vídeo al incrustar.
width
L'amplada de l'àrea de visualització del vídeo en píxels CSS.

Esdeveniments

L'element <vídeo> pot disparar molts diferents esdeveniments.

Exemples

<!-- Simple video example -->
<video src="videofile.webm" autoplay poster="posterimage.jpg">
  Sorry, your browser doesn't support embedded videos, 
  but don't worry, you can <a href="videofile.webm">download it</a>
  and watch it with your favorite video player!
</video>

<!-- Video with subtitles -->
<video src="foo.webm">
  <track kind="subtitles" src="foo.en.vtt" srclang="en" label="English">
  <track kind="subtitles" src="foo.sv.vtt" srclang="sv" label="Svenska">
</video>

El primer exemple reprodueix un vídeo, comença la reproducció quant s'hagi rebut prou vídeo per permetre la reproducció sense pauses per descarregar més. Fins que el vídeo comenci a reproduir-se, la imatge "posterimage.jpg" es mostra en el seu lloc.

El segon exemple permet a l'usuari triar entre diferents subtítols.

Exemple Múltiples Fonts

<video width="480" controls poster="https://archive.org/download/WebmVp8Vorbis/webmvp8.gif" >
  <source src="https://archive.org/download/WebmVp8Vorbis/webmvp8.webm" type="video/webm">
  <source src="https://archive.org/download/WebmVp8Vorbis/webmvp8_512kb.mp4" type="video/mp4">
  <source src="https://archive.org/download/WebmVp8Vorbis/webmvp8.ogv" type="video/ogg">
  Your browser doesn't support HTML5 video tag.
</video>

Podeu provar l'exemple anterior en l'exemple de demostració de vídeo HTML5 amb l'editor de codi de previsualització en viu.

Suport de servidor

Si el tipus MIME pel video no està configurat correctament en el servidor, el vídeo no es pot mostrar o mostrar un quadre gris que conté una X (si JavaScript està habilitat).

Si utilitzeu el servidor web Apache per publicar vídeos Ogg Theora, podeu solucionar aquest problema mitjançant l'addició de les extensions de tipus d'arxius de vídeo a "video/ogg" tipus MIME. Les extensions de tipus d'arxiu de vídeo més comuns són ".ogm", ".ogv" o ".ogg". Per a això, editeu el fitxer "mime.types" a "/etc/ apache" o utilitzar la directiva de configuració "AddType" a httpd.conf.

AddType video/ogg .ogm
AddType video/ogg .ogv
AddType video/ogg .ogg

Si publiqueu els vostres vídeos com WebM, podeu solucionar aquest problema per al servidor web Apache afegint l'extensió utilitzada pels arxius de vídeo (".webm" és el més comú) per al tipus MIME "video/WebM" a través del arxiu "mime.types" en "/etc/ apache" o per mitjà de la directiva de configuració "AddType" en httpd.conf.

AddType video/webm .webm

El vostre proveïdor d'allotjament web pot proporcionar una interfície fàcil dels canvis de configuració de tipus MIME per a les noves tecnologies fins que una actualització global es produeix de forma natural.

Interfície DOM

Aquest element implementa la interfície HTMLVideoElement.

Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari
Suport bàsic 3.0 3.5 (1.9.1) 9.0 10.5 3.1
atribut autoplay 3.0 3.5 (1.9.1) 9.0 10.5 3.1
atribut buffered ? 4.0 (2.0) ? (Yes) ?
atribut controls 3.0 3.5 (1.9.1) 9.0 10.5 3.1
atribut crossorigin ? 12.0 (12.0) ? ? ?
atribut loop 3.0 11.0 (11.0) 9.0 10.5 3.1
atribut muted 30.0 11.0 (11.0) 10.0 (Yes) 5.0
propietat played ? 15.0 (15.0) ? (Yes) ?
atribut poster 3.0 3.6 (1.9.2) 9.0 10.5 3.1
atribut preload 3.0 4.0 (2.0) 9.0 (Yes) 3.1
atribut src 3.0 3.5 (1.9.1) 9.0 10.5 3.1
Característica Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Suport bàsic ? 1.0 (1.0) ? ? ?
atribut autoplay ? 1.0 (1.0) 8.1 ? 10.0[1]
atribut buffered ? 4.0 (2.0) ? ? ?
atribut controls ? 1.0 (1.0) ? ? ?
atribut loop ? 11.0 (11.0) 8.0 ? 6.0
atribut muted ? 11.0 (11.0) 8.0 ? ?
propietat played ? 15.0 (15.0) ? ? ?
atribut poster ? 1.0 (1.0) ? ? ?
atribut preload ? 4.0 (2.0) ? ? ?
atribut src ? 1.0 (1.0) ? ? ?
atribut crossorigin ? 12.0 (12.0) ? ? ?

[1] A partir d'IOS 10, la reproducció automàtica és permissible només per als vídeos que no tenen cap so o que tenen la pista d'àudio deshabilitat.

Veure

Document Tags and Contributors

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