Pengenalan ringkasan kepada atribut, kaedah dan peristiwa kemahiran tutorial HTML5 tag_html5

Saya menulis pemain video berdasarkan video html5 pada mulanya saya tidak memahaminya, dan kemudian saya dapat menulis pemain tersuai yang pada dasarnya lengkap. Dalam proses ini, saya memperoleh pemahaman yang menyeluruh tentang atribut, kaedah dan peristiwa teg video. Kategori tersebut disenaraikan di bawah.

<video>Atribut tag

Salin kod

Kod adalah seperti berikut :

src: atribut video
poster: kulit video, tiada gambar dipaparkan semasa main balik
pramuat: pramuat
automain: main balik automatik
gelung: main balik gelung
kawalan: bar kawalan yang disertakan dengan penyemak imbas
lebar: lebar video
tinggi: ketinggian video

kod html

Salin kod

Kod tersebut adalah seperti berikut:

<video id="media" src="http://www.jb51.net/test.mp4" mengawal lebar="400px" heigt="400px"></video> > // Kedua-dua audio dan video boleh mendapatkan objek melalui JS, dan JS memperoleh objek video dan audio melalui id

Dapatkan objek video

Salin kodKodnya adalah seperti berikut:

Media = document.getElementById("media");
HTMLVideoElement dan HTMLAudioElement kedua-duanya mewarisi daripada HTMLMediaElement

Salin kod

Kod tersebut adalah seperti berikut:

Media.error; //null: normal
Media.error.code //1. Benutzerbeendigung 2. Netzwerkfehler 3. Dekodierungsfehler 4. Ungültige URL
<strong>/ /Netzwerkstatus</strong>
- Media.currentSrc; //Die URL der aktuellen Ressource zurückgeben
- 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
- Media.networkState; //0. Dieses Element ist nicht initialisiert, verwendet aber nicht das Netzwerk. 3. Keine Ressource gefunden
- Media.load(); //Die von src angegebenen Ressourcen neu laden
- Media.buffered; //Zurück zum gepufferten Bereich, TimeRanges
- Media.preload; Metadaten nicht vorladen: Ressourcen vorladen Informationen automatisch:</p> <p><strong>//Ready State</strong> /Ob ich suche</p> <p><strong>//Wiedergabestatus</strong></p> <p>Media.currentTime = value; //Die aktuelle Wiedergabeposition, die Zuweisung eines Werts kann die Position ändern
Media.startTime; //Im Allgemeinen 0, wenn es sich um Streaming-Medien oder eine Ressource handelt, die nicht bei 0 beginnt , es wird nicht 0 sein
Media.duration; //Die aktuelle Ressourcenlänge gibt unendlich zurück
Media.paused; //Ob angehalten werden soll
Media.defaultPlaybackRate = value; be set
Media.playbackRate = value; //Aktuelle Wiedergabegeschwindigkeit, sofort nach Einstellung ändern
Media.played; //Den Bereich zurückgeben, der abgespielt wurde, TimeRanges, siehe unten für dieses Objekt
Media. suchbar; // Gibt den durchsuchbaren Bereich zurück. TimeRanges
Media.ended; // Ob die Wiedergabe beendet werden soll
Media.loop;
Media.play(); // Abspielen
Media.pause(); //Pause
<strong>//Videosteuerung</strong></p> <p>Media.controls;//Ob es eine Standardkontrollleiste gibt
Media.volume = value; //Volume
Media.muted = value; //Mute
TimeRanges (area) object
TimeRanges.length; //Anzahl der Bereichssegmente
TimeRanges.start(index) //Startposition des Indexsegmentbereichs
TimeRanges.end(index) //Endposition des Indexsegmentbereichs
<strong&gt ;//Verwandte Ereignisse</strong></p> <p> var eventTester = function(e){
Media.addEventListener(e,function(){
console.log((new Date()).getTime(),e)
}, false);
}
eventTester("loadstart"); //Der Client beginnt, Daten anzufordern
eventTester("progress"); //Der Client fordert Daten an
eventTester("suspend" ) ; //Verzögerter Download
eventTester("abort"); //Der Client bricht den Download aktiv ab (nicht aufgrund eines Fehlers)
eventTester("loadstart"); //Der Client beginnt mit der Datenanforderung
eventTester( "progress"); //Der Client fordert Daten an
eventTester("suspend"); //Verzögerter Download
eventTester("abort"); //Der Client bricht den Download aktiv ab (nicht fällig). zu einem Fehler),
eventTester("error"); //Beim Anfordern von Daten ist ein Fehler aufgetreten
eventTester("stalled"); //Netzwerkgeschwindigkeit ins Stocken geraten
eventTester("play"); /play() und automatische Wiedergabe werden beim Starten der Wiedergabe ausgelöst
eventTester("pause"); //pause() ausgelöst
eventTester("loadedmetadata"); //Ressourcenlänge erfolgreich erhalten
eventTester("loadeddata" ); //
eventTester("waiting"); //Warten auf Daten, kein Fehler
eventTester("playing"); //Wiedergabe starten
eventTester("canplay"); abspielen, kann aber aufgrund des Ladens unterbrochen werden Pause
eventTester("canplaythrough"); //Kann abgespielt werden, alle Songs wurden geladen
eventTester("seeking"); //Suche
eventTester(" seened"); //Suche abgeschlossen
eventTester("timeupdate"); //Spielzeit ändert sich
eventTester("ended"); //Spiel endet
eventTester("ratechange"); //Spielt rate changes
eventTester("durationchange" ); //Ressourcenlängenänderungen
eventTester("volumechange"); //Volumenänderungen