详解HTML5的video标签的浏览器兼容性增强方案

使用HTML5时就应该考虑包括桌面以及移动端的浏览器兼容问题,特别是视频方面浏览器对解码的支持会有所不同,所以下面就来分享一个HTML5的video标签的浏览器兼容性增强方案分享,需要的朋友可以参考下

在过去 flash 是网页上最好的解决视频的方法，截至到目前还算是主流，像那些优酷之类的视频网站、虾米那样的在线音乐网站，仍然使用 flash 来提供播放服务。但是这种状况将会随着 HTML5 的发展而改变。就视频而言，HTML5 新增了 video 来实现在线播放视频的功能。

使用 HTML5 的 video 可以很方便的使用 JavaScript 对视频内容进行控制等等，功能十分强大，同时代码比较少加快加载速度。此外跨平台性比较好，特别是一些平板、手机等。例如苹果公司的产品不支持 flash 仅支持 HTML5 中的 video 功能。

但是 HTML5 的兼容性问题是个硬伤，我们可以在网页中使用 video 来播放视频，但使用早期浏览器的访问者可能无法正常观看这个视频。此外，由于视频编码器的历史渊源导致各种浏览器支持的视频格式不同。应对这些问题，想在网页中使用 HTML5 video 功能，可以按照下面三个步骤操作。

第一步：提前准备好多格式视频文件

由于编码器的版权问题，导致不同浏览器对视频格式的兼容性不同。目前没有一个视频格式兼容所有浏览器，唯一的解决方法就是把视频转换成多种格式。

首先要准备一个 mp4 格式的视频，可以在苹果设备中使用；其次要准备 ogv 格式的视频，用在火狐浏览器中；最后要准备一下 webm 格式的视频，这个可以用在谷歌浏览器等。webm 是谷歌提出的，开源、免费，很有可能成为兼容所有浏览器的视频格式。

准备多格式浏览器的麻烦之处在于转换格式。视频转换工具国内的功能比较少，转换格式可能没有上面后两个，而且质量良莠不齐，往往需要注册才能使用。推荐一个国外的工具 Online converter ，在线免费视频转换工具。甚至不用安装软件，直接选择相应的目标格式，然后上传视频，配置一下参数就可以转换出来了。没有合适工具的朋友，可以尝试一下。

第二步：编写对应 HTML5 video 代码

HTML5 中的 video 实际上就是一个简单的标签，包含了一些视频相关信息等。下面我直接给出具体代码，然后简单解释一下：

XML/HTML Code复制内容到剪贴板
<video width=”800” height=”374”>  
    <source src=”my_video.mp4” type=”video/mp4” />  
    <source src=”my_video.ogv” type=”video/ogg” />  
    <source src=”my_video.webm” type=”video/webm” />  
    你浏览器不支持 video 功能，点击这里下载视频： <a href=”video.webm”>下载视频</a>.   
</video>

• 
  

video 标签表示这里是一个视频，width、height 属性分别表示这个视频内容的宽高（单位像素）。video 标签中可以包含 source 标签，source 标签用来表示引用的视频和视频的格式、类型。为了保证向下的兼容性，我们还在 video 标签中加了一句提示，这句话在支持 video 标签的浏览器中是不会显示的，如果不支持就会显示出来。这里，还增加了一个视频的下载地址，如果浏览器不支持，可以让用户选择下载下来看。
特别需要注意一点，你的主机必须能正确的处理这事些视频请求。确保你的主机被请求这些视频的时候会在 Content-Type 头发送正确的 MIME 类型。如果你不清楚，可以咨询一下主机服务商，也可以自己添加。如果主机支持 .htaccess ，可以在 .htaccess 文件中增加下面语句：

代码如下:

AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm

大体就是这样，比较简单，更加具体的关于 video 的使用方法，可以搜索一下，也可以见本文扩展阅读链接，在这里不再赘述。

第三步：为旧版浏览器做兼容

前面说过，如果浏览器不支持 video ，将会把 video 中的提示内容显示出来。那么对付老旧浏览器，我们可以用传统的 flash 来替换这个提示内容。这样，当浏览器不兼容 video 标签的时候，就会显示出 flash 版本的视频。例如：

<video width=”800” height=”374”>  
    <source src=”my_video.mp4” type=”video/mp4” />  
    <source src=”my_video.ogv” type=”video/ogg” />  
<object width="800" height="374" type="application/x-shockwave-flash" data="fallback.swf">  
    <param name="movie" value="fallback.swf" />  
    <param name="flashvars" value="autostart=true&amp;file=video.flv" />  
</object>  
</video>

直接按照原来正常的 flash 引入方法写进 video 标签中即可。这样，我们就实现了跨浏览器兼容的 video 功能使用

【相关推荐】

1. 详解html5的video标签测试应用

2. html 5中使用video元素制作一个影片播放器

3. 分享一个video标签无法播放mp4的问题以及解决方案

4. H5 video标签只能放声音不能放视频的解决办法

5. IIS的MIME未注册MP4类型，导致无法识别vidoe标签的解决办法

Atas ialah kandungan terperinci 详解HTML5的video标签的浏览器兼容性增强方案. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!