Vidéos HTML (Vidéos)


Il existe de nombreuses façons de lire des vidéos en HTML.

Lecture de vidéos HTML (vidéos)

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<video width="320" height="240" controls autoplay>
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  <object data="movie.mp4" width="320" height="240">
    <embed width="320" height="240" src="movie.swf">
  </object>
</video>

</body>
</html>

Instance en cours d'exécution»

Cliquez sur le bouton « Exécuter l'exemple » pour voir l'exemple en ligne


Problèmes et solutions

La lecture de vidéos en HTML n'est pas facile !

Vous devez connaître de nombreuses astuces pour vous assurer que vos fichiers vidéo fonctionnent dans tous les navigateurs (Internet Explorer, Chrome, Firefox, Safari, Opera) et sur tous les matériels (PC, Mac, iPad, iPhone) Jouer .

Dans ce chapitre, W3CSchool résume pour vous les problèmes et les solutions.

Utilisez la balise <embed>

<embed> La balise permet d'intégrer des éléments multimédias dans des pages HTML.

Le code HTML suivant affiche une vidéo Flash intégrée dans une page Web :

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<h2>Playing the Object</h2>

<embed src="intro.swf" width="200" height="200"><p>如果你无法看到该视频,那么可能你的电脑不支持该文件格式。</p>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne

Problème

  • HTML4 ne reconnaît pas le <intégrer> Votre page ne peut pas passer la vérification.

  • Si le navigateur ne prend pas en charge Flash, la vidéo ne sera pas lue.

  • L'iPad et l'iPhone ne peuvent pas afficher les vidéos Flash.

  • Si vous convertissez la vidéo dans un autre format, elle ne sera toujours pas lue dans tous les navigateurs.

Utilisez la balise <object>

<object>

L'extrait HTML suivant montre une vidéo Flash intégrée dans une page Web :

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<object height="200" width="200" data="intro.swf"></object>

</body>
</html>

Instance en cours d'exécution»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Problème :

  • Si le navigateur le fait ne prend pas en charge Flash, cela ne fonctionnera pas. Lire la vidéo.

  • L'iPad et l'iPhone ne peuvent pas afficher les vidéos Flash.

  • Si vous convertissez la vidéo dans un autre format, elle ne sera toujours pas lue dans tous les navigateurs.

Utilisez l'élément HTML5 <video> La balise

HTML5 <video> ;video> ; est pris en charge dans tous les navigateurs modernes.

L'extrait HTML suivant affiche une vidéo au format ogg, mp4 ou webm intégrée dans une page Web :

Exemple

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<video width="320" height="240" controls autoplay>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.webm" type="video/webm">
  您的浏览器不支持视频。
</video>

</body>
</html>

Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Problème :

  • Vous devez convertir des vidéos dans de nombreux formats différents. L'élément

  • <video> n'est pas valide dans les anciens navigateurs.

La meilleure solution HTML

4 formats vidéo différents sont utilisés dans les exemples suivants. L'élément HTML 5 <video> tente de lire une vidéo dans l'un des formats mp4, ogg ou webm. Si les deux échouent, revenez à l'élément <embed>

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<video width="320" height="240" controls autoplay>
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  <object data="movie.mp4" width="320" height="240">
    <embed width="320" height="240" src="movie.swf">
  </object>
</video>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Problème :

  • Vous devez convertir la vidéo dans de nombreux formats différents

Solution par Youku Solution

Le moyen le plus simple d'afficher des vidéos en HTML est d'utiliser un site Web de vidéos tel que Youku.

Si vous souhaitez lire une vidéo sur une page Web, vous pouvez télécharger la vidéo sur un site Web de vidéos tel que Youku, puis insérer le code HTML dans votre page Web pour lire la vidéo :

<embed src="http://player.youku.com/player.php/sid/XMzI2NTc4NTMy/v.swf" largeur="480" hauteur="400" type="application/x-shockwave-flash"> </embed>

Utilisation d'hyperliens

Si une page Web contient des hyperliens vers des fichiers multimédias, la plupart des navigateurs utiliseront une « application d'assistance » pour lire les fichiers.

L'extrait de code suivant affiche un lien vers un fichier AVI. Si l'utilisateur clique sur le lien, le navigateur lancera une « application d'assistance » telle que Windows Media Player pour lire le fichier AVI :

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<h2>点击这个链接打开查看</h2>

<a href="intro.swf">播放视频文件</a> 

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne


Remarque sur les vidéos en ligne

Lorsqu'une vidéo est incluse dans une page Web, elle est appelée vidéo en ligne.

Si vous envisagez d'utiliser la vidéo en ligne dans une application Web, vous devez être conscient que de nombreuses personnes trouvent la vidéo en ligne ennuyeuse.

Veuillez également noter que les utilisateurs peuvent avoir désactivé l'option vidéo en ligne dans leur navigateur.

Notre meilleur conseil est d'inclure uniquement les vidéos en ligne là où les utilisateurs s'attendent à les voir. Un exemple positif est lorsqu'un utilisateur a besoin de voir une vidéo et clique sur un lien, qui ouvre la page puis lit la vidéo.

Balise multimédia HTML

Nouveau : Nouvelle balise HTML5.

< td>Ressources multimédias qui définissent les éléments multimédias (<vidéo> et <audio>)
BaliseDescription
<embed>Définir les objets incorporés. Obsolète en HTML4, autorisé en HTML5.
<object>Définir les objets incorporés.
<param>Définir les paramètres de l'objet.
<audio>
标签描述
<embed>定义内嵌对象。HTML4 中不赞成，HTML5 中允许。
<object>定义内嵌对象。
<param>定义对象的参数。
<audio>定义了声音内容
<video>定义一个视频或者影片
<source>定义了media元素的多媒体资源(<video> 和 <audio>)
<track>规定media元素的字幕文件或其他包含文本的文件 (<video> 和<audio>)
Définit le contenu sonore
<video>Définir une vidéo ou un film
<source><🎜>
<track><🎜> Spécifie les fichiers de sous-titres ou d'autres fichiers contenant du texte pour les éléments multimédias (<video> et <audio>)
<🎜>
←