Detaillierte Erläuterung der HTML5 -Audioverwendung mit Medium -TV

Gemeinsames Videoformat

• Komponente des Videos: Bildschirm, Audio, Codierungsformat
• Videocodierung: H.264, Theora, VP8 (Google Open Source)

HTML5 unterstützt das Videoformat:

1. Ogg

OGG -Datei mit Theora Video Coding+VORBIS Audio -Codierung

Unterstützter Browser: F, C, o

2. MEPG4

MPEG4 -Datei mit H.264 Video Coding+AAC Audio Coding

Unterstützter Browser: s, c

3, Webm

Webm -Format mit VP8 -Video -Codierung+Vorbis -Audio -Codierung

Unterstützter Browser: i, f, c, o

Nachteile: wenige Videos, fast keine Transcoder, nicht gut für die Transkodierung

Wenn Sie ein Video haben möchten, können Sie die Größe des langsamen Vater-Divs automatisch füllen

Geben Sie ein Videoformat an.

 <Video id = media src = examp.mp4 width = 500 poster = examp1.jpg> Ihr Browser unterstützt nicht Video </Video>

Angesichts einer Vielzahl von Videoformaten, welche Art von Browser sich entscheidet, nach seinem eigenen Abschluss zu spielen

 <Video -Steuerelemente = Steuerelemente> <Source SRC = 1.MP4 Typ = Video/MP4/> // SRC -Eigenschaften, die in Quell -Tags schreiben, um den Typ -Typen -Typen -Typ anzugeben. Zum Beispiel ist der MP4 type = Video/mp4 <Quelle Src = 2.gg type = Video/ogg/> // OGG -Format <Source Src = 3.Webm Type = Video/Webm/> // Webm -Format </Video>

API -Attribut

• Dauer: Geben Sie die Länge des aktuellen Audio/Videos zurück (in Sekunden)
• Pause: Audio/Video einstellen oder zurückgeben, ob sie eine Pause einlegen soll
• Aktuelle Zeit: Setzen oder geben Sie die aktuelle Wiedergabestellung in Audio/Video (in Sekunden) fest oder geben Sie diese zurück)
• Ende: Ob die Wiedergabe des Audio/Video vorbei ist

1.4.1 Videomethode

Gemeinsame Methode

• Play (): Abspielen von Audio/Video
• Pause (): Setzen Sie das aktuelle Audio/Video aus

1.4.2 Netzwerkstatus

Holen Sie sich Videoobjekt

 Media = document.getElementById (Media);

1.Media.CurrentsRC;

Zurück zur URL der aktuellen Ressource

2.Media.src = Wert;

Return oder setzen Sie die URL der aktuellen Ressource

3.Media.CanPlayType (Typ);

Können Sie eine bestimmte Formatressource spielen?

4.Media.networkState;

0. Dieses Element wird nicht initialisiert

1. Normal, aber nicht das Netzwerk benutzen

2. Laden Sie Daten herunter

3. Keine Ressource

5.Media.load ();

Laden Sie die von SRC angegebene Ressource erneut.

6.Media.Buffer;

Kehren Sie in den Pufferbereich zurück, Timerangen

7.Media.Preload;

Keine: nicht vor -laden

Metadaten: Ressourceninformationen vor -laden

Auto:

1.4.3 Vorbereitungsstatus

1.Media.ReadyState

2.Media.Seeking;

Ob Sie suchen

1.4.4 Status spielen

1.Media.CurrentTime = Wert;

Die aktuelle Spielposition kann in die Position geändert werden

2.Media.StartTime;

Im Allgemeinen 0, wenn es sich um eine Stream -Medien oder die Ressource handelt, die nicht von 0 beginnt, ist es nicht 0

3.Media.Duration;

Die aktuelle Ressourcenlänge fließen zurück unbegrenzt

4.Media.pause;

Ob innehalt

5.Media.DefaultPlaybackRate = Wert;

Mit der Standard -Wiedergabetriebgeschwindigkeit können Sie einrichten

6.Media.PlaybackRate = Wert;

Die aktuelle Wiedergabegeschwindigkeit wird unmittelbar nach der Einstellung geändert

7. media.played;

Kehren Sie in den Bereich zurück, der gespielt wurde, Timerangen, siehe das Objekt unten zu diesem Objekt

8. media.Seekable;

Kehren Sie in den Bereich zurück, der suchen kann

9.Media.NEded;

Ob man endet

10.Media.autoplay;

Ob automatisch spielen soll

11.Media.loop;

Ob man zirkulieren

12.Media.play ();

Spielen

13.Media.pause ();

Pause

1.4.5 Videokontrolle

• Media.Controls; // Gibt es eine Standard -Steuerungsleiste
• Media.Volume = Wert;
• Media.Muted = Wert;
• Timerangen (Region) Objekt
• Timerangen.Length; // Regionaler Absatz
• Timerangen.Start (Index) // Die Ausgangsposition des Indexabschnittsbereichs
• Timeranges.end (Index) // am Ende des Indexabschnittsbereichs

1.4.6 Verwandte Ereignisse

1. Erstens können Sie das Ereignis über die AddEventListener -Methode in JS binden

2. Gemeinsame Ereignisse

• OnCanPlay: Das Skript, das ausgeführt wird, wenn die Datei fertig ist (der Puffer ist zu Beginn genug).
• OntimeUpdate: Ein Skript wird ausgeführt, wenn sich die Wiedergabeposition ändert (z. B. wenn der Benutzer eine andere Position im Medium eingeben).
• Eingeführt: Das Skript, das ausgeführt wird, wenn die Medien das Ende erreicht haben (kann Nachrichten senden, z. B. dank der Anzeige).

1.4.7 andere

1. Vollbild:

• Element.WebkitRequestfulscreen ();
• Element.mozRequestfulscreen ();
• Element.Requestful Screen ();

2. Beenden Sie den ganzen Bildschirm:

• document.webkitcanceltscreen ();
• document.mozcanceltscreen ();
• document.exitful v.

1. Häufiges Audioformat

Audio -Codierung: ACC, MP3, Vorbis

2. HTML5 unterstützt das Audio -Format:

• OGG kostenlos Browser: C, F, O.
• MP3 -Ladebrowser: i, c, s
• WAV -Ladebrowser: f, o, s

Unterstützung für das Musikformat

Audio kann von neu erstellt werden. Sie können es auch mit Dokumens erhalten

 // 通过 New 关键字来创建 Audio 对象 var music = new audio (test.mp3); // 通过 Dokument 来获取已经存在的 Audio 对象 var music = document.getElementById (Audio); // 当然这里也可以使用 Dokument Holen Sie sich andere Methoden wie .GetElementsByClassName ('ClassName').

Zunächst können Sie das Ereignis über die AddeVentristener -Methode in JS binden

Tatsächlich sind API und Audio von Video fast konsistent. Ein bisschen anders. Im Grunde genommen wird einer der anderen da sein

Der oben genannte Inhalt dieses Artikels.