---
title: <video>
slug: Web/HTML/Element/video
tags:
  - Element
  - HTML
  - HTML embedded content
  - HTML5
  - Media
  - Multimedia
  - NeedsMobileBrowserCompatibility
  - Reference
  - Web
translation_of: Web/HTML/Element/video
---
<p>{{HTMLRef}}</p>

<p>L'<strong>element HTML <code>&lt;vídeo&gt;</code></strong> 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 <code>src</code> o l'element {{HTMLElement("source")}}; el navegador escollirà el més adequat.</p>

<p>Per obtenir una llista de formats compatibles, consulteu <a href="/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements">Format dels mitjans admesos pels elements audio i video</a>.</p>

<h2 id="Context_d'ùs">Context d'ùs</h2>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Categories de contingut</a></th>
   <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Contingut dnàmic</a>, contingut textual, contingut incrustat. Si té un atribut {{htmlattrxref("controls", "video")}}: contingut interactiu i contingut palpable.</td>
  </tr>
  <tr>
   <th scope="row">Contingut permès</th>
   <td>
    <p>Si l'element té un atribut {{htmlattrxref("src", "video")}}: zero o més elements {{HTMLElement ("track")}}, seguit pel contingut transparent que no conté elements mitjà - que no són {{HTMLElement("audio")}} o {{HTMLElement("video")}}</p>

    <p>Llavors: zero o més elements {{HTMLElement("source")}}, seguit de zero o més elements {{HTMLElement("track")}}, seguits pel contingut transparent que no conté elements mitjà - que no són {{HTMLElement("audio")}} o {{HTMLElement("video")}}.</p>
   </td>
  </tr>
  <tr>
   <th scope="row">Omissió de l'etiqueta</th>
   <td>{{no_tag_omission}}</td>
  </tr>
  <tr>
   <th scope="row">Elements pares permesos</th>
   <td>Qualsevol element que accepti contingut incrustat.</td>
  </tr>
  <tr>
   <th scope="row">Interfície DOM</th>
   <td>{{domxref("HTMLVideoElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Atributs">Atributs</h2>

<p><span id="result_box" lang="ca"><span>Igual</span> <span>que tots els altres</span> <span>elements</span> <span>HTML</span><span>, aquest element</span> <span>és compatible</span> <span>amb</span> <span>els</span></span> <a href="/en-US/docs/HTML/Global_attributes">atributs globals</a>.</p>

<dl>
 <dt>{{htmlattrdef("autoplay")}}</dt>
 <dd><span id="result_box" lang="ca"><span>Un atribut</span> <span>booleà</span><span>;</span> <span>si</span> <span>s'especifica,</span> <span>el vídeo</span> <span>comença</span> <span>a reproduir-se</span> <span>automàticament</span> <span>tan aviat</span> <span>com pugui</span> <span>fer-ho sense</span> <span>aturar-se per</span> <span>acabar de</span> <span>carregar</span> <span>les dades.</span></span></dd>
 <dd>
 <pre>Note: Some versions of Chrome only acknowledge <strong><code>autostart</code></strong>, rather than <strong><code>autoplay</code></strong></pre>
 </dd>
</dl>

<dl>
 <dt>{{htmlattrdef("buffered")}}</dt>
 <dd>Un atribut que pot llegir per determinar els intervals de temps dels mitjans emmagatzemats en búfer. Aquest atribut conté un objecte {{domxref ("TimeRanges")}}.</dd>
 <dt>{{htmlattrdef("controls")}}</dt>
 <dd><span id="result_box" lang="ca"><span>Si aquest</span> <span>atribut</span> <span>és present, el</span> <span>navegador ofereix</span> <span>controls</span> <span>per</span> <span>permetre a l'usuari</span> <span>controlar la reproducció</span> <span>de vídeo, incloent</span> <span>el volum,</span> <span>recerca</span> <span>i pausa</span><span>/reprendre</span> <span>la reproducció.</span></span></dd>
 <dt>{{htmlattrdef("crossorigin")}}</dt>
 <dd>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 {{HTMLElement("canvas")}} sense ser contaminada. Els valors permesos són:
 <dl>
  <dt>anonymous</dt>
  <dd>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.</dd>
  <dt>use-credentials</dt>
  <dd>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.</dd>
 </dl>
 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 {{HTMLElement('canvas')}}. Si no és vàlid, es maneja com si s'utilitzés la paraula clau enumerat <strong>anonymous</strong>. Veure <a href="https://developer.mozilla.org/en-US/docs/HTML/CORS_settings_attributes">atributs de configuració CORS</a> per obtenir informació addicional.</dd>
 <dt>{{htmlattrdef("height")}}</dt>
 <dd><span id="result_box" lang="ca"><span>L'alçada</span> <span>de l'àrea</span> <span>de visualització</span> <span>del vídeo</span> <span>en píxels</span> <span>CSS.</span></span></dd>
 <dt>{{htmlattrdef("loop")}}</dt>
 <dd>Un atribut booleà; si s'especifica, en arribar al final del vídeo, tornarà automàticament de nou al inici.</dd>
 <dt>{{htmlattrdef("muted")}}</dt>
 <dd>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.</dd>
 <dt>{{htmlattrdef("played")}}</dt>
 <dd>Un objecte {{domxref ("TimeRanges")}} indica totes els rangs del vídeo que s'han reproduït.</dd>
 <dt>{{htmlattrdef("preload")}}</dt>
 <dd>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:
 <ul>
  <li><code>none</code>: <span class="short_text" id="result_box" lang="ca"><span>indica</span> <span>que el vídeo</span> <span>no ha de ser</span> <span>precarregat</span><span>.</span></span></li>
  <li><code>metadata</code>: Indica que només s'obtenen metadades de vídeo (per exemple, longitud).</li>
  <li><code>auto</code>: indica que tot l'arxiu de vídeo pot ser descarregat, encara que no s'espera que l'usuari ho utilitzi.</li>
  <li>el <em>empty string</em>: <span class="short_text" id="result_box" lang="ca"><span>sinònim</span> <span>del valor</span> </span><code>auto</code>.</li>
 </ul>

 <p><span id="result_box" lang="ca"><span>Si</span> <span>no s'estableix</span>, <span>el valor predeterminat</span> <span>és</span> <span>definit</span> <span>pel navegador</span> <span>(</span><span>és a dir,</span> <span>cada</span> <span>navegador pot</span> <span>tenir el seu valor</span> <span>per defecte).</span> <span>L'especificació</span> <span>informa</span> <span>que s'estableixi en</span> <span>les</span></span> <code>metadata</code>.</p>

 <div class="note"><strong>Nota d'ùs:</strong>

 <ul>
  <li>L'atribut <code>autoplay</code> 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ó.</li>
  <li>L'especificació no força el navegador a seguir el valor d'aquest atribut; és un mer suggeriment.</li>
 </ul>
 </div>
 </dd>
 <dt>{{htmlattrdef("poster")}}</dt>
 <dd>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.</dd>
 <dt>{{htmlattrdef("src")}}</dt>
 <dd>La URL del vídeo a incrustar. Això és opcional; en el seu lloc podeu utilitzar l'element {{HTMLElement("source")}} dins el bloc de vídeo per especificar el vídeo al incrustar.</dd>
 <dt>{{htmlattrdef("width")}}</dt>
 <dd><span id="result_box" lang="ca"><span>L'amplada</span> <span>de l'àrea</span> <span>de visualització</span> <span>del vídeo</span> <span>en píxels</span> <span>CSS.</span></span></dd>
</dl>

<h2 id="Esdeveniments">Esdeveniments</h2>

<p><span class="short_text" id="result_box" lang="ca"><span>L'element</span> <code><span>&lt;</span><span>vídeo</span><span>&gt;</span></code> <span>pot disparar</span> <span>molts</span> <span>diferents</span></span> <a href="/en-US/docs/Web/Guide/Events/Media_events">esdeveniments</a>.</p>

<h2 id="Exemples">Exemples</h2>

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

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

<p>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.</p>

<p><span id="result_box" lang="ca"><span>El segon</span> <span>exemple</span> <span>permet a l'usuari</span> <span>triar entre</span> <span>diferents</span> <span>subtítols.</span></span></p>

<h2 id="Exemple_Múltiples_Fonts">Exemple <span class="short_text" id="result_box" lang="ca"><span>Múltiples </span></span><span class="short_text" lang="ca"><span>Fonts</span></span></h2>

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

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

<h2 id="Suport_de_servidor">S<span class="short_text" id="result_box" lang="ca"><span>uport de servidor</span></span></h2>

<p>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).</p>

<p>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.</p>

<pre class="eval">AddType video/ogg .ogm
AddType video/ogg .ogv
AddType video/ogg .ogg
</pre>

<p>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.</p>

<pre class="eval">AddType video/webm .webm
</pre>

<p>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.</p>

<h2 id="Interfície_DOM">Interfície DOM</h2>

<p>Aquest element implementa la interfície <code><a href="/en-US/docs/Web/API/HTMLVideoElement">HTMLVideoElement</a></code>.</p>

<h2 id="Navegadors_compatibles">Navegadors compatibles</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Característica</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Suport bàsic</td>
   <td>3.0</td>
   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
   <td>9.0</td>
   <td>10.5</td>
   <td>3.1</td>
  </tr>
  <tr>
   <td>atribut <code>autoplay</code></td>
   <td>3.0</td>
   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
   <td>9.0</td>
   <td>10.5</td>
   <td>3.1</td>
  </tr>
  <tr>
   <td>atribut <code>buffered</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoDesktop("2.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td>atribut <code>controls</code></td>
   <td>3.0</td>
   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
   <td>9.0</td>
   <td>10.5</td>
   <td>3.1</td>
  </tr>
  <tr>
   <td>atribut <code>crossorigin</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoDesktop("12.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td>atribut <code>loop</code></td>
   <td>3.0</td>
   <td>{{CompatGeckoDesktop("11.0")}}</td>
   <td>9.0</td>
   <td>10.5</td>
   <td>3.1</td>
  </tr>
  <tr>
   <td>atribut <code>muted</code></td>
   <td>30.0</td>
   <td>{{CompatGeckoDesktop("11.0")}}</td>
   <td>10.0</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>5.0</td>
  </tr>
  <tr>
   <td><code>propietat played</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoDesktop("15.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td>atribut <code>poster</code></td>
   <td>3.0</td>
   <td>{{CompatGeckoDesktop("1.9.2")}}</td>
   <td>9.0</td>
   <td>10.5</td>
   <td>3.1</td>
  </tr>
  <tr>
   <td>atribut <code>preload</code></td>
   <td>3.0</td>
   <td>{{CompatGeckoDesktop("2.0")}}</td>
   <td>9.0</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>3.1</td>
  </tr>
  <tr>
   <td>atribut <code>src</code></td>
   <td>3.0</td>
   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
   <td>9.0</td>
   <td>10.5</td>
   <td>3.1</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Característica</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Suport bàsic</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile("1.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td>atribut <code>autoplay</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile("1.0")}}</td>
   <td>8.1</td>
   <td>{{CompatUnknown}}</td>
   <td>10.0<sup>[1]</sup></td>
  </tr>
  <tr>
   <td>atribut <code>buffered</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile("2.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td>atribut <code>controls</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile("1.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td>atribut <code>loop</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile("11.0")}}</td>
   <td>8.0</td>
   <td>{{CompatUnknown}}</td>
   <td>6.0</td>
  </tr>
  <tr>
   <td>atribut <code>muted</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile("11.0")}}</td>
   <td>8.0</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>propietat played</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile("15.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td>atribut <code>poster</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile("1.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td>atribut <code>preload</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile("2.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td>atribut <code>src</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile("1.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td>atribut <code>crossorigin</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile("12.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] A partir d'IOS 10, la reproducció automàtica és permissible només per als vídeos que <a href="https://developer.apple.com/library/prerelease/content/releasenotes/General/WhatsNewInSafari/Articles/Safari_10_0.html">no tenen cap so o que tenen la pista d'àudio deshabilitat.</a></p>

<h2 id="Veure">Veure</h2>

<ul>
 <li><a href="/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements">Formats de mitjans suportats pels elements audio i video</a></li>
 <li>{{htmlelement("audio")}}</li>
 <li><a href="/en-US/docs/Using_HTML5_audio_and_video">L'ùs d'HTML5 audio i video</a></li>
 <li><a href="/en-US/docs/Manipulating_video_using_canvas">Manipulan video usant canvas</a></li>
 <li><a href="/en-US/docs/XPCOM_Interface_Reference/NsIDOMHTMLMediaElement"><code>nsIDOMHTMLMediaElement</code></a></li>
 <li><a class="external" href="https://html.spec.whatwg.org/#the-video-element">L'element <code>video</code></a> (especificació HTML5 )</li>
 <li><a href="/en-US/docs/Configuring_servers_for_Ogg_media">Configuració de  servidors de mitjans Ogg</a></li>
 <li><a href="http://www.jwplayer.com/html5/">L'estat de video en HTML5</a></li>
</ul>