Html5 视频播放之video标签的使用(包含注意事项，例如视频无法正常展示，只显示音频等问题)

一、html 5 之前播放视频

在html 5之前，嵌入网页中的flash视频可以使用以下标签

<embed src="movie.swf" height="200" width="200"/>

但是，

1)如果浏览器不支持flash，将无法播放视频。

2)iPad 和 iPhone 不能显示 Flash 视频。

3)如果您将视频(*.swf)转换为其他格式，那么它仍然不能在所有浏览器中播放

所以视频是否可以播放，取决于浏览器本身和视频本身。【部分参考自w3school官网文档】

 

二、html 5 之后播放视频

1、视频标签

html5之后，<embed> 标签仍然可以利用flash来播放视频，

但是html 5 提供了一个新的标签来播放视频，那就是 <video>

 

2、<video>标签使用规范

我们看下<video> 标签使用时的相关标准：

当前，video 元素支持三种视频格式：

格式	IE	Firefox	Opera	Chrome	Safari
Ogg	No	3.5+	10.5+	5.0+	No
MPEG 4	9.0+	No	No	5.0+	3.0+
WebM	No	4.0+	10.6+	6.0+	No

Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件

WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

 

 

3、<video>标签的使用方式

<video> 标签的使用方法如下：

方式1：

<video controls="controls" 
	width="500" height="400"  src="video/video-h264.mp4"></video>

方式2：

<video controls="controls" >
  <source src="video/movie.mp4" type="video/mp4" />
</video>

方式3：

<video controls="controls" >
  <source src="video/movie.mp4" type="video/mp4" />
  <source src="video/movie.ogg" type="video/ogg" />
</video>

其中，方式3指的是，在<video>的多个<source>标签中，浏览器从上到下匹配各种格式的视频文件。

如果匹配到第一个source时，浏览器正好支持这种格式的视频文件，就直接播放第一个视频文件就可以。

如果浏览器匹配到最后一个source时，也没有匹配到支持的视频格式，就无法正常播放视频。

 

4、<video>视频使用时比较 "坑" 的地方

其中，有一种情况是，我们发现视频标签在浏览器页面时，它只会显示音频，但是却无法播放视频，这种情况下可能就是因为浏览器不支持该种视频格式。

 

注意：MP4格式视频的编码方式有3种，mpg4(xdiv),mpg4(xvid)，avc(h264)，

          但是 html 5 的 <video> 标签只支持 avc(h264) 格式的视频编码方式。

          所以，如果视频的编码方式不是h264格式，将来在浏览器页面也是正常展示视频的。

          因此，不仅是MP4，ogg等格式的视频仍然需要我们注意视频的编码

 

推荐一个视频转码工具：格式工厂

该工具可以帮助我们快速将视频按照既定的编码进行转码。

 

据悉，flash将在2020年停止更新！https://www.blog.google/products/chrome/saying-goodbye-flash-chrome/

 

 

此文希望可以帮助到大家。如有错误，请指教。                                                           

如果大家还有其他的情况或者好的解决方法，也望指教，感谢阅读。