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

---
title: <video>
slug: Web/HTML/Element/video
tags:
  - Element
  - HTML
  - HTML eingebetteter Inhalt
  - HTML5
  - Medien
  - Multimedia
  - NeedsMobileBrowserCompatibility
  - Referenz
  - Web
translation_of: Web/HTML/Element/video
---
<div>{{HTMLRef}}</div>

<h2 id="Summary" name="Summary">Übersicht</h2>

<p>Das <strong>HTML <code>&lt;video&gt;</code> Element</strong> wird verwendet, um Videos einzubetten. Es kann verschiedene Quellen für Videos enthalten, die im <code>src</code> Attribut oder im {{HTMLElement("source")}} Element repräsentiert werden. Der Webbrowser wählt dann die für ihn passende Quelle aus.</p>

<p>Eine Liste der unterstützten Formate ist unter <a href="/de/docs/Media_formats_supported_by_the_audio_and_video_elements" title="Media formats supported by the audio and video elements">Unterstützte Formate der <code>&lt;audio&gt;</code> und <code>&lt;video&gt;</code> Elemente</a> zu finden.</p>

<h2 id="Usage_context" name="Usage_context">Anwendungscontext</h2>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/de/docs/Web/HTML/Content_categories">Inhaltskategorien</a></th>
   <td><a href="/de/docs/Web/HTML/Content_categories#Flow_content">Fließender Inhalt</a>, Formulierung, eingebetteter Inhalt. Wenn es ein {{htmlattrxref("controls", "video")}} Attribut hat: interaktiver Inhalt und konkreter Inhalt.</td>
  </tr>
  <tr>
   <th scope="row">Erlaubter Inhalt</th>
   <td>Wenn das Element ein {{htmlattrxref("src", "video")}} Attribut hat: kein oder mehrere {{HTMLElement("track")}} Elemente, gefolgt von transparentem Inhalt, der keine Medienelemente des Typs {{HTMLElement("audio")}} oder {{HTMLElement("video")}} enthält.<br>
    Sonst: kein oder mehrere {{HTMLElement("source")}} Elemente, gefolgt von keinem oder mehreren {{HTMLElement("track")}} Elementen, gefolgt von transparentem Inhalt, der keine Medienelemente des Typs {{HTMLElement("audio")}} oder {{HTMLElement("video")}} enthält.</td>
  </tr>
  <tr>
   <th scope="row">Tag Wegfall</th>
   <td>{{no_tag_omission}}</td>
  </tr>
  <tr>
   <th scope="row">Erlaubte Elternelemente</th>
   <td>Jedes Element, das eingebetteten Inhalt akzeptiert.</td>
  </tr>
  <tr>
   <th scope="row">DOM interface</th>
   <td>{{domxref("HTMLVideoElement")}}</td>
  </tr>
 </tbody>
</table>

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

<p>Wie jedes andere HTML Element unterstützt diese Element die <a href="/de/docs/HTML/Global_attributes" title="HTML/Global attributes">globalen Attribute</a>.</p>

<dl>
 <dt>{{htmlattrdef("autoplay")}}</dt>
 <dd>Ein Boolean Attribut; wenn es gesetzt ist, beginnt das Video automatisch abzuspielen sobald es nicht mehr stoppen muss um weitere Daten zu laden.</dd>
 <dt>{{htmlattrdef("autobuffer")}} {{Non-standard_inline}} {{obsolete_inline}}</dt>
 <dd>Ein Boolean Attribut; wenn es gesetzt ist, beginnt das Video automatisch mit dem Buffering, sogar wenn die automatische Wiedergabe nicht aktiv ist. Diese Attribut sollte verwendet werden, wenn angenommen werden kann, dass der Benutzer das Video abspielen wird (zum Beispiel wenn der Benutzer die Seite aufruft, um das Video abzuspielen und nicht weil es auf der Seite anderen Inhalt gibt und auch ein eingebettetes Video). Das Video wird solange gepuffert, bis der Mediencache voll ist.
 <div class="note"><strong>Implementierungshinweis:</strong> obwohl es ein Teil der frühen Entwürfe der HTML5 Spezifikation ist, wurde das <code>autobuffer</code> Attribut aus späteren Veröffentlichungen entfernt. Es wurde aus Gecko 2.0 und anderen Webbrowsern entfernt, wobei es von manchen gar nicht erst implementiert wurde. Die Spezifikation definiert ein neues Attribut <code>preload</code> mit einer anderen Syntax, um das <code>autobuffer</code> Attribut zu ersetzen. {{bug(548523)}}</div>
 </dd>
 <dt>{{htmlattrdef("buffered")}}</dt>
 <dd>Ein Attribut, das aus dem die bereits gepufferten Zeitspannen des Mediums gelesen werden können. Dieses Attribut enthält ein {{domxref("TimeRanges")}} Objekt.</dd>
 <dt>{{htmlattrdef("controls")}}</dt>
 <dd>Wenn dieses Attribut gesetzt ist,  blendet Gecko Steuerelemente für die Wiedergabe ein. Darunter befinden sich Lautstärke, Spulen und pausieren/fortsetzen der Wiedergabe.</dd>
 <dt>{{htmlattrdef("crossorigin")}}</dt>
 <dd>Dieses aufgezählte Attribut gibt an, ob das Laden des dazugehörigen Bildes mit CORS erfolgen muss. <a href="/de/docs/CORS_Enabled_Image" title="CORS_Enabled_Image">CORS-enabled Ressourcen</a> können im {{HTMLElement("canvas")}} Element <em>ohne Qualitätsabfall</em> verwendet werden. Die erlaubten Werte sind:
 <dl>
  <dt>anonymous</dt>
  <dd>Ein cross-origin Request (z. B. mit <code>Origin:</code> HTTP Header) wird ausgeführt aber es werden keine Credentials gesendet (z. B. kein Cookie, kein X.509 Zertifikat und keine HTTP Basic authentication werden gesendet). Wenn der Server keine Credentials an die origin site gibt (wenn der <code>Access-Control-Allow-Origin:</code> HTTP Header nicht gesetzt ist), wird das Bild <em>schlecht</em> und die Verwendung ist eingeschränkt.</dd>
  <dt>use-credentials</dt>
  <dd>Ein cross-origin Request (i.e. with <code>Origin:</code> HTTP header) wird ausgeführt und Credentials werden gesendet (z.B. ein Cookie, ein Zertifikat und eine HTTP Basic authentication wird ausgeführt). Wenn der Server keine Credentials an die origin site gibt (über den <code>Access-Control-Allow-Credentials:</code> HTTP Header), wird das Bild <em>schlecht</em> sein und die Verwendung eingeschränkt.</dd>
 </dl>
 Wenn dieses Attribute nicht verwendet wir, wird die Ressource ohne einen CORS Request geladen (z. B. ohne den <code>Origin:</code> HTTP Header zu senden), preventing its non-tainted used in {{HTMLElement('canvas')}} elements. Bei einem ungültigen Wert wird das Verhalten von <strong>anonymous</strong> übernommen. Weitere Informationen sind unter <a href="/de/docs/HTML/CORS_settings_attributes" title="CORS settings attributes">CORS settings attributes</a> zu finden.</dd>
 <dt>{{htmlattrdef("height")}}</dt>
 <dd>Die Höhe des Wiedergabebereichs in CSS Pixel.</dd>
 <dt>{{htmlattrdef("loop")}}</dt>
 <dd>Ein Boolean-Attribut; wenn es gesetzt ist, wird das Video nach dem Ende zurück an den Anfang gespult</dd>
 <dt>{{htmlattrdef("muted")}}</dt>
 <dd>Ein Boolean-Attribut das eine Standardeinstellung für den Ton im Video angibt. Wenn es gesetzt ist, ist der Ton initial auf stumm geschaltet. Der Standardwert ist false. Das bedeutet, dass der Ton mit dem Video abgespielt wird</dd>
 <dt>{{htmlattrdef("played")}}</dt>
 <dd>Ein {{domxref("TimeRanges")}} Objekt das die abgespielten Abschnitte des Videos angibt.</dd>
 <dt>{{htmlattrdef("preload")}}</dt>
 <dd>Dieses aufgezählte Attribute ist ein Hinweis vom Autor darüber, wie laut ihm die möglichst beste User Experience erreicht werden kann. Es kann einen der folgenden Werte enthalten:
 <ul>
  <li><span style="font-family: courier new;">none: </span>der Autor meint, dass der Benutzer das Video nicht anfragen wird, oder dass der Server seinen Datenverkehr minimieren will; das Video sollte nicht gecached werden</li>
  <li><span style="font-family: courier new;">metadata</span>: der Autor meint, dass das Laden der Metadaten (z.B. Länge) vertretbar ist, auch wenn der Benutzer das Video nicht anfragen wird</li>
  <li><span style="font-family: courier new;">auto</span>: die Bedürfnisse des Benutzers haben Priorität; bei Bedarf kann das gesamte Video heruntergeladen werden, auch wenn es der Benutzer womöglich nicht vollständig ansieht</li>
  <li>ein <em>leerer String</em>: ein Synonym für den Wert <span style="font-family: courier new;">auto</span></li>
 </ul>

 <p>Wenn diese Attribut nicht gesetzt ist, wird der Standardwert vom Webbrowser verwendet. Jeder Webbrowser kann seinen eigenen Standardwert auswählen, obwohl die Spezifikation den Wert <span style="font-family: courier new;">metadata</span> empfiehlt.</p>

 <div class="note"><strong>Verwendungshinweise:</strong>

 <ul>
  <li>Das <code>autoplay</code>-Attribut hat Vorrang gegenüber diesem Attribute, denn wenn das Video automatisch abgespielt werden soll, muss der Webbrowser es laden. Das Setzen der Attribute <code>autoplay</code> und <code>preload</code> wird von der Spezifikation erlaubt.</li>
  <li>Der Webbrowser wird von der Spezifikation nicht gezwungen den Wert zu befolgen. Es ist ein reiner Hinweis.</li>
 </ul>
 </div>
 </dd>
 <dt>{{htmlattrdef("poster")}}</dt>
 <dd>Die URL eines Vorschaubildes, das dargestellt wird bis der Benutzer das Video abspielt oder spult. Wenn diese Attribut nicht angegeben wird, wird nichts dargestellt bis der erste Frame des Videos verfügbar ist. Der erste Frame wird dann als Vorschaubild dargestellt.</dd>
 <dt>{{htmlattrdef("src")}}</dt>
 <dd>Die URL des Videos, das eingebettet werden soll. Diese Attribut ist optional. Stattdessen kann das {{HTMLElement("source")}}-Element innerhalb des video-Blocks für die Angabe des einzubettenden Videos verwendet werden.</dd>
 <dt>{{htmlattrdef("width")}}</dt>
 <dd>Die Breite des Wiedergabebereichs in CSS Pixel.</dd>
</dl>

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

<p>Das <code>&lt;video&gt;</code>-Element kann verschiedene <a href="/de/docs/Web/Guide/Events/Media_events">Events</a> auslösen.</p>

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

<pre class="brush: html">&lt;!-- Simple video example --&gt;
&lt;video src="videofile.ogg" autoplay poster="posterimage.jpg"&gt;
  Sorry, your browser doesn't support embedded videos,
  but don't worry, you can &lt;a href="videofile.ogg"&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.ogg"&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>Das erste Beispiel spielt ein Video ab, sobald genügend Frames geladen worden sind, damit es keine Unterbrechungen beim Abspielen gibt. Das Bild "posterimage.jpg" wird dargestellt, bis das Video abgespielt wird.</p>

<p>Das zweite Beispiel erlaubt dem Benutzer die Auswahl eines Untertitels.</p>

<h2 id="Server_support" name="Server_support">Serverunterstützung</h2>

<p>Wenn der MIME Type für das Video auf dem Server nicht korrekt konfiguriert ist, wird das Video nicht angezeigt oder eine graue Box mit einem X, falls JavaScript aktiviert ist.</p>

<p>Wenn die Videos als Ogg Theora bereitgestellt werden sollen, kann beim Apache Web Server die Dateiendung der Videos (".ogm", ".ogv", oder ".ogg" sind die gängigsten) zum MIME Type "video/ogg" über die "mime.types" Datei in "/etc/apache" oder über die "AddType" Konfigurationsdirektive in httpd.conf abgegeben werden.</p>

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

<p>Wenn die Videos als WebM bereitgestellt werden sollen, kann beim Apache Web Server die Dateiendung der Videos (".webm" ist die gängigste) zum MIME Type "video/webm" über die "mime.types" Datei in "/etc/apache" oder über die "AddType" Konfigurationsdirektive in httpd.conf abgegeben werden.</p>

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

<p>Ihr Web Host bietet möglicherweise eine einfache Schnittstellun zur Konfiguration der MIME Typen, bis es ein globales Update gibt.</p>

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

<p>Dieses Element implementiert das <code><a href="/en-US/docs/Web/API/HTMLVideoElement" title="DOM/HTMLVideoElementInterface">HTMLVideoElement</a></code> Interface.</p>

<h2 id="Browser_compatibility" name="Browser_compatibility">Webbrowserkompatibilität</h2>

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

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</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><code>autoplay</code> attribute</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><code>buffered</code> attribute</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoDesktop("2.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>Yes</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>controls</code> attribute</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><code>crossorigin</code> attribue</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoDesktop("12.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>loop</code> attribute</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><code>muted</code> attribute</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoDesktop("11.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>Yes</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>played</code> property</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoDesktop("15.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>Yes</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>poster</code> attribute</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><code>preload</code> attribute</td>
   <td>3.0</td>
   <td>{{CompatGeckoDesktop("2.0")}}</td>
   <td>9.0</td>
   <td>Yes</td>
   <td>3.1</td>
  </tr>
  <tr>
   <td><code>src</code> attribute</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>Feature</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile("1.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>autoplay</code> attribute</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile("1.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>iOS 6.0 only</td>
  </tr>
  <tr>
   <td><code>buffered</code> attribute</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile("2.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>controls</code> attribute</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile("1.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>loop</code> attribute</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile("11.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>muted</code> attribute</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile("11.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>played</code> property</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile("15.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>poster</code> attribute</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile("1.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>preload</code> attribute</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile("2.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>src</code> attribute</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile("1.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>crossorigin</code> attribute</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">Siehe auch</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">Media formats supported by the audio and video elements</a></li>
 <li>{{htmlelement("audio")}}</li>
 <li><a href="/en-US/docs/Using_HTML5_audio_and_video" title="Using audio and video in Firefox">Using HTML5 audio and video</a></li>
 <li><a href="/en-US/docs/Manipulating_video_using_canvas" title="Manipulating video using canvas">Manipulating video using 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> - Beispiele zur Verwendung von ogg Dateien in 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">The <code>video</code> element</a> (HTML5 Spezifikation)</li>
 <li><a href="/en-US/docs/Configuring_servers_for_Ogg_media" title="Configuring servers for Ogg media">Configuring servers for Ogg media</a></li>
 <li><a href="http://www.jwplayer.com/html5/">The state of HTML5 video</a></li>
</ul>