Zusammenfassende Einführung in die Attribute, Methoden und Ereignisse der HTML5-Video-Tag_html5-Tutorialfähigkeiten

Ich habe vor einiger Zeit einen Videoplayer geschrieben, der auf HTML5-Videos basiert. Ich verstand ihn zunächst nicht und konnte dann einen im Grunde vollständigen benutzerdefinierten Player schreiben. In diesem Prozess erlangte ich ein umfassendes Verständnis der Attribute, Methoden und Ereignisse des Video-Tags. Die Kategorien sind unten aufgeführt.

Code kopieren

Der Code lautet wie folgt :

src: Attribute des Videos
Poster: Videocover, kein Bild wird während der Wiedergabe angezeigt
Preload: Vorladen
Autoplay: automatische Wiedergabe
Loop: Loop-Wiedergabe
Steuerelemente: die mit dem Browser gelieferte Steuerleiste
Breite: Videobreite
Höhe: Videohöhe

HTML-Code

Code kopieren

Der Code lautet wie folgt:

> // Sowohl Audio als auch Video können Objekte über JS abrufen, und JS erhält Video- und Audioobjekte über die ID

Holen Sie sich das Videoobjekt

Kopieren Sie den CodeDer Code lautet wie folgt:

Media = document.getElementById("media");

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

Code kopierenDer Code lautet wie folgt:

Media.error; //null : normal
Media.error.code; //1. Fin de l'utilisateur 2. Erreur réseau 3. Erreur de décodage 4. URL invalide
/ /Network Status
- Media.currentSrc; //Renvoyer l'URL de la ressource actuelle
- Media.src = value; //Renvoyer ou définir l'URL de la ressource actuelle
- Media. .canPlayType( type); //Si les ressources dans un certain format peuvent être lues
- Media.networkState; //0. Cet élément n'est pas initialisé 1. Normal mais n'utilise pas le réseau 2. Les données sont en cours de téléchargement 3. Aucune ressource trouvée
- Media.load(); //Recharger les ressources spécifiées par src
- Media.buffered; //Retour à la zone tampon, TimeRanges
- Media.preload; ne pas précharger les métadonnées : précharger les ressources Informations auto :

//Ready State
- Media.readyState;//1:HAVE_NOTHING 2:HAVE_METADATA 3.HAVE_CURRENT_DATA 4.HAVE_FUTURE_DATA 5.HAVE_ENOUGH_DATA
- Media.seeking; /Que vous recherchiez

//État de lecture

Media.currentTime = value; //La position de lecture actuelle, l'attribution d'une valeur peut modifier la position
Media.startTime; //Généralement 0, s'il s'agit d'un streaming multimédia ou d'une ressource qui ne démarre pas à 0. , ce ne sera pas 0
Media.duration; //La longueur actuelle du flux renvoie une valeur infinie
Media.paused; //S'il faut mettre en pause
Media.defaultPlaybackRate = value; être défini
Media.playbackRate = value; //Vitesse de lecture actuelle, modifiée immédiatement après le réglage
Media.played; //Renvoie la zone qui a été lue, TimeRanges, voir ci-dessous pour cet objet
Media. seekable; //Renvoie la zone qui peut être recherchée TimeRanges
Media.ended; // S'il faut terminer
Media.autoPlay; // S'il faut lire automatiquement
Media.loop;
Media.play(); // Lecture
Media.pause(); //Pause
//Contrôle vidéo

Media.controls;//S'il existe une barre de contrôle par défaut
Media.volume = value; //Volume
Media.muted = value; //Mute
Objet TimeRanges (zone)
TimeRanges.length; //Nombre de segments de zone
TimeRanges.start(index) //Position de début de la zone du segment d'index
TimeRanges.end(index) //Position de fin de la zone du segment d'index

var eventTester = function(e){
Media.addEventListener(e,function(){
console.log((new Date()).getTime(),e)
}, false);
>
eventTester("loadstart"); //Le client commence à demander des données
eventTester("progress"); //Le client demande des données
eventTester("suspend" ) ; //Téléchargement retardé
eventTester("abort"); //Le client termine activement le téléchargement (pas à cause d'une erreur)
eventTester("loadstart"); //Le client commence à demander des données
eventTester( "progress"); //Le client demande des données
eventTester("suspend"); //Téléchargement retardé
eventTester("abort"); //Le client met activement fin au téléchargement (non dû à une erreur),
eventTester("error"); //Une erreur s'est produite lors de la demande de données
eventTester("stalled"); //Vitesse du réseau bloquée
eventTester("play"); /play() et lecture automatique Déclenchés au démarrage de la lecture
eventTester("pause"); //pause() déclenché
eventTester("loadedmetadata"); //Longueur de la ressource obtenue avec succès
eventTester("loadeddata"); ); //
eventTester("waiting"); //En attente de données, pas d'erreur
eventTester("playing"); //Démarrer la lecture
eventTester("canplay"); lecture, mais peut être interrompue en raison du chargement Pause
eventTester("canplaythrough"); //Peut être joué, toutes les chansons ont été chargées
eventTester("seeking"); seeked"); //Recherche terminée
eventTester("timeupdate"); //Changements d'heure de lecture
eventTester("ended"); //La lecture se termine
eventTester("ratechange"); //Lecture changements de taux
eventTester("durationchange" ); //Changements de longueur de ressource
eventTester("volumechange"); //Changements de volume