Kommentar: Dieser Artikel gibt Ihnen einen detaillierten Überblick über die Verwendung des Audio -Tags von HTML5 Music Player. Freunde, die HTML5 mögen, können sich darauf verweisen. Ich hoffe, es wird Ihnen hilfreich sein.
<Audio> Tag -Eigenschaften: SRC: Musik urlPreload: Vorspannung Autoplay: Autoplay -Schleife: Schleifensteuerung: Browsers eigene Steuerleiste
<audioid = "media" src = "http://www.abc.com/test.mp3" Steuerelemente> </audio>
<video> Tag -Eigenschaften: SRC: URL des Video -Posters: Video -Cover, Bild angezeigt, wenn kein Spiel vorlädt: Vorspannung Autoplay: Autoplay Loop: Loop Controls: Browsers eigene Steuerleiste Breite: Video Breite Höhe: Videohöhe
<VideoID = "Media" src = "http://www.abc.com/test.mp4" controlshight = "400px"> </Video>
Holen Sie sich HTMLVideOelement- und HTMLaudioelement -Objekte
// Audio kann Objekte direkt über neu erstellen
Media = NewAudio ("http://www.abc.com/test.mp3");
// Sowohl Audio als auch Video können Objekte über Tags erhalten
Media = document.getElementById ("Media");
Medienmethoden und Eigenschaften:
Htmlvideoelement und htmlaudioElement werden beide von htmlmediaElements geerbt
// Fehlerstatus
Media.Error; // NULL: Normal
Media.Error.code; // 1. Benutzerabschluss 2. Netzwerkfehler 3. Dekodierungsfehler 4. URL Ungültig
// Netzwerkstatus
Media.CurrentsRC; // Geben Sie die URL der aktuellen Ressource zurück
Media.src = Wert; // Die URL der aktuellen Ressource zurückgeben oder festlegen
Media.CanPlayType (Typ); // Kann es eine Ressource eines bestimmten Formats spielen?
Media.networkState; // 0. Dieses Element wird nicht initialisiert. Normale, aber nicht das Netzwerk verwendet. 2. Daten werden heruntergeladen. Ressource nicht gefunden
Media.load (); // Die von SRC angegebene Ressource neu laden
Medien.bauffinder; // kehre in den gepufferten Bereich zurück, Timerangen
Media.Preload; // Keine: Nicht vorgeladene Metadaten: Vorspannungsressourceninformationen automatisch:
// Bereitstatus
Media.ReadyState; // 1: Have_nothing 2: Have_Metadata 3.Have_Current_Data 4.Have_Future_Data 5.Have_enough_data
Medien.such; // sucht es
// Status wiederholen
Media.CurrentTime = Wert; // Die aktuelle Wiedergabeposition kann die Position die Position ändern
Medien.StartTime; // Im Allgemeinen 0, wenn es sich um ein Streaming -Medium oder eine Ressource handelt, die nicht von 0 beginnt, ist es nicht 0.
Medien.Duration; // Der aktuelle Stream der Ressourcenlänge gibt unendlich
Media.pause; // ob innehalten soll
Media.DefaultPlaybackRate = value; // Standard -Wiedergabegeschwindigkeit kann festgelegt werden
Media.PlaybackRate = value; // Die aktuelle Wiedergabegeschwindigkeit wird unmittelbar nach der Einstellung geändert
Media.played; // kehren Sie in den spielbaren Bereich zurück, Timerangen, siehe unten für dieses Objekt
Medien.Seekierbar; // kehren Sie in den Bereich zurück, in dem Sie Timerangen suchen können
Medien.endierte; // Ist es beendet
Media.autoplay; // wird es automatisch gespielt
Media.Loop; // ob Schleife spielen soll
Media.play (); //Spielen
Media.pause (); //Pause
//Kontrolle
Media.Controls; // Gibt es eine Standardsteuerleiste
Media.Volume = Wert; //Volumen
Media.muted = Wert; //Stumm
// Timerangen (Region) Objekt
Timerangen.Length; // Anzahl der Flächensegmente
Timerangen.Start (Index) // Die Startposition des Indexabschnittsbereichs
Timerangen.end (Index) // Die Endposition des Indexabschnittsbereichs
Ereignis:
eventTester = function (e) {
Media.AddeVentListener (e, function () {
console.log ((newdate ()). GetTime (), e);
});
}
eventTester ("loadStart"); // Der Client beginnt mit dem Anfordern von Daten
EventTester ("Fortschritt"); // Der Client fordert Daten an
EventTester ("Suspend"); // Verzögerter Download
EventTester ("abort"); // Der Client beendet den Download aktiv (nicht durch einen Fehler verursacht).
EventTester ("Fehler"); // Es wurde ein Fehler aufgetreten, als er Daten anforderte
EventTester ("Stillled"); // Stoppen Sie die Netzwerkgeschwindigkeit
EventTester ("Play"); // Ausgelöst bei Play () und Autoplay beginnen zu spielen
EventTester ("Pause"); // pause () Trigger
EventTester ("LoadedMetadata"); // die Ressourcenlänge erfolgreich erhalten
EventTester ("LoadedData"); //
EventTester ("Warten"); // Warten auf Daten, kein Fehler
EventTester ("Spielen"); // Wiedergabe starten
EventTester ("CanPlay"); // kann spielen, kann aber aufgrund des Ladens in der Mitte stehen bleiben
EventTester ("CanPlayThrough"); // kann gespielt werden, alle Songs sind geladen
EventTester ("suche"); // Suche
EventTester ("gesucht"); // Suche abgeschlossen
EventTester ("TimeUpdate"); // Wiedergabezeit ändert sich
EventTester ("beendet"); // Die Wiedergabe endet
EventTester ("Ratechange"); // Die Wiedergabetraten ändert sich
EventTester ("DurationChange"); // Änderungen der Ressourcenlänge
EventTester ("Volumechange"); // Volumenänderung
Ein Absatz von JS, die von mir selbst geschrieben wurden:
$ (function () {
var p = neuer Player ();
P.Read ("Play");
$ ("#STOP"). Click (function () {
P.Pause ();
});
$ ("#start"). click (function () {
P.play ();
});
$ ("#show"). click (function () {
Alert (p.Duration ());
});
setInterval (function () {
$ ("#currentime"). text (P.CurrentTime ());
}, 1000);
});
Funktion Player () {};
Player.Prototype = {
Box: New Object (),
Lesen Sie: Funktion (id) {
this.box = document.getElementById (id);
},
Play: function () {
this.box.play ();
},
Pause: function () {
this.box.pause ();
},
src: function (url) {
this.box.src = url;
},
Currentime: function () {
return (this.box.currenttime/60) .tofixed (2);
}
};
Player.Prototype.duration = function () {
return (this.box.duration/60) .tofixed (2);
};