Explication détaillée des exemples de lecture vidéo dans le partage HTML

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

Lecture de vidéos HTML (Vidéos)

Instances

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

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 d8e2720730be5ddc9c2a3782839e8eb6

d8e2720730be5ddc9c2a3782839e8eb6 La balise est utilisée pour intégrer l'élément Multimédia dans la page HTML.

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

Exemple

<embed src="intro.swf" height="200" width="200">

Problème

HTML4 ne reconnaît pas le e340f7120e2722aa55e29687d92eb1cd 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 d'autres formats, elle ne sera toujours pas lue dans tous les navigateurs.

Utilisez la balise 273238ce9338fbb04bee6997e5552b95

273238ce9338fbb04bee6997e5552b95 La balise est utilisée pour intégrer des éléments multimédia dans les pages HTML.

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

Exemple

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

Problème :

Si le navigateur ne prend pas en charge Flash, il 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.

Utilisez l'élément HTML5 39000f942b2545a5315c57fa3276f220 La balise

HTML5 39000f942b2545a5315c57fa3276f220 L'élément ; 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

Question :

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.webm" type="video/webm">
Your browser does not support the video tag.
</video>

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

39000f942b2545a5315c57fa3276f220 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 39000f942b2545a5315c57fa3276f220 tente de lire une vidéo dans l'un des formats mp4, ogg ou webm. Si les deux échouent, revenez à l'élément d8e2720730be5ddc9c2a3782839e8eb6

HTML 5 + 273238ce9338fbb04bee6997e5552b95 + d8e2720730be5ddc9c2a3782839e8eb6

Problème :

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

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 le code HTML dans votre page Web pour lire le vidéo :

Utiliser

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

Lien hypertexte

如果网页包含指向媒体文件的超链接，大多数浏览器会使用"辅助应用程序"来播放文件。

以下代码片段显示指向 AVI 文件的链接。如果用户点击该链接，浏览器会启动"辅助应用程序"，比如 Windows Media Player 来播放这个 AVI 文件：

实例

<a href="intro.swf">Play a video file</a>

关于内联视频的说明

当视频被包含在网页中时，它被称为内联视频。

如果您打算在 web 应用程序中使用内联视频，您需要意识到很多人都觉得内联视频令人恼火。

同时请注意，用户可能已经关闭了浏览器中的内联视频选项。

我们最好的建议是只在用户希望看到内联视频的地方包含它们。一个正面的例子是，在用户需要看到视频并点击某个链接时，会打开页面然后播放视频。

【相关推荐】

1. 特别推荐：“php程序员工具箱”V0.1版本下载

2. 免费html在线视频教程

3. php.cn原创html5视频教程

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!