Maison > interface Web > Tutoriel H5 > le corps du texte

[Tutoriel HTML5] -Vidéo HTML 5

黄舟
Libérer: 2017-02-07 13:32:56
original
1498 Les gens l'ont consulté

De nombreux sites internet tendances proposent des vidéos. HTML5 fournit une norme pour l'affichage de vidéos. Normes vidéo.


Aujourd'hui, la plupart des vidéos sont affichées via des plug-ins tels que Flash. Cependant, tous les navigateurs ne disposent pas des mêmes plugins.

HTML5 spécifie une manière standard d'inclure une vidéo via l'élément vidéo.


Format vidéo

Actuellement, l'élément vidéo prend en charge trois formats vidéo :

[Tutoriel HTML5] -Vidéo HTML 5

Ogg = fichier Ogg avec encodage vidéo Theora et encodage audio Vorbis

MPEG4 = avec encodage vidéo H.264 et encodage audio AAC Fichier MPEG 4

WebM = Fichier WebM avec encodage vidéo VP8 et encodage audio Vorbis


Comment ça marche

Pour afficher une vidéo en HTML5, il vous suffit de :

<video src="movie.ogg" controls="controls">
</video>
Copier après la connexion

l'attribut de contrôle est utilisé pour ajouter des commandes de lecture, de pause et de volume.

Inclure les attributs de largeur et de hauteur est également une bonne idée.

Le contenu inséré entre eux est destiné aux navigateurs qui ne prennent pas en charge l'affichage de l'élément vidéo :

实例

<video src="movie.ogg" width="320" height="240" controls="controls">
Your browser does not support the video tag.
</video>
Copier après la connexion

上面的例子使用一个 Ogg 文件,适用于Firefox、Opera 以及 Chrome 浏览器。

要确保适用于 Safari 浏览器,视频文件必须是 MPEG4 类型。

video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式:

实例

<video width="320" height="240" controls="controls">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Copier après la connexion

Internet Explorer

Internet Explorer 8 不支持 video 元素。在 IE 9 中,将提供对使用 MPEG4 的 video 元素的支持。


[Tutoriel HTML5] -Vidéo HTML 5

以上就是[HTML5教程]-HTML 5 视频的内容,更多相关内容请关注PHP中文网(www.php.cn)!


Étiquettes associées:
source:php.cn
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal