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 e02da388656c3265154666b7c71a8ddc-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

JavaScript

-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

definiert, die das Medienelement implementiert.

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

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

Medien-Download beenden BEARBEITEN

<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:

Indem Sie das src-Attribut des Medienelements entfernen (oder es einfach auf eine leere

Zeichenfolge

setzen – – je nach Browser), können Sie die interne Dekodierung des Elements zerstören und so den Mediendownload beenden. Die Operation „removeAttribute()“ ist nicht sauber und das Setzen des „src“-Attributs des 39000f942b2545a5315c57fa3276f220-Elements auf eine leere Zeichenfolge kann zu unerwünschten Anfragen führen (Mozilla Firefox 22).

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

BEARBEITEN in Medien finden

Medienelemente unterstützen das Verschieben von der aktuellen Wiedergabeposition zu einem bestimmten Punkt im Inhalt des Mediums. Dies wird erreicht, indem der Wert der currentTime-Eigenschaft des Elements festgelegt wird. Einzelheiten zu Elementeigenschaften finden Sie unter HTMLMediaElement. Stellen Sie einfach die Zeit in Sekunden ein, für die die Wiedergabe fortgesetzt werden soll.

你可以使用元素的属性seekable来决定媒体目前能查找的范围。它返回一个你可以查找的TimeRanges 时间对象。

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

标记播放范围EDIT

在给一个b97864c2e0ef2353a16c4d64c7734e92或者39000f942b2545a5315c57fa3276f220元素标签指定媒体的URI的时候，你可以选择性地加入一些额外信息来指定媒体将要播放的部分。要这样做的话，需要附加一个哈希标志("#")，后面跟着媒体片段的描述。

一条指定时间范围的语句：

#t=[starttime][,endtime]

时间值可以被指定为秒数（如浮点数）或者为以冒号分隔时/分/秒格式（像2小时5分钟1秒表示为2:05:01）。

【相关推荐】

1. html/css免费视频教程

2. 教你如何增强H5中video标签在浏览器中的兼容性

3. 详解HTML5展示视频的标准

4. 简述39000f942b2545a5315c57fa3276f220标签的参数和属性

5. 分析H5网页中video标签中的MP4视频无法播放的缘由

Das obige ist der detaillierte Inhalt vonBringen Sie Ihnen bei, wie Sie HTML5-Audio und -Video gut nutzen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!