Bringen Sie Ihnen bei, wie Sie HTML5-Audio und -Video gut nutzen

HTML5 unterstützt eingebettete Medien über die HTML-Tags „Audio“ und „Video“, sodass Entwickler Medien einfach in HTML-Dokumente einbetten können.

Medien einbettenEDIT

Medien in HTML einbetten:

<video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" controls>  你的浏览器不支持 <code>video</code> 标签.</video>

Dieses Beispiel zeigt ein abspielbares Video mit einem Wiedergabe-Controller, das Video stammt aus dem Theora-Website.

Das Folgende ist ein Beispiel für das Einbetten von Audio in ein HTML-Dokument. Das

<audio src="/test/audio.ogg"><p>你的浏览器不支持audio标签</p></audio>

src-Attribut kann auf die URL einer Audiodatei oder den Pfad einer lokalen Datei gesetzt werden.

<audio src="audio.ogg" controls autoplay loop><p>你的浏览器不支持audio标签</p></audio>

Der Code dieses Beispiels verwendet einige Attribute des HTML-Elements „audio“:

Steuerelemente: Standard-HTML5-Steuerelemente für Audio im Webseitengerät anzeigen.

Autoplay: Automatische Wiedergabe des Audios.

Schleife: Lassen Sie den Ton automatisch und wiederholt abspielen.

<audio src="audio.mp3" preload="auto" controls></audio>

Das Preload-Attribut wird zum Puffern großer Dateien mit Audioelementen verwendet. Es müssen drei Attributwerte festgelegt werden:

„none“ puffert keine Dateien

" auto" Audiodateien puffern

"metadata" Nur die Metadaten der Datei puffern

Sie können das -Tag verwenden, um mehrere Dateien anzugeben, um unterstützte Kodierungsformate bereitzustellen für verschiedene Browser. Beispiel:

<video controls>
  <source src="foo.ogg" type="video/ogg">
  <source src="foo.mp4" type="video/mp4">
  Your browser does not support the <code>video</code> element.</video>

Wenn der Browser das Ogg-Format unterstützt, spielt dieser Code die Ogg-Datei ab. Wenn der Browser Ogg nicht unterstützt, spielt der Browser die MPEG-4-Datei ab. Sehen Sie sich die Liste der von Audio- und Videoelementen unterstützten Medienformate an, um die Unterstützung für Video- und Audiokodierungsformate durch verschiedene Browser zu sehen.

Sie können auch den für die Videodatei erforderlichen Video-Codec-Wert angeben. Dadurch kann der Browser eine korrektere Entscheidung treffen:

<video controls>
  <source src="foo.ogg" type="video/ogg; codecs=
dir
ac, speex">
  Your browser does not support the <code>video</code> element.</video>

Hier geben wir das Video-Tag für die Verwendung von Dirac an und Speex-Videocodecs. Wenn der Browser Ogg, aber den angegebenen Codec nicht unterstützt, wird das Video nicht geladen.

Wenn das Typattribut nicht angegeben ist, wird der Medientyp an den Server zurückgegeben und dann überprüft, ob der Browser ihn auflösen kann. Andernfalls wird die nächste Quelle überprüft. Wenn keines der angegebenen Quellelemente verfügbar ist, wird ein Fehler--Ereignis an das Video-Tag gesendet. Wenn das Typattribut angegeben ist, wird es mit den Typen verglichen, die der Browser abspielen kann. Wenn es nicht erkannt wird, wird der Server nicht einmal gefragt, sondern gleichzeitig die nächste Quelle überprüft.

Klicken Sie auf Medienereignisse, um die vollständige Liste der Medienwiedergabeereignisse anzuzeigen. Um Details zu den von verschiedenen Browsern unterstützten Medienformaten anzuzeigen, klicken Sie auf Von den Audio- und Videoelementen unterstützte Medienformate.

MedienwiedergabesteuerungEDIT 🎜>Sobald Sie Medien mit in ein HTML-Dokument eingebettet haben Neue Elemente können Sie programmgesteuert mithilfe von

-Code steuern. Wenn Sie beispielsweise die Wiedergabe (neu) starten möchten, können Sie den folgenden Code schreiben: Die erste Zeile ruft das erste Videoelement im aktuellen Dokument ab und die nächste Zeile ruft play() auf. dieser Elementmethode ist diese Methode in der Schnittstelle

var v = document.getElementsByTagName("video")[0];v.play();

Die Steuerung der Wiedergabe, Pause, Lautstärkeerhöhung und -reduzierung eines HTML5-Audioplayers ist unkompliziert:

<audio id="demo" src="audio.mp3"></audio><p>
  <button 
onclick
="document.getElementById(&#39;demo&#39;).play()">播放声音</button>
  <button onclick="document.getElementById(&#39;demo&#39;).pause()">暂停声音</button>
  <button onclick="document.getElementById(&#39;demo&#39;).volume+=0.1">提高音量</button>
  <button onclick="document.getElementById(&#39;demo&#39;).volume-=0.1">降低音量</button></p>

Das Anhalten der Medienwiedergabe ist so einfach wie der Aufruf der pause()-Methode. Der Browser lädt die Medien jedoch weiter herunter, bis die Medienelemente vom Garbage-Collection-Mechanismus recycelt werden. So stoppen Sie Medien-Downloads sofort:

Zeichenfolge

var mediaElement = document.getElementById("myMediaElementID");
mediaElement.pause();
mediaElement.src='';
//or
mediaElement.removeAttribute("src");

var mediaElement = document.getElementById('mediaElementID');
mediaElement.seekable.start();
  // 返回开始时间
   (in seconds)mediaElement.seekable.end();
    // 返回结束时间 (in seconds)mediaElement.currentTime = 122;
     // 设定在 122 secondsmediaElement.played.end();
      // 返回浏览器播放的秒数