Maison >interface Web >Tutoriel H5 >Explication détaillée des nouvelles balises multimédia en HTML5

Explication détaillée des nouvelles balises multimédia en HTML5

藏色散人
藏色散人avant
2022-08-05 16:10:503394parcourir

Cet article vous présentera les balises multimédia couramment utilisées en HTML et les nouvelles balises multimédia en HTML5. J'espère qu'il sera utile aux amis dans le besoin !

Nouvelles balises multimédia HTML5

1 : Vidéo 39000f942b2545a5315c57fa3276f22039000f942b2545a5315c57fa3276f220

当前39000f942b2545a5315c57fa3276f220元素支持三种视频格式:尽量使用MP4格式

浏览器 MP4 WebM Ogg
IE YES NO NO
Chrome YES YES YES
Firefox YES 从Firefox21版本开始Linux系统从Firefox 30开始 YES YES
Safari YES NO NO
Opera YES 从Opera25版本开始 YES YES
<video controls="controls" autoplay="autoplay" muted="muted" width="500px" height="400px" loop="loop" poster="images/tudou.jpg" preload="none">
    <source src="medio/mov_bbb.mp4">
    <source src="medio/mov_bbb.ogg">
    您的浏览器暂不支持<video>标签播放视频</video>

视频39000f942b2545a5315c57fa3276f220——常见属性

属性 描述
autoplay autoplay 视频就绪自动播放(谷歌浏览器需添加muted来解决自动播放问题)
controls controls 向用户显示播放控件
width pixels(像素) 设置播放器宽度
height pixels(像素) 播放器高度
loop loop 循环播放
src url 视频url地址
poster imageurl 加载等待的话面图片
muted muted 静音播放

二:音频b97864c2e0ef2353a16c4d64c7734e92

L'élément 39000f942b2545a5315c57fa3276f220 actuel prend en charge trois formats vidéo : essayez d'utiliser le format MP4NavigateurMP4WebMOggIEOUINONNONChromeOUI OUIOUIFirefox OUI démarre à partir de la version Firefox21 Système Linux à partir de Firefox 30OUIOUISafariOUINONNONOperaOUI à partir de la version Opera25 OUIOUI

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>HTML5音频标签</title></head><body>
   <audio controls="controls" autoplay="autoplay" muted="muted" loop="loop">
   <source src="medio/music.mp3" type="audio/mpeg">
   您的浏览器不支持audio元素</audio>
   </body>
   </html>

video39000f942b2545a5315c57fa3276f220 - attributs communspropertyautoplayVideo ready pour jouer automatiquement (Google Chrome doit être ajouté en sourdine à résoudre le problème de lecture automatique). pixels (pixels) hauteur du joueur ajouter des images de mots en attentemuet muet Lecture muetteDeux : Audio Internet Explorer 9+ OUISafari 5 +OUIOUI NONOpéra 10+OUIOUI

OUI

    rrreee
  • Google Chrome désactive la lecture automatique audio et vidéo
  • Propriétés
  • Valeur
  • Description

🎜lecture automatique🎜🎜lecture automatique🎜🎜Lecture automatique🎜🎜🎜🎜 contrôles🎜🎜contrôles🎜🎜Afficher les contrôles de lecture à l'utilisateur🎜🎜🎜🎜loop 🎜🎜loop🎜🎜Lecture en boucle🎜🎜🎜🎜 src🎜🎜url🎜🎜URL de la vidéo🎜🎜🎜🎜mut ed🎜🎜muted🎜🎜Jeu muet🎜 🎜🎜🎜🎜🎜Résumé des balises multimédia🎜🎜🎜🎜L'utilisation des balises audio et vidéo est fondamentalement la même🎜 🎜La prise en charge du navigateur varie 🎜🎜Google Chrome désactive la lecture automatique de l'audio et de la vidéo🎜🎜Nous pouvons ajouter l'attribut muet à balise vidéo pour couper la vidéo, mais l'audio ne peut pas (peut être résolu via JavaScript)🎜🎜La balise vidéo est le point clé, nous configurons souvent la lecture automatique, non applicable aux contrôles de contrôle, à la boucle et à la définition des attributs de taille🎜🎜🎜[Connexe recommandations : 🎜tutoriel vidéo CSS🎜]🎜

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!

Déclaration:
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer