Heim > Web-Frontend > H5-Tutorial > Hauptteil

Überblick über die Verwendung von Audio-Tags im HTML5-Musikplayer_HTML5-Tutorial-Fähigkeiten

WBOY
Freigeben: 2016-05-16 15:49:13
Original
1505 Leute haben es durchsucht

Code kopieren
Der Code lautet wie folgt:

HTMLVideoElement- und HTMLAudioElement-Objekte abrufen


Code kopierenDer Code lautet wie folgt:
//Audio kann Objekte direkt über new erstellen
Media = newAudio("http://www.abc.com/test.mp3");
//Sowohl Audio als auch Video Das Objekt kann über das Tag
Media = document.getElementById("media");

Medienmethoden und -eigenschaften abgerufen werden:
HTMLVideoElement und HTMLAudioElement erben beide von HTMLMediaElement


Code kopierenDer Code lautet wie folgt:
//Fehlerstatus
Media.error / /null: normal
Media.error.code; //1. Benutzerbeendigung 2. Netzwerkfehler 3. Dekodierungsfehler 4. Ungültige URL
//Netzwerkstatus
Media.currentSrc; der aktuellen Ressource
Media.src = value; //Die URL der aktuellen Ressource zurückgeben oder festlegen
Media.canPlayType(type); //Ob Ressourcen in einem bestimmten Format abgespielt werden können
Medien. networkState; //0. Dieses Element ist nicht verfügbar. Initialisierung 1. Normal, aber das Netzwerk wird nicht verwendet. 3. Keine Ressource gefunden.
Media.load(//Die von src angegebene Ressource neu laden .buffered; //Zurück zum gepufferten Bereich, TimeRanges
Media.preload; //none: Metadaten nicht vorladen: Ressourceninformationen automatisch vorladen:
//Ready state
Media.readyState; :HAVE_NOTHING 2:HAVE_METADATA 3.HAVE_CURRENT_DATA 4.HAVE_FUTURE_DATA 5.HAVE_ENOUGH_DATA
Media.seeking; //Ob gesucht wird
//Wiedergabestatus
Media.currentTime = value; Durch Zuweisen eines Werts kann sich die Position ändern
Media.startTime; / / Im Allgemeinen 0, wenn es sich um Streaming-Medien oder eine Ressource handelt, die nicht bei 0 beginnt, ist es nicht 0
Media.duration; //Die aktuelle Ressource Länge Stream gibt unendlich zurück
Media.paused; // Ob angehalten werden soll
Media.defaultPlaybackRate = value; //Standard-Wiedergabegeschwindigkeit, Sie können festlegen
Media.playbackRate = value; //Aktuelle Wiedergabegeschwindigkeit, ändern unmittelbar nach der Einstellung
Media.played; //Zurück zum Bereich, der abgespielt wurde, TimeRanges, siehe unten für dieses Objekt
Media.seekable; //Zurückgeben des durchsuchbaren Bereichs TimeRanges; /Ob
Media.autoPlay beendet werden soll; //Ob die automatische Wiedergabe erfolgen soll
Media.play( //Play
Media.pause()); ; //Pause
//Control
Media.controls;//Ob es eine Standardkontrollleiste gibt
Media.volume = value; //Volume
Media.muted = value;
//TimeRanges (area) object
TimeRanges.length; //Anzahl der Bereichssegmente
TimeRanges start(index) //Die Startposition des Indexabschnittsbereichs
TimeRanges.end(index ) //Die Endposition des Indexabschnittsbereichs
Event:
eventTester = function(e){
Media .addEventListener(e,function(){
console.log((newDate() ).getTime(),e);
}
eventTester("loadstart"); / /Der Client beginnt mit der Anforderung von Daten
eventTester("progress"); fordert Daten an
eventTester("suspend"); //Verzögerter Download
eventTester("abort"); //Client Der Client bricht den Download aktiv ab (nicht aufgrund eines Fehlers),
eventTester(" error"); //Beim Anfordern von Daten ist ein Fehler aufgetreten
eventTester("stalled"); //Die Netzwerkgeschwindigkeit ist ins Stocken geraten
eventTester(" play"); //Wird ausgelöst, wenn play() und Autoplay mit der Wiedergabe beginnen
eventTester("pause"); //Ausgelöst durch pause()
eventTester("loadedmetadata"); //Erfolgreich erhaltene Ressourcenlänge
eventTester("loadeddata"); "waiting"); //Warten auf Daten, kein Fehler
eventTester("playing"); //Wiedergabe starten
eventTester("canplay"); //Kann abgespielt werden, kann aber aufgrund von Loading
eventTester("canplaythrough"); //Kann abgespielt werden, alle Songs wurden geladen
eventTester("seeking"); //Suche läuft
eventTester( "seeked"); //Suche abgeschlossen
eventTester("timeupdate"); //Wiedergabezeit geändert
eventTester("ended"); //Wiedergabe beendet
eventTester("ratechange"); //Wiedergaberate geändert
eventTester("durationchange "); //Änderung der Ressourcenlänge
eventTester("volumechange"); //Volumenänderung


自己写的一段js:

复制代码
代码如下:

$(function() {
var p = new Player();
p.read("play");
$("#stop").click(function() {
p .pause();
});
$("#start").click(function() {
p.play();
$("# show").click(function() {
alert(p.duration());
});
setInterval(function() {
$("#currentTime").text( p.currentTime());
},1000);
});
function Player() {};
Player.prototype = {
box : new Object(),
read : function(id) {
this.box = document.getElementById(id);
},
play : function() {
this.box.play();
},
pause : function() {
this.box.pause();
},
src:function(url){
this.box.src=url;
},
currentTime:function(){
return (this.box.currentTime/60).toFixed(2);
}
};
Player.prototype.duration=function(){
return (this.box.duration/60).toFixed(2);
};

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!