Explication détaillée de l'utilisation audio HTML5 Medium -TV

Format vidéo commun

• Composant de la vidéo: écran, audio, format de codage
• Codage vidéo: H.264, Theora, VP8 (Google Open Source)

HTML5 prend en charge le format vidéo:

1. Ogg

Fichier OGG avec codage vidéo théora + codage audio Vorbis

Brochers pris en charge: F, C, O

2. Mepg4

Fichier MPEG4 avec H.264 Encoding vidéo + Encodage audio AAC

Brochers pris en charge: S, C

3, webm

Format webm avec codage vidéo VP8 + codage audio Vorbis

Browser pris en charge: I, F, C, O

Inconvénients: peu de vidéos, presque pas de transcodeurs, pas bons pour le transcodage

Si vous voulez une vidéo, vous pouvez remplir automatiquement la taille du Slow Father Div, il suffit d'ajouter du style = largeur = 100% à la balise vidéo;

Spécifiez un format vidéo.

 <vidéo id = media src = examp.mp4 width = 500 poster = examp1.jpg> Votre navigateur ne prend pas en charge la vidéo </ video>

Étant donné une variété de formats vidéo, le type de navigateur choisit de jouer en fonction de son propre diplôme

 <Video Controls = Controls> <Source Src = 1.mp4 Type = Video / MP4 /> // Propriétés SRC Écrivez dans des balises source, pour spécifier le type de type de vidéo, par exemple, le MP4 est type = vidéo / mp4 <source Src = 2.gg type = video / ogg /> // format ogg <source src = 3.webm type = video / webm /> // webm format </ video>

Attribut API

• Durée: Renvoyez la longueur de l'audio / vidéo actuel (en secondes)
• Usus: définissez ou retournez audio / vidéo, que ce soit pour faire une pause
• CurrentTime: Définissez ou renvoyez la position de lecture actuelle en audio / vidéo (en secondes)
• Terminé: si la lecture de l'audio / vidéo est terminée

1.4.1 Méthode vidéo

Méthode commune

• play (): Commencez à lire audio / vidéo
• pause (): suspendre l'audio / vidéo actuel

1.4.2 État du réseau

Obtenez un objet vidéo

 Media = document.getElementById (Media);

1.Media.Currentrc;

Retour à l'URL de la ressource actuelle

2.Media.src = valeur;

Retourner ou définir l'URL de la ressource actuelle

3.Media.CanPlayType (Type);

Pouvez-vous jouer une certaine ressource au format

4.Media.networkState;

0. Cet élément n'est pas initialisé

1. Normal mais n'utilise pas le réseau

2. Télécharger les données

3. Aucune ressource

5.Media.Load ();

Re-téléchargez la ressource spécifiée par SRC

6.Media.Buffered;

Retour à la zone tampon, Timeranges

7.Media.preload;

Aucun: pas de pré-chargement

Métadonnées: informations sur les ressources de charge

Auto:

1.4.3 Statut de préparation

1.Media.readystate

2.Média.Evente;

Si vous cherchez

1.4.4 Statut de jeu

1.Media.CurrentTime = Value;

La position de jeu actuelle peut être changée en position

2.Media.starttime;

Généralement 0, s'il s'agit d'un support de flux ou de la ressource qui ne commence pas de 0, ce n'est pas 0

3.Dedia.Duration;

Le flux de longueur de ressource actuel illimité

4.Media.paused;

Si vous devez faire une pause

5.Media.DefaultPlayBackrate = Value;

La vitesse de lecture par défaut, vous pouvez configurer

6.Media.PlayBackrate = Value;

La vitesse de lecture actuelle est modifiée immédiatement après le réglage

7.Media.Played;

Retour à la zone qui a été jouée, Timeranges, voir l'objet ci-dessous à propos de cet objet

8.Média.Eendable;

Retourner dans la zone qui peut chercher

9.Media.nded;

Que ce soit finir

10.Media.Autoplay;

S'il faut jouer automatiquement

11.Media.loop;

Si elle doit circuler

12.media.play ();

Jouer

13.Media.Pause ();

pause

1.4.5 Contrôle vidéo

• Media.Controls; // y a-t-il une barre de contrôle par défaut
• Media.Volume = Value;
• Media.Muted = valeur;
• Objet Timeranges (région)
• Timeranges.Length; // paragraphe régional
• TIMERANGES.START (INDEX) // La position de départ de la zone de la section d'index
• Timeranges.end (index) // la fin de la zone de la section d'index

1.4.6 Événements connexes

1. Tout d'abord, vous pouvez lier l'événement via la méthode AddeventListener dans JS

2. Événements communs

• OnCanplay: le script en cours d'exécution lorsque le fichier est prêt (le tampon suffit au début).
• OnTimeUpdate: un script s'exécute lorsque la position de lecture change (comme lorsque l'utilisateur est sur le point d'entrer dans une position différente dans le support).
• SONNÉE: Le script en cours d'exécution lorsque les médias ont atteint la fin (peuvent envoyer des messages tels que grâce à la visualisation).

1.4.7 Autres

1. Écran plein:

• element.webkitRequestfulScreen ();
• Élément.MozrequestfulScreen ();
• Element.requestfulScreen ();

2. Sortez en plein écran:

• document.webkitcanceltscreen ();
• Document.MozCanceltsCreen ();
• document.exitfulScreen ();

1. Format audio commun

Codage audio: ACC, MP3, Vorbis

2. HTML5 prend en charge le format audio:

• OGG Free Office Browser: C, F, O
• Browser de charge mp3: I, C, S
• Broqueur de charge WAV: F, O, S

Prise en charge du format musical

L'audio peut être créé par nouveau. Vous pouvez également l'obtenir en utilisant des documents

 // 通过 Nouveau 关键字来创建 Audio 对象 var music = new Audio (test.mp3); // 通过 document 来获取已经存在的 Audio 对象 var music = document.getElementById (audio); // 当然这里也可以使用 document Obtenez d'autres méthodes telles que .getElementsByClassName («className»).

Tout d'abord, vous pouvez lier l'événement via la méthode AddeventRristener dans JS

En fait, l'API et l'audio de la vidéo sont presque cohérents. Un peu différent. Donc, fondamentalement, l'un des autres sera là

Ce qui précède est tout le contenu de cet article.