English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Il y a de nombreuses méthodes pour lire des vidéos en HTML.
!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Base Tutorial(oldtoolbag.com)</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>Testez pour voir ‹/›
Il n'est pas facile de lire une vidéo en HTML !
Vous devez maîtriser de nombreuses techniques pour vous assurer que vos fichiers vidéo puissent être lus sur tous les navigateurs (Internet Explorer, Chrome, Firefox, Safari, Opera) et sur tous les appareils (PC, Mac, iPad, iPhone).
Dans ce chapitre, le tutoriel de base résume les problèmes et les solutions.
Le tag <embed> a pour fonction d'intégrer des éléments multimédias dans une page HTML.
Le code HTML suivant affiche une vidéo Flash intégrée dans une page web :
Problème
HTML4 Impossible de reconnaître la balise <embed>. Votre page ne peut pas être validée.
Si le navigateur ne prend pas en charge Flash, la vidéo ne peut pas être jouée
iPad et iPhone ne peuvent pas afficher les vidéos Flash.
Si vous convertissez la vidéo en d'autres formats, elle ne peut toujours pas être jouée dans tous les navigateurs.
La balise <object> a pour fonction d'intégrer des éléments multimédias dans une page HTML.
Le fragment HTML suivant montre une vidéo Flash intégrée au site Web :
Problème :
Si le navigateur ne prend pas en charge Flash, la vidéo ne peut pas être jouée.
iPad et iPhone ne peuvent pas afficher les vidéos Flash.
Si vous convertissez la vidéo en d'autres formats, elle ne peut toujours pas être jouée dans tous les navigateurs.
HTML5 La balise <video> définit un vidéo ou un film.
l'élément <video> est pris en charge dans tous les navigateurs modernes.
Le fragment HTML suivant affiche une vidéo intégrée au site Web ogg, mp4 ou des vidéos au format webm :
!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Base Tutorial(oldtoolbag.com)</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"> Votre navigateur ne prend pas en charge l'attribut video. </video> </body> </html>Testez pour voir ‹/›
Problème :
Vous devez convertir la vidéo en de nombreux formats différents
l'élément <video> est inefficace dans les navigateurs anciens.
dans l'exemple suivant a utilisé 4 différents. HTML 5 l'élément <video> essaie de jouer avec des formats vidéo mp4l'un des formats ogg ou webm pour lire la vidéo. Si tous échouent, revenez à l'élément <embed>.
!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Base Tutorial(oldtoolbag.com)</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>Testez pour voir ‹/›
Problème :
Vous devez convertir la vidéo en de nombreux formats différents
Le moyen le plus simple de montrer une vidéo en HTML est d'utiliser des sites Web de vidéo tels que Youku.
Si vous souhaitez diffuser une vidéo sur une page Web, vous pouvez télécharger la vidéo sur des sites Web de vidéo tels que Youku et insérer le code HTML sur votre page Web pour diffuser la vidéo.
Vous pouvez trouver le code HTML intégré à l'entrée de partage sur les sites Web de vidéo tels que Youku.
<embed src=#39;https://player.youku.com/player.php/sid/XNDQ0MTI1NzE1Mg==/v.swf#39; allowFullScreen=#39;true#39; quality=#39;high#39; width=#39;480#39; height=#39;400#39; align=#39;middle#39; allowScriptAccess=#39;always#39; type=#39;application/x-shockwave-flash#39;></embed>Testez pour voir ‹/›
Si une page Web contient des liens vers des fichiers multimédias, la plupart des navigateurs utiliseront une "application d'assistance" pour lire les fichiers.
Le code suivant montre un lien vers un fichier AVI. Si l'utilisateur clique sur ce lien, le navigateur lancera un "application d'assistance", comme Windows Media Player, pour lire ce fichier AVI :
Lorsque une vidéo est incluse dans une page Web, elle est appelée vidéo en ligne.
Si vous envisagez d'utiliser des vidéos en ligne dans une application Web, vous devez vous rendre compte que beaucoup de gens trouvent les vidéos en ligne irritantes.
En même temps, veuillez noter que l'utilisateur peut déjà avoir fermé l'option de vidéo en ligne dans le navigateur.
Notre meilleure recommandation est de ne les inclure que lorsque l'utilisateur souhaite voir une vidéo en ligne. Un exemple positif est lorsque l'utilisateur doit voir une vidéo et cliquer sur un lien, le site Web s'ouvrira et la vidéo sera jouée.
| Balise | Description |
| <embed> | Définit un objet intégré. HTML4 N'est pas recommandé, HTML5 Est autorisé. |
| <object> | Définit un objet intégré. |
| <param> | Définit les paramètres de l'objet. |
| <audio>HTML5 | Définit le contenu sonore |
| <video>HTML5 | Définit une vidéo ou un film |
| <source>HTML5 | Définit les ressources multimédias de l'élément media (<video> et <audio>) |
| <track>HTML5 | Fichier de sous-titres ou autre fichier contenant du texte pour l'élément media spécifié (<video> et <audio>) |