HTML5 - explication détaillée des balises multimédia

Les premiers Internet étaient principalement utilisés pour partager des résultats académiques, mais pour les gens ordinaires, ils étaient plus disposés à partager du contenu plus intéressant, comme 视频, 音频, ces technologies étaient avant <a href="http://www.php.cn/wiki/1118.html" target="_blank">html5</a> Aucun d'entre eux n'est fourni par <a href="http://www.php.cn/code/5011.html" target="_blank">html标签</a>

Développement de solutions audio et vidéo Web

Bien que les premiers html ne fournissaient pas de balises pour prendre en charge la vidéo ou lecture audio, cela n'affecte pas le désir des gens de partager

• Méthode de support 1 :

• Utilisez embed Insérez directement la vidéo dans la page, puis vous pouvez utiliser Windows Media Player, Apple QuickTime ou un véritable lecteur vidéo pour créer une fenêtre de lecture

• , mais cela la méthode n'est pas adaptée à la vidéo elle-même Contrôle, les problèmes de compatibilité ne peuvent pas être pris en compte

• Méthode de support 2

• Utilisez un plug-in de navigateur, l'un est celui de Microsoft Silverlight, et le plus couramment utilisé Adobe Flash

• Flash ne résout pas seulement complètement la prise en charge du navigateur problème, mais a également un taux d'installation incroyablement élevé Wow (en gros, Flash Player est installé sur 99% des ordinateurs)

• En plus d'apprendre la technologie elle-même lors de l'utilisation de Flash pour lire des vidéos, le plus important est de Flash, iPhone ne supporte pas cette technologie ipad

• Si vous voulez voir comment la vidéo est lue, déplacez la souris sur la fenêtre vidéo, à droite -cliquez si vous pouvez voir

  , etc. du texte, alors le site utilise le plug-in Flash Flash

• Multimédia Tags :

• Afin de résoudre divers problèmes d'utilisation de Html5, la balise multimédia Flash

• En raison de problèmes de format vidéo, différents navigateurs prennent en charge différemment les vidéos du même format, il faut préparer plusieurs copies de la vidéo

• , ce qui ne peut pas fournir une bonne protection pour la vidéo lue, car le l'utilisateur peut directement enregistrer le fichier vidéo sous

• Résumé :

• Bien que les balises multimédia en

  présentent divers inconvénients, nous devons encore adopter cette nouvelle La technologie, en raison de son utilisation, est vraiment simplehtml5

balise audio

dans

w3c pour La description est comme cette balise audio audio

• Exemple de code 1 :

• La démonstration suivante est l'une des façons les plus simples de l'utiliser

• src : adresse audio

• contrôles : lecture audio

  contrôleur

• lecture automatique:Lecture automatique

• boucle :

  Boucle

• affiche : Spécifiez la couverture à afficher lorsque la vidéo n'est pas en cours de lecture

<audio src="song.ogg" controls="controls" autoplay loop>
</audio>

• Exemple de code 2 :

• src : adresse audio

• Étant donné que les formats audio sont pris en charge différemment dans différents navigateurs, compte tenu des problèmes de compatibilité, nous devons utiliser le code suivant

• source : Spécifiez plusieurs audios. Si l'on en trouve un qui est pris en charge par le navigateur actuel, il sera utilisé directement. . Si tous les

  formats de balises ne sont pas pris en charge, le dernier sera affiché Contenu textesource

<audio controls="controls">
  <source src="song.ogg" type="audio/ogg">
  <source src="song.mp3" type="audio/mpeg">
你的浏览器不支持此种格式
</audio>

Balise vidéo

. La balise

est utilisée pour lire des vidéos et son utilisation est très similaire à la balise Videoaudio

• Exemple de code 1 :

• src : adresse vidéo

• contrôles : contrôleur

• lecture automatique : lecture automatique

• boucle : boucle

• largeur : largeur

• hauteur : hauteur

<video src="movie.ogg" controls autoplay loop width = "200px" height = "200px">
</video>

• Exemple de code 2 :

• src :Adresse vidéo

• Étant donné que la prise en charge vidéo est différente selon les navigateurs, compte tenu des problèmes de compatibilité, nous devons utiliser le code suivant

• source:指定多个视频,如果找到了当前浏览器支持的,那么会直接使用,如果所有的source标签格式都不支持,会显示最后的文本内容

<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
你的浏览器不支持video标签
</video>

两种进度条

在html5之前如果我们想要使用进度条,可以通过一些前端框架,或者自己使用控件搭建出类似的外观,但是在html5中推出了两个进度条控件,接下来就让我们来看看如何使用它们

process

• 外观

• 如果只是定义该元素<progress><progress/>不设置任何内容,显示效果如下图

progress.gif

• 作用:

• 用来显示任务的进度(进程)

• 如果想要用来显示度量值(比如容量使用情况)请使用meter标签

• 属性:

• max: 总工作量

• value: 已完成工作量

• 兼容性:

• 为了保证显示效果,可以再progress标签中写入内容,在当前浏览器无法显示该控件时,会转而显示内容

meter

• 外观:

• 通过属性值的搭配能够显示出多重不同的变化

• 常见属性:

• high:规定较高的值

• low:规定较低的值

• max:规定最大值(可以超过,但是进度条已经满了)

• min:规定最小值

• value:规定度量的值

• 示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<meter class="class1" high="80" low="30" max="100" min="10" value="21" ></meter>
<br/>
<meter class="class2" high="80" low="30" max="100" min="10" value="60"></meter>
<br/>
<meter class="class3" high="80" low="30" max="100" min="10" value="90" ></meter>
<br/>
<meter class="class4" high="80" low="30" max="100" min="10" value="100" optimum="10" ></meter>
<br/>
</body>
</html>

• 显示效果即截图

meter.png

总结

两种进度条都能够用来显示进度,由于兼容性以及语义性的问题,在实际开发中需要结合实际情况决定是否使用它们(或者是使用对应的前端框架)。

【相关推荐】

1. 免费h5在线视频教程

2. HTML5 完整版手册

3. php.cn原创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!