HTML Video

在 HTML 中播放视频的方法有很多种。

Exemple

Essayer vous-même

问题，问题，以及解决方法

在 HTML 中播放视频并不容易！

您需要谙熟大量技巧，以确保您的视频文件在所有浏览器中（Internet Explorer, Chrome, Firefox, Safari, Opera）和所有硬件上（PC, Mac , iPad, iPhone）都能够播放。

在本章，CodeW3C.com 为您总结了问题和解决方法。

使用 标签

标签的作用是在 HTML 页面中嵌入多媒体元素。

下面的 HTML 代码显示嵌入网页的 Flash 视频：

Exemple

Essayer vous-même

问题

  • HTML4 无法识别 标签。您的页面无法通过验证。
  • 如果浏览器不支持 Flash，那么视频将无法播放
  • iPad 和 iPhone 不能显示 Flash 视频。
  • 如果您将视频转换为其他格式，那么它仍然不能在所有浏览器中播放。

使用 标签

标签的作用是在 HTML 页面中嵌入多媒体元素。

下面的 HTML 片段显示嵌入网页的一段 Flash 视频：

Exemple




Essayer vous-même


问题


    

  • 如果浏览器不支持 Flash，将无法播放视频。
    • 

  • iPad 和 iPhone 不能显示 Flash 视频。
    • 

  • 如果您将视频转换为其他格式，那么它仍然不能在所有浏览器中播放。
    • 






Akaɗa <video> shafarce.


<video> ɗanɗa shafarce ɗin HTML 5.




以下 HTML 片段会显示一段嵌入网页的 ogg、mp4 或 webm 格式的视频：


Exemple






Essayer vous-même


问题


    

  • 您必须把视频转换为很多不同的格式。
    • 

    • 

    • 







最好的 HTML 解决方法


HTML 5 +  + 






Essayer vous-même


上例中使用了 4 中不同的视频格式。HTML 5 


问题


    

  • 您必须把视频转换为很多不同的格式
    • 

    • 

  •  元素无法通过 HTML 4 和 XHTML 验证。
    • 



注释：使用  (HTML5) 解决验证问题。





优酷解决方案


在 HTML 中显示视频的最简单的方法是使用优酷等视频网站。


如果您希望在网页中播放视频，那么您可以把视频上传到优酷等视频网站，然后在您的网页中插入 HTML 代码即可播放视频：


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



Essayer vous-même






Utilisation des liens


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 démarre une application d'assistance, comme Windows Media Player, pour lire ce fichier AVI :


Exemple


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



Essayer vous-même






Commentaire sur la vidéo en ligne


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 être conscient 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 meilleur conseil 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, l'ouverture de la page puis la lecture de la vidéo.






Balises multimédias HTML 4.01





Balise
Description




<applet>
Non recommandé.Définir l'applet intégré.




<embed>
Non recommandé.Définir l'objet intégré (autorisé dans HTML5).




<object>
Définir l'objet intégré.




<param>
Définir les paramètres de l'objet.









Balises multimédias HTML 5





Balise
Description




<video>
La balise définit des sons, comme de la musique ou d'autres flux audio.




<embed>
Les balises définissent le contenu intégré, comme les plugins.