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>

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>

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

nouveau fichier

<!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>

soumettre Réinitialiser le code

Opération automatique

Vidéos HTML (Vidéos)

ÉlémentaireTutoriel de site Web d'imitation d'entreprise Imperial CMS

ÉlémentaireLes débutants sans aucune base dans WordPress créent des blogs personnels et des sites Web d'entreprise

ÉlémentaireVidéo d'instructions sur la création de sites Web à base zéro Ultimate CMS

ÉlémentaireProjet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]

IntermédiaireVue3.0 de 0 pour créer une pratique de projet de système de gestion backend universel

ÉlémentaireCours frontal base zéro [Vue apprentissage avancé et application pratique]

ÉlémentaireTutoriel WEB front-end [HTML5+CSS3+JS]

ÉlémentaireIntroduction rapide à apipost

IntermédiaireTutoriel pratique Vue3+TypeScript au niveau de l'entreprise

ÉlémentaireParlons brièvement de la création d'une entreprise en PHP

IntermédiaireProjet de commerce électronique VUE (combat réel de projet double front-end et back-end)

ÉlémentaireApplication pratique Apipost [api, interface, tests automatisés, mock]