Maison interface Web Tutoriel H5 Exemple de code pour l'utilisation de la balise vidéo h5

Exemple de code pour l'utilisation de la balise vidéo h5

May 15, 2018 am 10:30 AM
h5 video 标签

La vidéo HTML convient à HTML 5+ et est utilisée pour définir des vidéo médias en streaming pour la visualisation en ligne. Voici une brève introduction pour la commodité des amis qui en ont besoin

HTML.

<video 
width
="320" 
height
="240" src="www.php.cn/movie.ogg" controls="controls">
Copier après la connexion

Voici le texte du commentaire. Si le navigateur ne prend pas en charge HTML 5, le texte ici sera affiché. Si elle est prise en charge, la vidéo sera affichée directement et le texte sera ignoré.

Dans HTML 4 et versions antérieures, si vous souhaitez intégrer une vidéo pour une visualisation en ligne dans une page Web, vous devez généralement utiliser le streaming vidéo Flash, en utilisant < ;object> et la balise , vous pouvez lire des fichiers vidéo au format swf, flv et autres via le navigateur, mais le principe est que le navigateur doit installer un plug-in tiers : Adobe Flash Player. Les smartphones et iPads modernes ne prennent généralement pas en charge Flash et ne peuvent donc pas parcourir les vidéos sur le Web. HTML 5 a changé ce fait. Les développeurs Web n'ont besoin que d'utiliser la balise

AttributsValeurDescription
lecture automatiquelecture automatiqueSi cet attribut est présent, la vidéo sera lue dès qu'elle sera prête.
contrôlescontrôlesSi cet attribut apparaît, les contrôles sont affichés à l'utilisateur, comme la lecture bouton.
hauteurValeur du pixel Définit la hauteur du lecteur vidéo.
looploopSi cet attribut apparaît, la lecture recommencera une fois la lecture du fichier multimédia terminée.
preloadauto/meta/noneSpécifie s'il faut précharger la vidéo, valeurs possibles :
auto - charger lorsque la page est chargé Charger la vidéo entière
méta - ne charger les métadonnées
que lorsque la page se chargenone - 当页面加载后不载入视频
* src视频地址要播放的视频的 URL,建议使用绝对地址。
width像素值设置视频播放器的宽度。


如何写兼容的视频标签?

由于旧的浏览器和Internet Explorer不支持

<video width="320" height="240" controls> 
<!-- 兼容 Firefox --> 
<source src="http://www.jb51.net/ movie.ogg" type="video/ogg" /> 
<!-- 兼容 Safari/Chrome--> 
<source src="http://www.jb51.net/ movie.mp4" type="video/mp4" /> 
<!-- 如果浏览器不支持video标签,则使用flash --> 
<embed src="http://www.jb51.net/ movie.swf" type="application/x-shockwave-flash" 
width="320" height="240" allowscriptaccess="always" allowfullscreen="true"></embed> 
</video>
Copier après la connexion

【相关推荐】

1. 免费h5在线视频教程

2. HTML5 完整版手册

3. php.cn原创html5视频教程

4. H5 video标签只能放声音不能放视频的解决办法

5. IIS的MIME未注册MP4类型,导致无法识别vidoe标签的解决办法

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

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.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Comment réparer l'audio si vous n'entendez personne
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Comment déverrouiller tout dans Myrise
1 Il y a quelques mois 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)

Comment réparer l'erreur fatale VIDEO DXGKRNL dans Windows 11 Comment réparer l'erreur fatale VIDEO DXGKRNL dans Windows 11 Apr 13, 2023 pm 08:22 PM

Cliquez pour entrer : Collection de navigation du plug-in de l'outil ChatGPT Certains utilisateurs se sont plaints que leurs ordinateurs tombaient fréquemment en panne avec le code d'arrêt VIDEO DXGKRNL FATAL ERROR. Ce problème particulier ne se produit qu'occasionnellement et a une valeur de contrôle de bogue de 0x00000113, ce qui indique une violation dans le sous-système du noyau graphique Microsoft DirectX, comme l'indique la valeur de contrôle de bogue. Habituellement, l'erreur se produit lorsqu'un pilote corrompu interfère avec le fonctionnement normal du processeur graphique de la carte graphique. Si vous rencontrez actuellement ce problème spécifique, notre article vous fournira une variété de conseils de dépannage de haute qualité. Vous trouverez ci-dessous diverses méthodes que d'autres utilisateurs ayant rencontré exactement la même erreur ont utilisées avec succès. Oui

Comment rechercher du texte dans tous les onglets de Chrome et Edge Comment rechercher du texte dans tous les onglets de Chrome et Edge Feb 19, 2024 am 11:30 AM

Ce didacticiel vous montre comment rechercher du texte ou des phrases spécifiques sur tous les onglets ouverts dans Chrome ou Edge sous Windows. Existe-t-il un moyen d'effectuer une recherche de texte sur tous les onglets ouverts dans Chrome ? Oui, vous pouvez utiliser une extension Web externe gratuite dans Chrome pour effectuer des recherches de texte sur tous les onglets ouverts sans avoir à changer d'onglet manuellement. Certaines extensions comme TabSearch et Ctrl-FPlus peuvent vous aider à y parvenir facilement. Comment rechercher du texte dans tous les onglets de Google Chrome ? Ctrl-FPlus est une extension gratuite qui permet aux utilisateurs de rechercher facilement un mot, une expression ou un texte spécifique dans tous les onglets de la fenêtre de leur navigateur. Cette extension

Que signifie h5 ? Que signifie h5 ? Aug 02, 2023 pm 01:52 PM

H5 fait référence à HTML5, la dernière version de HTML. H5 est un langage de balisage puissant qui offre aux développeurs plus de choix et d'espace créatif. Son émergence favorise le développement de la technologie Web et rend l'interaction et l'effet des pages Web plus excellents. mûrit progressivement et devient populaire, je pense qu'il jouera un rôle de plus en plus important dans le monde d'Internet.

Le Motorola Razr 50 Ultra apparaît dans une vidéo teaser divulguée avec un boîtier étanche et un énorme écran secondaire Le Motorola Razr 50 Ultra apparaît dans une vidéo teaser divulguée avec un boîtier étanche et un énorme écran secondaire Jun 20, 2024 pm 09:31 PM

Au cours des dernières semaines, les spécifications les plus importantes et les prix en euros du Motorola Razr 50 et du Razr 50 Ultra ont été divulgués. Maintenant, le leaker extrêmement fiable @MysteryLupin a pu publier la vidéo teaser intégrée ci-dessous, qui

Comment ajouter des tags sur Douyin pour attirer du trafic ? Quelles balises de la plateforme sont les plus faciles à attirer du trafic ? Comment ajouter des tags sur Douyin pour attirer du trafic ? Quelles balises de la plateforme sont les plus faciles à attirer du trafic ? Mar 22, 2024 am 10:28 AM

En tant que plateforme sociale de courtes vidéos populaire, Douyin dispose d’une énorme base d’utilisateurs. Pour les créateurs Douyin, utiliser des balises pour attirer du trafic est un moyen efficace d'augmenter l'exposition du contenu et d'attirer l'attention. Alors, comment Douyin utilise-t-il les balises pour attirer du trafic ? Cet article répondra à cette question en détail pour vous et présentera les techniques associées. 1. Comment ajouter des tags sur Douyin pour attirer du trafic ? Lorsque vous publiez une vidéo, assurez-vous de choisir des balises pertinentes par rapport au contenu. Ces balises doivent couvrir le sujet et les mots-clés de votre vidéo pour permettre aux utilisateurs de trouver plus facilement votre vidéo grâce aux balises. Tirer parti des hashtags populaires est un moyen efficace d’augmenter la visibilité de votre vidéo. Recherchez les balises et les tendances populaires actuelles et intégrez-les dans vos descriptions et balises vidéo. Ces balises populaires ont généralement une plus grande visibilité et peuvent attirer l’attention d’un plus grand nombre de téléspectateurs. 3. Étiquette

Quelle est l'horloge derrière le label TikTok ? Comment taguer le compte Douyin ? Quelle est l'horloge derrière le label TikTok ? Comment taguer le compte Douyin ? Mar 24, 2024 pm 03:46 PM

Lorsque nous parcourons les œuvres de Douyin, nous voyons souvent une icône d'horloge derrière la balise. Alors, quelle est exactement cette horloge ? Cet article se concentrera sur la discussion sur « Quelle est l'horloge derrière le label Douyin », dans l'espoir de fournir une référence utile pour votre utilisation de Douyin. 1. Quelle est l'horloge derrière le label Douyin ? Douyin lancera des défis thématiques d'actualité. Lorsque les utilisateurs participeront, ils verront une icône d'horloge après la balise, ce qui signifie que l'œuvre participe au défi thématique et affichera le temps restant du défi. Pour certains contenus urgents, tels que les vacances, les événements spéciaux, etc., Douyin apposera une icône d'horloge après l'étiquette pour rappeler aux utilisateurs la période de validité du contenu. 3. Balises populaires : lorsqu'une balise devient populaire, Douyin ajoutera une icône d'horloge derrière la balise pour indiquer que la balise est

Comment distinguer H5, WEB front-end, big front-end et WEB full stack ? Comment distinguer H5, WEB front-end, big front-end et WEB full stack ? Aug 03, 2022 pm 04:00 PM

Cet article vous aidera à distinguer rapidement entre H5, WEB front-end, grand front-end et WEB full stack. J'espère qu'il sera utile aux amis dans le besoin !

Performances du processeur Snapdragon X Elite presque identiques sur batterie et branché dans les benchmarks Vivobook S15 Performances du processeur Snapdragon X Elite presque identiques sur batterie et branché dans les benchmarks Vivobook S15 Jun 20, 2024 pm 03:59 PM

Malgré le battage médiatique autour du Qualcomm Snapdragon X Elite, le lancement a été plutôt médiocre. Dans notre examen, nous avons constaté que la partie la plus impressionnante du nouvel Asus Vivobook S 15 équipé de Qualcomm Snapdragon X Elite X1E-78-100 était la fluidité.

See all articles