Analyse des Videoelements (Video) in HTML5

Der Inhalt, der in diesem Artikel mit Ihnen geteilt wird, befasst sich mit der Analyse des Videoelements in HTML5. Ich hoffe, dass er für Freunde in Not hilfreich ist.

HTML5-Videohintergründe verwenden

Bisher gab es noch keinen Standard für die Anzeige von Videos auf Webseiten. Heutzutage werden die meisten Videos über Plug-Ins wie Flash angezeigt. Allerdings verfügen nicht alle Browser über die gleichen Plugins. HTML5 gibt eine Standardmethode zum Einbinden von Videos über das Videoelement an.

Von Browsern unterstützte Videoformate

Derzeit unterstützt das Videoelement drei Videoformate: Ogg, MPEG4 und WebM. Die Browserunterstützung für diese drei Formate ist wie folgt :

格式	IE	Firefox	Opera	Chrome	Safari
Ogg	No	3.5+	10.5+	5.0+	No
MPEG 4	9.0+	No	No	5.0+	3.0+
WebM	No	4.0+	10.6+	6.0+	No

Format

IE

Firefox

Opera

Chrome

Safari

Ogg

Nein

3,5+

10,5+

5,0+

Nein

MPEG 4

9.0+

Nein

Nein

5.0+

3.0+ td>

WebM

Nein

4.0+

10.6+

6.0+ td>

Nein

Ogg Das Format ist eine Ogg-Datei mit Theora-Videokodierung und Vorbis-Audiokodierung, das MPEG4-Format ist eine MPEG 4-Datei mit H.264-Videokodierung und AAC-Audiokodierung, das MP4-Format gehört zu diesem Format, das WebM-Format ist mit VP8-Videokodierung und Vorbis-Audio kodiertes WebM Datei.

Verwenden Sie das Videoelement, um die Videowiedergabe zu implementieren

Das Steuerattribut des Videoelements wird verwendet, um Wiedergabe-, Pausen- und Lautstärkeregler zwischen Der eingefügte Inhalt ist für die Anzeige durch Browser vorgesehen, die das Videoelement nicht unterstützen. Um das Problem browserkompatibler Videoformate zu lösen, werden unten zwei Quellelemente verwendet Browser, um das Video abzuspielen. Der einfache Code lautet wie folgt:

<video controls=" controls">
<source src="../videoAudio/1.mp4" type="audio/mp4"></source>
<source src="../videoAudio/1.ogg" type="audio/ogg"></source>
该浏览器不支持该格式的视频播放
</video>

Verwenden Sie Dom, um Video zu bedienen

Verwenden Sie benutzerdefinierte Schaltflächen, um die Wiedergabe-, Pause- und Videogrößensteuerung des Steuerattributs zu implementieren.

<video id="view">
<source src="../videoAudio/1.mp4" type="audio/mp4"></source><!--播放多个格式的视频-->
<source src="../videoAudio/1.ogg" type="audio/ogg"></source>
该浏览器不支持视频格式
</video>
<button onclick="play()">停止/开始</button><button onclick="toSmall()">缩小</button> <button onclick="toBig()">放大</button>
<script>
var v =document.getElementById("view");
function play(){
if(v.paused){
v.play();//播放
} else{
v.pause();//停止
}
}
function toSmall(){
v.width=300;
v.height=300;
}
function toBig(){
v.width=500;
v.height=500;
}
</script>

Videoformatkonvertierung (MP4-Format in OGG-Format konvertieren)

1. Laden Sie zuerst ffmpeg herunter und geben Sie die URL www.ffmpeg.org (Open Source) ein URL), geben Sie Windows ein, um die Windows-Version der Datei herunterzuladen.

2. Dekomprimieren Sie die komprimierte ffmpeg-Datei (nehmen Sie ffmpeg-20180803-5aeb3b0-win32-static.zip) und fügen Sie den Pfad des ffmpegbin-Verzeichnisses zum Pfad der Umgebungsvariablen hinzu (G:mydeveloperapplicationhbuilderhtml5ffmpeg-20180803). -5aeb3b0-win32- staticbin).

3. Geben Sie nach dem Festlegen der Umgebungsvariablen ffmpeg in das DOS-Befehlsformular ein, um zu testen, ob es ausgeführt werden kann.

4. Wechseln Sie im DOS-Befehlsfenster in das Verzeichnis, in dem sich die MP4-Videodatei befindet, und geben Sie schließlich ffmpeg -i 1.mp4 -acodec libvorbis 1.ogg ein (ersetzen Sie hier 1.mp4 durch 1. ogg).
5.ffmpeg detaillierte Befehle.

Empfohlene verwandte Artikel: HTML5 kombiniert mit Internet+, um einen 3D-Tunnel zu erreichen (mit Code) Canvas, Drag-and-Drop-Ereignisse in H5 Und Audio- und Videocodebeispiele

Das obige ist der detaillierte Inhalt vonAnalyse des Videoelements (Video) in HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!