Commentaire: Cet article vous donnera un aperçu détaillé de l'utilisation de l'étiquette audio du lecteur de musique HTML5. Des amis qui aiment le HTML5 peuvent y faire référence. J'espère que cela vous sera utile.
<audio> Propriétés de la balise: SRC: Music UrlPreload: Preload AutoPlay: AutoPlay Loop: Loop Controls: Browser's Own Control Bar
<audioId = "Media" src = "http://www.abc.com/test.mp3" Contrôles> </ Audio>
<video> Propriétés de balises: SRC: URL de la vidéo Affiche: couverture vidéo, image affichée lorsqu'il n'y a pas de lecture Précharge: Preload AutoPlay: Ligne de la boucle automatique: Contrôles de boucle: la large largeur de barre de contrôle du navigateur: Largeur vidéo: hauteur vidéo
<videoid = "media" src = "http://www.abc.com/test.mp4" ControlSheigt = "400px"> </ video>
Obtenez des objets htmlvideoelement et htmlaudioElement
// Audio peut créer des objets directement via de nouveaux
Media = NewAudio ("http://www.abc.com/test.mp3");
// Audio et la vidéo peuvent obtenir des objets via des balises
Media = document.getElementById ("Media");
Méthodes et propriétés des médias:
Htmlvideoelement et htmlaudioelement sont tous deux hérités de htmlmediaElement
// Statut d'erreur
Media.Error; // NULL: NORMAL
Media.error.code; // 1. Terminaison de l'utilisateur 2. Erreur du réseau 3. Erreur de décodage 4. URL non valide
// l'état du réseau
Media.Currentrc; // Renvoie l'URL de la ressource actuelle
Media.src = valeur; // Renvoie ou définissez l'URL de la ressource actuelle
Media.CanPlayType (Type); // peut-il jouer une ressource d'un certain format
Media.networkState; // 0. Cet élément n'est pas initialisé 1. Normal mais n'utilise pas le réseau 2. Les données sont téléchargées 3. Ressource introuvable
Media.load (); // Recharger la ressource spécifiée par SRC
Media.Buffered; // Retour à la zone tamponnée, Timeranges
Média.preload; // Aucun: pas de métadonnées de précharge: préchargement des informations sur les ressources Auto:
// Statut prêt
Media.readystate; // 1: have_nothing 2: have_metadata 3.have_current_data 4.have_future_data 5.have_enough_data
Media.Eking; // cherche-t-il
// Statut de rediffusion
Media.currentTime = valeur; // La position de lecture actuelle, l'affectation peut modifier la position
Media.starttime; // Généralement 0, s'il s'agit d'un support de streaming ou d'une ressource qui ne commence pas de 0, ce n'est pas 0.
Media.Duration; // Le flux de longueur de ressources actuel renvoie infini
Media.paused; // s'il faut faire une pause
Media.defaultplaybackrate = valeur; // la vitesse de lecture par défaut peut être définie
Media.playbackrate = valeur; // La vitesse de lecture actuelle sera modifiée immédiatement après le réglage
Media.played; // Retour à la zone jouable, Timeranges, voir ci-dessous pour cet objet
Media.Vablenable; // retourner dans la zone où vous pouvez rechercher des minuteries
Media.ended; // est-il terminé
Media.Autoplay; // est-il joué automatiquement
Media.loop; // s'il faut jouer en boucle
Media.play (); //Jouer
Media.pause (); //Pause
//contrôle
Media.Controls; // existe-t-il une barre de contrôle par défaut
Media.volume = valeur; //Volume
Media.muted = valeur; //Muet
// objet Timeranges (région)
TIMERANGES.LENGT; // Nombre de segments de zone
TIMERANGES.START (INDEX) // La position de début de la zone de la section d'index
Timeranges.end (index) // la position finale de la zone de la section d'index
événement:
EventTester = fonction (e) {
Media.addeventListener (e, function () {
console.log ((newdate ()). getTime (), e);
});
}
EventTester ("LoadStart"); // Le client commence à demander des données
EventSter ("Progress"); // Le client demande des données
EventSter ("Suspender"); // téléchargement retardé
EventSter ("Abô"); // Le client met l'accent sur le téléchargement (non causé par une erreur),
EventTester ("Error"); // Une erreur a été rencontrée lors de la demande de données
EventSter ("Stapheled"); // Arrête la vitesse du réseau
EventTester ("Play"); // déclenché lorsque Play () et la lecture automatique commencent à jouer
EventTester ("pause"); // Pause () déclenche
EventTester ("LoadedMetadata"); // Obtenir avec succès la longueur des ressources
EventSter ("LoadedData"); //
EventSter ("Waiting"); // en attente de données, pas une erreur
EventTester ("Playing"); // Démarrer la lecture
EventTester ("CanPlay"); // peut jouer, mais peut être arrêté en raison du chargement au milieu
EventTester ("CanPlaythrough"); // peut être joué, toutes les chansons sont chargées
EventSter ("Cherche"); //Recherche
EventSter ("recherché"); // Recherche terminée
EventTester ("Timeupdate"); // Modifications du temps de lecture
EventSter ("terminé"); // La lecture se termine
EventSter ("RateChange"); // Le taux de lecture change
EventTester ("durée"); // Modifications de la longueur des ressources
EventSter ("VolumeChange"); // Changement de volume
Un paragraphe de js écrit par moi-même:
$ (function () {
var p = new Player ();
p.read ("play");
$ ("# stop"). Cliquez sur (fonction () {
p.pause ();
});
$ ("# start"). Cliquez sur (fonction () {
P.Play ();
});
$ ("# show"). Cliquez sur (fonction () {
alerte (p.duration ());
});
setInterval (function () {
$ ("# currenttime"). text (p.currentTime ());
}, 1000);
});
Function Player () {};
Player.prototype = {
Encadré: nouvel objet (),
lire: fonction (id) {
this.box = document.getElementById (id);
},
play: function () {
this.box.play ();
},
pause: fonction () {
this.box.pause ();
},
src: fonction (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);
};