简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

Vidéos HTML (Vidéos)

Vidéos HTML (Vidéos)

Jouer des 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 ) peut être joué.

Dans ce chapitre, le site Web PHP chinois (php.cn) résume les problèmes et les solutions pour vous.

Utiliser la balise <embed>

<embed> est utilisée pour intégrer des éléments multimédias dans les pages HTML.

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

Exemple

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<h2>播放视频</h2>
<embed src="Uploader.swf" width="200" height="200"><p>如果你无法看到该视频,那么可能你的电脑不支持该文件格式。</p>
</body>
</html>

Trouver une vidéo dans swf, Exécutez Essayez-le

Problème

  • HTML4 ne reconnaît pas le < intégrer la balise> 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.

Utiliser la balise <object>

<object> Intégrez des éléments multimédias.

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

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<h2>播放视频</h2>
<object height="200" width="200" data="Uploader.swf"></object>
</body>
</html>

Question :

  • Si vous naviguez, l'appareil ne prend pas en charge Flash et ne pourra 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.

Utilisation de l'élément HTML5 <video> La balise

HTML5 <video> video Ou une vidéo. L'élément

<video>

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

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<h2>播放视频</h2>
<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>

Trouvez quelques formats vidéo dans l'exemple ci-dessus et exécutez le programme pour l'essayer

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

Les exemples suivants utilisent 4 formats vidéo différents. 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>

HTML 5 + <object> + <embed>

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<h2>播放视频</h2>
<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>

Trouvez quelques formats vidéo dans l'exemple ci-dessus et exécutez le programme pour essayer

Problème :

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

Solution Youku

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éo tel que Youku, puis insérer du code HTML dans votre page Web pour lire la vidéo :

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

Instance

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<h2>播放视频</h2>
<embed src="http://player.youku.com/player.php/sid/XMzI2NTc4NTMy/v.swf" width="480" height="400" type="application/x-shockwave-flash"> </embed>
</body>
</html>

Essayez d'exécuter le programme

Utilisation d'hyperliens

Si une page Web contient des hyperliens vers des fichiers multimédias, la plupart des navigateurs utiliseront « Application d'aide " pour lire des 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 : 

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<h2>点击这个链接打开查看</h2>
<a href="Uploader.swf">播放视频文件</a>
</body>
</html>

Trouvez un fichier vidéo et essayez-le

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

Nouvelle balise HTML5.

     标签     描述
    <embed>定义内嵌对象。HTML4 中不赞成，HTML5 中允许。
    <object>定义内嵌对象。
    <param>定义对象的参数。
    <audio>定义了声音内容
    <video>定义一个视频或者影片
    <source>定义了media元素的多媒体资源(<video> 和 <audio>)


    <track>

规定media元素的字幕文件或其他包含文本的文件 (<video> 和<audio>)



Formation continue
||
<!DOCTYPE html> <html> <head>  <meta charset="UTF-8"> <title>php中文网(php.cn)</title>  </head> <body> <h2>播放视频</h2> <embed src="http://player.youku.com/player.php/sid/XMzI2NTc4NTMy/v.swf" width="480" height="400" type="application/x-shockwave-flash"> </embed> </body> </html>
soumettreRéinitialiser le code
Section précédente Aucun
Liste des didacticiels
obtenir de l'aide
  • Recommandations de cours
  • Téléchargement du didacticiel
Le didacticiel n'est pas disponible au téléchargement pour le moment. Le staff est actuellement en train de l'organiser. Veuillez prêter plus d'attention à ce cours à l'avenir ~

Les étudiants qui ont regardé ce cours apprennent également

Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)  492166 joue
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！