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() | 暂停当前播放的音频/视频 |
É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!