Maison > interface Web > tutoriel HTML > le corps du texte

L'utilisation de balises audio et vidéo en HTML5

不言
Libérer: 2018-04-27 14:09:24
original
2809 Les gens l'ont consulté

Cet article présente principalement l'utilisation de balises audio et vidéo en HTML5. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer

Page de partage WeChat que nous avons récemment créée. Il existe de nombreuses lectures vocales et affichages vidéo, et de nombreux attributs de méthodes associés n'ont pas été touchés auparavant, alors enregistrez-les maintenant !

1. Tout d'abord, comprenez les informations de base sur les deux balises :

Les attributs de base des deux balises :

Propriété Description
audioTracks Renvoie un objet AudioTrackList représentant les pistes audio disponibles
lecture automatique Définir ou renvoyer s'il faut lire l'audio/vidéo immédiatement une fois le chargement terminé
buffered Retour pour indiquer L'objet TimeRanges de la partie tamponnée du
contrôleur renvoie l'objet MediaController représentant le contrôleur média actuel de l'audio/vidéo
contrôles Définir ou renvoyer l'audio/vidéo s'il faut afficher les contrôles (tels que lecture/pause, etc.)
crossOrigin Définir ou renvoyer les paramètres CORS audio/vidéo
currentSrc Renvoie l'URL de l'audio/vidéo actuel
currentTime ou Renvoyer la position de lecture actuelle dans l'audio/vidéo (en secondes)
defaultMuted Définir ou renvoyer si l'audio/vidéo est coupé par défaut
defaultPlaybackRate Définit ou renvoie la vitesse de lecture par défaut de l'audio/vidéo
durée Renvoie la durée de l'audio/vidéo actuel en secondes Count)
terminé Renvoie si la lecture audio/vidéo est terminée
erreur Renvoie une MediaError indiquant l'erreur audio/vidéo status Object
loop Définit ou renvoie si l'audio/vidéo doit être relu à la fin
mediaGroup Définissez ou retournez la combinaison à laquelle appartient l'audio/vidéo (utilisée pour connecter plusieurs éléments audio/vidéo)
muet Définissez ou retournez si l'audio /video est coupé
networkState Renvoie l'état actuel du réseau audio/vidéo
en pause Définir ou renvoyer l'audio/Si la vidéo est en pause
playbackRate Définir ou renvoyer la vitesse de lecture audio/vidéo
played Renvoie un objet TimeRanges représentant la partie jouée de l'audio/vidéo
preload Définit ou renvoie si l'audio/vidéo doit être chargé après le chargement de la page
readyState Renvoie l'état de préparation actuel de l'audio/vidéo
recherchable Renvoie la partie adressable de l'objet TimeRanges audio/vidéo
recherche Renvoie si l'utilisateur recherche dans l'audio/vidéo
src Définit ou renvoie la source actuelle des éléments audio/vidéo
startDate Renvoie une date représentant l'heure actuelle offset Object
textTracks Renvoie une TextTrackList représentant les pistes de texte disponibles. Object
videoTracks Renvoie représentant pistes de texte disponibles L'objet VideoTrackList de la piste vidéo
volume définit ou renvoie le volume audio/vidéo

deux étiquettes La méthode de base :

Méthode Description
方法 描述
addTextTrack() 向音频/视频添加新的文本轨道
canPlayType() 检测浏览器是否能播放指定的音频/视频类型
load() 重新加载音频/视频元素
play() 开始播放音频/视频
pause() 暂停当前播放的音频/视频
addTextTrack()Ajouter une nouvelle piste de texte à l'audio/vidéo canPlayType()Détecter si le navigateur peut lire le type audio/vidéo spécifiéload()Recharger l'audio/vidéo elementplay()Commencer la lecture audio/vidéopause()Mettre en pause le lecture audio/vidéo en cours


Événements dans les deux balises :

Événement Description
abandonner Lorsque le chargement de l'audio/vidéo a été interrompu
peut jouer Quand le navigateur peut lire de l'audio/vidéo
peut jouer Quand le navigateur peut lire via Lors de la lecture sans pause en raison de la mise en mémoire tampon
changement de durée Lorsque la durée audio/vidéo a été modifiée
vidée Lorsque la playlist actuelle est vide
terminée Lorsque la playlist actuelle est terminée
erreur Lorsqu'une erreur se produit lors du chargement audio/vidéo
loadeddata Lorsque le navigateur a chargé l'audio/vidéo Lorsque l'image actuelle
loadedmetadata Lorsque le navigateur a chargé les métadonnées de l'audio/vidéo
loadstart Lorsque le navigateur démarre recherche de l'audio/vidéo
pause Lorsque l'audio/vidéo a été mis en pause
lecture Lorsque l'audio/vidéo a démarré ou n'est plus en pause
lecture Lorsque l'audio/vidéo a démarré ou n'est plus en pause Mise en mémoire tampon en pause ou prête après l'arrêt
progression Lorsque le navigateur télécharge de l'audio/vidéo
changement de taux Lorsque la vitesse de lecture de l'audio/vidéo a changé
recherché Lorsque l'utilisateur s'est déplacé/a sauté vers une nouvelle position dans l'audio/vidéo
recherche Lorsque l'utilisateur commence à se déplacer/sauter vers une nouvelle position dans l'audio/vidéo
bloqué Lorsque le navigateur tente d'obtenir les données multimédias, mais que les données ne sont pas disponibles
suspendre Lorsque le navigateur n'obtient pas délibérément les données multimédias
timeupdate Lorsque la position de lecture actuelle a changé
changement de volume Lorsque le le volume a changé
en attente

Lorsque la vidéo s'arrête car elle doit mettre en mémoire tampon l'image suivante


2. Utilisation dans le projet : lorsque la vidéo n'est pas chargée, la première image de la vidéo doit être affichée ici depuis l'arrière-plan. la balise vidéo originale Il existe une affiche d'attribut spécifiquement utilisée pour afficher la première image de la vidéo, qui est équivalente à l'image de couverture de la vidéo. L'attribut poster est utilisé pour définir ou renvoyer la valeur de l'attribut poster de la vidéo. Cet attribut décrit l'image qui s'affiche lors du chargement de la vidéo ou avant que l'utilisateur clique sur le bouton de lecture. Si cet attribut n'est pas inclus, la première image de la vidéo sera utilisée à la place.

<p class="newsInfo" v-for=" item in newsFragment">
<p class="text">{{item.fragment_text_describe}}</p>
<p v-if="item.fragmentFile" v-for="items in item.fragmentFile">
<img v-if="items.fragment_type==1" :src="items.fragment_url" alt="">
<video v-else :poster="items.fileCover" controls :src="items.fragment_url"></video>
</p>
</p>
Copier après la connexion

Lors de la lecture audio, le navigateur peut ne pas prendre en charge ce type d'audio, vous devez donc faire un jugement : utilisez la méthode canPlayType() pour vérifier si le navigateur peut lire le type audio/vidéo spécifié . La méthode canPlayType() peut renvoyer l'une des valeurs suivantes :
"probablement" - le navigateur est le plus susceptible de prendre en charge ce type audio/vidéo
"peut-être" - le navigateur peut prendre en charge ce type audio/vidéo

"" - (chaîne vide) Le navigateur ne prend pas en charge ce type audio/vidéo

Utilisation de la syntaxe :

audio.canPlayType("mp3"))
Copier après la connexion

Recommandations associées :

Compréhension approfondie de l'objet sessionStorage de HTML5

Explication vidéo détaillée du fonctionnement des balises vidéo HTML5

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!