Explication détaillée des nouvelles balises multimédia en HTML5-Tutoriel H5-php.cn

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

藏色散人

Libérer： 2022-08-05 16:10:50

avant

3350 Les gens l'ont consulté

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 <video><video>

当前<video>元素支持三种视频格式：尽量使用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>

Copier après la connexion

视频<video>——常见属性

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

二：音频<audio>

L'élément <video> 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>

Copier après la connexion

video<video> - 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

Google Chrome désactive la lecture automatique audio et vidéo
Propriétés
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!