Format vidéo commun
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;
1.2 Prototype de baliseSpé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
Remarque: les étiquettes source multiples, les navigateurs seront identifiés à partir du premier.<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>1.3 Attribut de balise vidéo importante
| Attribut (couramment utilisé) | valeur | Description de la fonction |
|---|---|---|
| Commandes | Commandes | S'il faut afficher le contrôle de la lecture |
| en place automatique | en place automatique | Définissez s'il faut ouvrir le navigateur et jouer automatiquement |
| largeur | Pilex (pixel) | Réglez la largeur du joueur |
| hauteur | Pilex (pixel) | Réglez la hauteur du joueur |
| boucle | boucle | Définissez la vidéo si vous devez jouer circulairement (c'est-à-dire continuer à être rejoué après la lecture) |
| précharge | précharge | Définissez s'il faut attendre le chargement puis jouer |
| SRC | URL | Définissez l'adresse URL pour lire la vidéo |
| affiche | imgurn | Définir l'image d'affichage par défaut du lecteur initialement |
| Autobuffer | Autobuffer | Définir comme une méthode de tampon de navigateur, sans définir automatiquement pour être efficace |
Attribut API
| propriété | décrire |
|---|---|
| Audiotracks | Retour à l'objet audiotracklist qui peut être utilisé par le rail son |
| tampon | Retour pour indiquer l'objet Timeranges de la partie tampon de l'audio / vidéo |
| Contrôleur | Retour à l'objet MediaController du contrôleur de média audio / vidéo |
| Croix | Paramètres ou renvoyer les paramètres de COR audio / vidéo |
| Courantsrc | Retour à l'URL audio / vidéo actuelle |
| actuel | Définissez ou renvoyez la position de lecture actuelle dans l'audio / vidéo (en secondes) |
| DefaultMutem | Définir ou retourner par défaut audio / vidéo, que vous soyez muet |
| defaultplaybackrate | Définir ou renvoyer la vitesse de lecture par défaut de l'audio / vidéo |
| durée | Retour à la longueur de l'audio / vidéo actuel (en secondes) |
| terminé | Si la lecture de l'audio / vidéo est terminée |
| erreur | Retour à l'objet MediaError de l'état d'erreur audio / vidéo |
| Groupe média | Définissez ou renvoyez la combinaison de l'audio / vidéo (pour connecter plusieurs éléments audio / vidéo) |
| en sourdine | Définissez ou renvoyez l'audio / vidéo que ce soit silencieux |
| réseau | Revenir à l'état du réseau actuel de l'audio / vidéo |
| interrompu | Définir ou renvoyer l'audio / vidéo, que ce soit en pause |
| Lecture | Définir ou retourner la vitesse de lecture audio / vidéo |
| joué | Retour pour indiquer l'objet Timeranges de la pièce de lecture audio / vidéo |
| Prêt à l'emploi | Retour à l'état audio / vidéo actuellement prêt |
| promptable | Retour à l'objet Tirmeranges de la pièce adressable audio / vidéo |
| en cherchant | Si l'utilisateur arrière recherche dans l'audio / vidéo |
| date de début | Retour pour indiquer l'objet de date du décalage d'heure actuel |
| textracks | Retourner pour indiquer que l'objet TextTrackList qui peut être utilisé par le texte peut |
| Casse-casse | Revenir aux objets VideoTrackList qui peuvent être utilisés avec des pistes vidéo |
| volume | Définir ou retourner le volume audio / vidéo |
1.4.1 Méthode vidéo
| API | Description de l'événement |
|---|---|
| jouer | video.play (); |
| pause | vidéo.Pause (); |
| charger | video.load (); Répondre à tous les attributs pour méditer, et le statut de redémarrage de la vidéo |
| Canetype | var support = videoid.canPlayType ('vidéo / mp4'); Déterminez si le navigateur prend en charge le type actuel de format vidéo Valeur de retour: String vide: ne supportez pas peut-être: peut prendre en charge probablement: supporter entièrement |
Méthode commune
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
1.4.6 Événements connexes
1. Tout d'abord, vous pouvez lier l'événement via la méthode AddeventListener dans JS
| événement | illustrer |
|---|---|
| marge de chargement | Le client démarre les données de demande |
| Progrès | Le client demande des données |
| Suspendre | Téléchargement de retard |
| avorter | Le client met l'accent sur le téléchargement (non causé par des erreurs) |
| marge de chargement | Le client démarre les données de demande |
| Progrès | Le client demande des données |
| erreur | Des erreurs rencontrées lors de la demande de données |
| Étal | Speed Speed ST pour |
| jouer | Play () et déclencheur de lecture automatique |
| pause | Pause () Trigger |
| LoadEdMetadata | Obtenir avec succès la longueur des ressources |
| chargé | - |
| en attendant | Attendre les données n'est pas erronée |
| jouer | Démarrer la lecture |
| Jeu de canettes | Il peut être joué, mais il peut être suspendu à cause du chargement |
| CanPlaythrough | Vous pouvez jouer, les chansons sont toutes chargées |
| en cherchant | Trouver |
| Cherché | Découvrir |
| dalton | Changements de temps de jeu |
| terminé | Jouer la fin |
| Rattechange | Changement de taux de jeu |
| durée | Changements de longueur des ressources |
| Volumechange | Changement de volume |
2. Événements communs
1.4.7 Autres
1. Écran plein:
2. Sortez en plein écran:
1. Format audio commun
Codage audio: ACC, MP3, Vorbis
2. HTML5 prend en charge le format audio:
| propriété | Valeur d'attribut | Annotation |
|---|---|---|
| SRC | URL | L'adresse URL de la musique jouée (Firefox ne prend en charge que la musique ogg, et IE9 ne prend en charge que la musique de format MP3 .Chrome semble être entièrement pris en charge) |
| précharge | précharge | Pré-charge (chargement ou tampon audio lorsque la page est chargée). |
| boucle | boucle | Lecture circulaire |
| Commandes | Commandes | S'il faut afficher la barre de contrôle par défaut (bouton de commande) |
| en place automatique | en place automatique | Lecture automatique |
Prise en charge du format musical
| Format audio | Chrome | Incendier | IE9 | Opéra | Safari |
|---|---|---|---|---|---|
| Ogg | soutien | soutien | soutien | Pas de soutien | Pas de soutien |
| Mp3 | soutien | Pas de soutien | soutien | Pas de soutien | soutien |
| Wav | Pas de soutien | soutien | Pas de soutien | soutien | Pas de soutien |
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»).2.3 Quelques attributs et méthodes d'étiquettes audio fournies par l'API
| propriété | Annotation |
|---|---|
| durée | Obtenez la longueur totale des fichiers multimédias, avec S comme l'unité, si elle ne peut pas être obtenue, retournez à Nan |
| interrompu | Si les fichiers multimédias sont suspendus, alors l'attribut pause renvoie vrai, sinon il retournera faux |
| terminé | Si le fichier multimédia est joué, revenez vrai |
| en sourdine | Utilisé pour obtenir ou définir un état muet. Valeur booléenne |
| volume | La valeur d'attribut du volume de contrôle de volume est de 0-1; |
| Durée | Retour à l'heure de début |
| erreur | Le renvoi du code d'erreur est normal lorsque Uull. Sinon, vous pouvez l'obtenir via music.error.code |
| actuel | Il est utilisé pour obtenir ou contrôler le temps de lecture actuel, l'unité est S. |
| Courantsrc | Renvoie le fichier qui est en cours de lecture ou de charger sous la forme d'une chaîne |
| fonction | effet |
|---|---|
| charger () | Chargez audio, logiciel vidéo |
| Jouer () | Chargez et lisez audio, fichiers vidéo ou redémarrez l'audio et la vidéo en suspens |
| pause () | Fichiers audio audio et vidéo qui sont interrompus pour le statut de lecture |
| CanPlayType (OBJ) | Testez s'il prend en charge un mini-fichier donné de type |
Tout d'abord, vous pouvez lier l'événement via la méthode AddeventRristener dans JS
| Nom de l'événement | Événement |
|---|---|
| marge de chargement | Le client démarre les données de demande |
| Progrès | Le client demande des données (ou un amorti) |
| jouer | Jouer () et jouer automatiquement en jouant |
| pause | Lorsque la méthode Pause () est promue |
| terminé | La lecture actuelle est terminée |
| dalton | Le temps de lecture actuel change. Le traitement du temps couramment utilisé pendant la lecture |
| CanPlaythrough | La chanson a été chargée et complètement terminée |
| Jeu de canettes | Le coussin peut être joué jusqu'à présent. |
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à
RésumerCe qui précède est tout le contenu de cet article.