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

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>

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"))

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!