path: root/files/pl/web/html/element/video/index.html

---
title: <video>
slug: Web/HTML/Element/video
translation_of: Web/HTML/Element/video
---
<div> </div>

<h2 id="Summary" name="Summary">W skrócie</h2>

<p><strong>Element <code>&lt;video&gt;</code></strong> został stworzony do umieszczania treści wideo na stronie. Może zawierać wiele różnych źródeł z nagraniami, które określamy poprzez kolejne tagi {{HTMLElement("source")}} w nim zawarte albo poprzez atrybut <code>src</code>. Przeglądarka sama wybierze odpowiedni dla niej materiał.</p>

<p>Jeżeli chcesz zobaczyć listę wspieranych formatów, zobacz koniecznie <a href="/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements" title="Media formats supported by the audio and video elements">Formaty mediów wspieranych przez elementy audio i video</a>.</p>

<h2 id="Usage_context" name="Usage_context">Kontekst użycia</h2>

<ul class="htmlelt">
 <li><dfn><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></dfn> <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>, phrasing content, embedded content. If it has a {{htmlattrxref("controls", "video")}} attribute: interactive content and palpable content.</li>
 <li><dfn>Permitted content</dfn>If the element has a {{htmlattrxref("src", "video")}} attribute: zero or more {{HTMLElement("track")}} element, followed by transparent content that contains no media elements, that is no {{HTMLElement("audio")}} or {{HTMLElement("video")}}<br>
  Else: zero or more {{HTMLElement("source")}} element, followed by zero or more {{HTMLElement("track")}} element, followed by transparent content that contains no media elements, that is no {{HTMLElement("audio")}} or {{HTMLElement("video")}}.</li>
 <li><dfn>Tag omission</dfn> {{no_tag_omission}}</li>
 <li><dfn>Permitted parent elements</dfn> Any element that accepts embedded content.</li>
 <li><dfn>DOM interface</dfn> {{domxref("HTMLVideoElement")}}</li>
</ul>

<h2 id="Attributes" name="Attributes">Atrybuty</h2>

<p>Podobnie jak inne tagi HTML, ten element może mieć przypisane <a href="/en-US/docs/HTML/Global_attributes" title="HTML/Global attributes">atrybuty globalne</a>.</p>

<dl>
 <dt>{{htmlattrdef("autoplay")}}</dt>
 <dd>Atrybut typu Boolean; jeżeli go określimy, wideo zostanie odtworzone najszybciej, jak to możliwe bez zatrzymywania na czas dalszego pobierania.</dd>
 <dt>{{htmlattrdef("autobuffer")}} {{Non-standard_inline}} {{obsolete_inline}}</dt>
 <dd>Atrybut typu Boolean; jeżeli go określimy wideo zacznie się buforować nawet wtedy, gdy nie zostało włączone automatyczne odtwarzanie. This should be used for cases in which it is considered likely that the video will be played (for example, if the user navigated to the page specifically to play the video, not if there happens to be a video embedded along with other content). The video is buffered until the media cache is full.
 <div class="note"><strong>Notka implementacyjna:</strong> początkowo jako część wstępnych szkiców HTML5, atrybut<code> autobuffer</code> nie pojawił się już w kolejnych ich wydaniach. Został usunięty w Gecko 2.0 i innych przeglądarkach. W specyfikacji umieszczono nowy atrybut, <code>preload</code>, aby zastąpić atrybut <code>autobuffer</code> z inną składnią. {{bug(548523)}}</div>
 </dd>
 <dt>{{htmlattrdef("buffered")}}</dt>
 <dd>An attribute you can read to determine which time ranges of the media have been buffered. This attribute contains a {{domxref("TimeRanges")}} object.</dd>
 <dt>{{htmlattrdef("controls")}}</dt>
 <dd>If this attribute is present, Gecko will offer controls to allow the user to control video playback, including volume, seeking, and pause/resume playback.</dd>
 <dt>{{htmlattrdef("crossorigin")}}</dt>
 <dd>This enumerated attribute indicates if the fetching of the related image must be done using CORS or not. <a href="/en-US/docs/CORS_Enabled_Image" title="CORS_Enabled_Image">CORS-enabled resources</a> can be reused in the {{HTMLElement("canvas")}} element without being <em>tainted</em>. The allowed values are:
 <dl>
  <dt>anonymous</dt>
  <dd>A cross-origin request (i.e. with <code>Origin:</code> HTTP header) is performed. But no credential is sent (i.e. no cookie, no X.509 certificate and no HTTP Basic authentication is sent). If the server does not give credentials to the origin site (by not setting the <code>Access-Control-Allow-Origin:</code> HTTP header), the image will be <em>tainted</em> and its usage restricted..</dd>
  <dt>use-credentials</dt>
  <dd>A cross-origin request (i.e. with <code>Origin:</code> HTTP header) is performed with credential is sent (i.e. a cookie, a certificate and HTTP Basic authentication is performed). If the server does not give credentials to the origin site (through <code>Access-Control-Allow-Credentials:</code> HTTP header), the image will be <em>tainted</em> and its usage restricted.</dd>
 </dl>
 When not present, the resource is fetched without a CORS request (i.e. without sending the <code>Origin:</code> HTTP header), preventing its non-tainted used in {{HTMLElement('canvas')}} elements. If invalid, it is handled as if the enumerated keyword <strong>anonymous</strong> was used. See <a href="/en-US/docs/HTML/CORS_settings_attributes" title="CORS settings attributes">CORS settings attributes</a> for additional information.</dd>
 <dt>{{htmlattrdef("height")}}</dt>
 <dd>The height of the video's display area, in CSS pixels.</dd>
 <dt>{{htmlattrdef("loop")}}</dt>
 <dd>A Boolean attribute; if specified, we will, upon reaching the end of the video, automatically seek back to the start.</dd>
 <dt>{{htmlattrdef("muted")}}</dt>
 <dd>A Boolean attribute which indicates the default setting of the audio contained in the video. If set, the audio will be initially silenced. Its default value is false, meaning that the audio will be played when the video is played.</dd>
 <dt>{{htmlattrdef("played")}}</dt>
 <dd>A {{domxref("TimeRanges")}} object indicating all the ranges of the video that have been played.</dd>
 <dt>{{htmlattrdef("preload")}}</dt>
 <dd>This enumerated attribute is intended to provide a hint to the browser about what the author thinks will lead to the best user experience. It may have one of the following values:
 <ul>
  <li><span style="font-family: Courier New;">none: </span>hints that either the author thinks that the user won't need to consult that video or that the server wants to minimize its traffic; in others terms this hint indicates that the video should not be cached.</li>
  <li><span style="font-family: Courier New;">metadata</span>: hints that though the author thinks that the user won't need to consult that video, fetching the metadata (e.g. length) is reasonable.</li>
  <li><span style="font-family: Courier New;">auto</span>: hints that the user needs have priority; in others terms this hint indicated that, if needed, the whole video could be downloaded, even if the user is not expected to use it.</li>
  <li>the <em>empty string</em>: which is a synonym of the <span style="font-family: Courier New;">auto </span>value.</li>
 </ul>

 <p>If not set, its default value is browser-defined (i.e. each browser can choose its own default value), though the spec advises it to be set to <span style="font-family: Courier New;">metadata</span>.</p>

 <div class="note"><strong>Usage notes:</strong>

 <ul>
  <li>The <code>autoplay</code> attribute has precedence over this one as if one wants to automatically play a video, the browser will obviously need to download it. Setting both the <code>autoplay</code> and the <code>preload</code> attributes is allowed by the specification.</li>
  <li>The browser is not forced by the specification to follow the value of this attribute; it is a mere hint.</li>
 </ul>
 </div>
 </dd>
 <dt>{{htmlattrdef("poster")}}</dt>
 <dd>Adres URL do zdjęcia ("plakatu"), które zostanie wyświetlone w miejscu elementu wideo dopóki użytkownik nie odtworzy go lub nie przewinie. Jeżeli atrybut niezostanie podany, nic niezostanie wyświetlone dopóki pierwsza klatka nagrania zostanie załadowana; wtedy ona stanie się "plakatem".</dd>
 <dt>{{htmlattrdef("src")}}</dt>
 <dd>Adres URL materiału wideo do użycia. Jest to opcjonalne; zamiast tego powinieneś używać elementów {{HTMLElement("source")}} wewnątrz elementu wideo do określenia materiału do odtworzenia.</dd>
 <dt>{{htmlattrdef("width")}}</dt>
 <dd>Szerokość obszaru wyświetlania obrazu wideo, w pikselach.</dd>
</dl>

<h2 id="Examples" name="Examples">Zdarzenia</h2>

<p>Element <code>&lt;video&gt;</code> może wywoływać wiele <a href="/en-US/docs/Web/Guide/Events/Media_events">zdarzeń</a>.</p>

<h2 id="Examples" name="Examples">Przykłady</h2>

<pre class="brush: html" dir="rtl">&lt;!-- Prosty przykład z elementem video --&gt;
&lt;video src="videofile.ogg" autoplay poster="posterimage.jpg"&gt;
  Przepraszamy ale Twoja przeglądarka nie potrafi odtwarzać filmów za pomocą HTML5.
 Nie przejmuj się, bo &lt;a href="videofile.ogg"&gt;możesz go stąd pobrać&lt;/a&gt;
  i oglądać za pomocą swojego ulubionego odtwarzacza!
&lt;/video&gt;

&lt;!-- Wideo z napisami --&gt;
&lt;video src="foo.ogg"&gt;
  &lt;track kind="subtitles" src="foo.en.vtt" srclang="en" label="English"&gt;
  &lt;track kind="subtitles" src="foo.pl.vtt" srclang="pl" label="Polski"&gt;
&lt;/video&gt;
</pre>

<p>Pierwszy przykład polega na odtworzeniu nagrania od razu po tym, jak odpowiednio duża część materiału zostanie pobrana, aby nie pauzować odtwarzania. Zanim zawartość elementu wideo zostanie wyświetlona, obrazek "posterimage.jpg" zostanie umieszczony w jej miejsce.</p>

<p>Drugi przykład pozwala użytkownikowi na wybór odpowiednich napisów.</p>

<h2 id="Server_support" name="Server_support">Wsparcie serwera</h2>

<p>Jeżeli typ MIME dla elementu wideo niezostanie poprawnie ustawiony na serwerze, może się on nie pojawić albo pojawić jako szary obszar z X (jeżeli JavaScript jest włączony).</p>

<p>Korzystając z Ogg Theora i pracując na Apache Web Server możesz rozwiązać ten problem dodając rozszerzenia używane przez Twoje pliki wideo (".ogm", ".ogv" i ".ogg" są najpowszechniejsze) do typów MIME "video/ogg" w pliku "mime.types" w folderze "/etc/apache" albo poprzez komendę konfiguracyjną "AddType" w pliku httpd.conf.</p>

<pre>AddType video/ogg .ogm
AddType video/ogg .ogv
AddType video/ogg .ogg
</pre>

<p>Korzystając z WebM i pracując na Apache Web Server możesz rozwiązać ten problem dodając rozszerzenie używane przez Twoje pliki wideo (".webm" jest najpowszechniejszy) do typów MIME "video/webm" w pliku "mime.types" w folderze "/etc/apache" albo poprzez komendę konfiguracyjną "AddType" w pliku httpd.conf.</p>

<pre>AddType video/webm .webm
</pre>

<p>Pamiętaj, że Twój hosting internetowy może dostarczać łatwiejsze sposoby konfiguracji typów MIME, aby obsługiwać najnowsze technologie zanim globalnie zostaną wprowadzone w użycie.</p>

<h2 id="DOM_interface" name="DOM_interface">Interfejs DOM</h2>

<p>Ten element implementuje interfejs <code><a href="/en-US/docs/Web/API/HTMLVideoElement" title="DOM/HTMLVideoElementInterface">HTMLVideoElement</a></code>.</p>

<h2 id="Browser_compatibility" name="Browser_compatibility">Kompatybilność z przeglądarkami</h2>

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

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Cecha</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Podstawowa obsługa</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>atrybut <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>atrybut <code>buffered</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoDesktop("2.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>Yes</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td>atrybut <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>atrybut <code>crossorigin</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoDesktop("12.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td>atrybut <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>atrybut <code>muted</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoDesktop("11.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>Yes</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td>właściwość <code>played</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoDesktop("15.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>Yes</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td>atrybut <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>atrybut <code>preload</code></td>
   <td>3.0</td>
   <td>{{CompatGeckoDesktop("2.0")}}</td>
   <td>9.0</td>
   <td>Yes</td>
   <td>3.1</td>
  </tr>
  <tr>
   <td>atrybut <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>Cecha</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Podstawowa obsługa</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile("1.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td>atrybut <code>autoplay</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile("1.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>iOS 6.0 only</td>
  </tr>
  <tr>
   <td>atrybut <code>buffered</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile("2.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td>atrybut <code>controls</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile("1.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td>atrybut <code>loop</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile("11.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td>atrybut <code>muted</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile("11.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td>właściwość <code>played</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile("15.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td>atrybut <code>poster</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile("1.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td>atrybut <code>preload</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile("2.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td>atrybut <code>src</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile("1.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td>atrybut <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>

<h2 id="See_also" name="See_also"> </h2>

<h2 id="See_also" name="See_also">Zobacz także</h2>

<ul>
 <li><a href="/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements" title="Media formats supported by the audio and video elements">Formaty mediów wspieranych przez elementy audio i video.</a></li>
 <li>{{htmlelement("audio")}}</li>
 <li><a href="/en-US/docs/Using_HTML5_audio_and_video" title="Using audio and video in Firefox">Używanie elementów audio i video HTML5.</a></li>
 <li><a href="/en-US/docs/Manipulating_video_using_canvas" title="Manipulating video using canvas">Manipulowanie wideo korzystając z elementu canvas.</a></li>
 <li><a href="/en-US/docs/XPCOM_Interface_Reference/NsIDOMHTMLMediaElement" title="NsIDOMHTMLMediaElement"><code>nsIDOMHTMLMediaElement</code></a></li>
 <li><a class="external" href="http://tinyvid.tv/" title="http://tinyvid.tv/">TinyVid</a> - przykłady użycia plików ogg w HTML5.</li>
 <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#video" title="http://www.whatwg.org/specs/web-apps/current-work/#video">Element video</a> (specyfikacja HTML5)</li>
 <li><a href="/en-US/docs/Configuring_servers_for_Ogg_media" title="Configuring servers for Ogg media">Konfigurowanie serwerów pod kątem mediów Ogg.</a></li>
</ul>

<p>{{HTMLRef}}</p>