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

Aug 05, 2022 pm 04:10 PM
Tags multimédias

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>

视频<video>——常见属性

属性描述
autoplayautoplay视频就绪自动播放(谷歌浏览器需添加muted来解决自动播放问题)
controlscontrols向用户显示播放控件
widthpixels(像素)设置播放器宽度
heightpixels(像素)播放器高度
looploop循环播放
srcurl视频url地址
posterimageurl加载等待的话面图片
mutedmuted静音播放

二:音频<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>
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

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

Outils d'IA chauds

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

Video Face Swap

Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Article chaud

Rimworld Odyssey Comment pêcher
4 Il y a quelques semaines By Jack chen
Puis-je avoir deux comptes Alipay?
4 Il y a quelques semaines By 下次还敢

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Sujets chauds

Tutoriel PHP
1505
276
Intégrer efficacement CSS et JavaScript avec la structure HTML5. Intégrer efficacement CSS et JavaScript avec la structure HTML5. Jul 12, 2025 am 03:01 AM

HTML5, CSS et JavaScript doivent être combinés efficacement avec des balises sémantiques, un ordre de chargement raisonnable et une conception de découplage. 1. Utilisez des étiquettes sémantiques HTML5, telles que l'amélioration de la clarté structurelle et de la maintenabilité, qui est propice au référencement et à l'accès sans barrière; 2. CSS doit être placé, utiliser des fichiers externes et se séparer par module pour éviter les styles en ligne et les problèmes de chargement retardés; 3. JavaScript est recommandé d'être introduit à l'avant et d'utiliser un repère ou une asynchronisation pour charger de manière asynchrone pour éviter le blocage du rendu; 4. Réduisez une forte dépendance entre les trois, conduisez le comportement à travers les attributs de données * et l'état de contrôle du nom de classe et améliorez l'efficacité de la collaboration grâce à des spécifications de nommage unifiées. Ces méthodes peuvent optimiser efficacement les performances des pages et collaborer avec les équipes.

Expliquant les éléments HTML5 `` vs ``. Expliquant les éléments HTML5 `` vs ``. Jul 12, 2025 am 03:09 AM

Il s'agit d'un élément au niveau du bloc, adapté à la mise en page; Il s'agit d'un élément en ligne, adapté à l'emballage du contenu texte. 1. Occuper exclusivement une ligne, une largeur, une hauteur et des marges peuvent être définies, qui sont souvent utilisées dans la disposition structurelle; 2. Aucune ligne ne se casse, la taille est déterminée par le contenu et convient aux styles de texte locaux ou aux opérations dynamiques; 3. Lors du choix, il doit être jugé en fonction de la question de savoir si le contenu a besoin d'espace indépendant; 4. Il ne peut pas être imbriqué et ne convient pas à la mise en page; 5. La priorité est donnée à l'utilisation des étiquettes sémantiques pour améliorer la clarté structurelle et l'accessibilité.

Techniques et considérations de streaming vidéo HTML5 Techniques et considérations de streaming vidéo HTML5 Jul 14, 2025 am 02:41 AM

Trois points à noter pour fabriquer des vidéos HTML5 en douceur la lecture: 1. Sélectionnez un format vidéo approprié, tel que MP4, WebM ou OGG, et fournir plusieurs formats ou un format unique en fonction du choix de l'utilisateur cible; 2. Utilisez une technologie de débit binaire adaptative telle que HLS ou DASH, combinée avec Hls.js ou Dash.js pour réaliser une commutation de clarté automatique; 3. Définir raisonnablement les stratégies de préchargement et les configurations de serveur, telles que les attributs de précharge, les demandes de plage d'octets, la compression et le cache, pour optimiser la vitesse de chargement et réduire la consommation de trafic.

Quels sont les nouveaux types d'entrée disponibles dans les formulaires HTML5? Quels sont les nouveaux types d'entrée disponibles dans les formulaires HTML5? Jul 12, 2025 am 03:07 AM

HTML5Introduit newinputTypesthatenHanceFormFonctionality andUserexperiendByImprovingValidation, UI, andmobilekeyboardlayouts.1.emailvalidateSemailAddressAndSupportsMultiplentries.2.urlchecksforvalidwebaddressandtriggersurl-optimizedkeyboard

Développement de jeux Web à l'aide de toile HTML5 et d'API de jeu Développement de jeux Web à l'aide de toile HTML5 et d'API de jeu Jul 14, 2025 am 03:08 AM

HTML5CANVAS est une API pour dessiner des graphiques et des animations sur les pages Web, combinées avec GameAPIS pour permettre des jeux Web riches en fonctionnalités. 1. Définir les éléments et obtenir le contexte 2D; 2. Utilisez JavaScript pour dessiner des objets et implémenter des boucles d'animation; 3. Traitez l'entrée de l'utilisateur pour contrôler le jeu; 4. Combinez des API telles que GamePad, WebAudio, Pointerlock et plein écran pour améliorer l'expérience interactive; 5. Optimiser les performances et gérer le chargement des ressources pour assurer un fonctionnement en douceur.

Comment accéder à l'emplacement actuel de l'utilisateur avec l'API de géolocalisation HTML5? Comment accéder à l'emplacement actuel de l'utilisateur avec l'API de géolocalisation HTML5? Jul 13, 2025 am 02:23 AM

Pour obtenir l'emplacement actuel de l'utilisateur, utilisez le HTML5 GeolocationAPI. Cette API fournit des informations telles que la latitude et la longitude après l'autorisation de l'utilisateur. La méthode principale est GetCurrentPosition (), qui nécessite une gestion réussie et d'erreur pour être gérée; Dans le même temps, faites attention à la condition préalable HTTPS, au mécanisme d'autorisation de l'utilisateur et au traitement du code d'erreur. ① Appelez GetCurrentPosition pour obtenir le poste une fois, et un rappel d'erreur sera déclenché en cas d'échec; ② L'utilisateur doit l'autoriser, sinon il ne peut pas être obtenu et peut ne plus être invité; ③ Le traitement des erreurs doit faire la distinction entre le rejet, le délai d'expiration, l'emplacement indisponible, etc.; ④ Activer la haute précision, le délai d'expiration, etc., et peut être configuré via le troisième paramètre; ⑤ L'environnement en ligne doit utiliser HTTPS, sinon il peut être limité par le navigateur.

Expliquez les attributs `Async` et« Defer »pour les scripts dans HTML5. Expliquez les attributs `Async` et« Defer »pour les scripts dans HTML5. Jul 13, 2025 am 03:06 AM

La différence entre asynchronisation et report est le synchronisation d'exécution du script. Async permet au téléchargement des scripts en parallèle et exécuté immédiatement après le téléchargement, sans garantir l'ordre d'exécution; Le Refer exécute les scripts dans l'ordre après la fin de l'analyse HTML. Les deux évitent de bloquer l'analyse HTML. L'utilisation de l'async convient aux scripts autonomes tels que l'analyse du code; Le report est adapté aux scénarios où vous devez accéder au DOM ou compter sur d'autres scripts.

Pourquoi mon image n'apparaît-elle pas dans HTML? Pourquoi mon image n'apparaît-elle pas dans HTML? Jul 28, 2025 am 02:08 AM

L'image non affichée est généralement causée par un mauvais chemin de fichier, un nom ou une extension de fichier incorrect, des problèmes de syntaxe HTML ou un cache de navigateur. 1. Assurez-vous que le chemin SRC est cohérent avec l'emplacement réel du fichier et utilisez le chemin relatif correct; 2. Vérifiez si le cas de fichier et l'extension correspondent exactement et vérifiez si l'image peut être chargée en entrant directement l'URL; 3. Vérifiez si la syntaxe TAG IMG est correcte, assurez-vous qu'il n'y a pas de caractères redondants et que la valeur d'attribut ALT est appropriée; 4. Essayez de forcer l'actualisation de la page, de nettoyer le cache ou d'utiliser le mode incognito pour éliminer les interférences du cache. Le dépannage dans cet ordre peut résoudre la plupart des problèmes d'affichage d'image HTML.

See all articles