HTML5 video 实现浏览器兼容的方法

本文我们将和大家分享关于HT ML 5 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 实际上就是一个 简单 的标签，包含了一些视频相关信息等。下面我直接给出具体代码，然后简单解释一下：

<video width="800" h ei ght="374">
    <source src=" ;m y_video.mp4" ty PE ="video/mp4" />
    <source src="my_video.ogv" type="video/ogg" />
    <source src="my_video.webm" type="video/webm" />

你浏览器不支持 video 功能，点击这里下载视频： <a hr ef="video.webm"& am p; gt下载视频</a&gt.</video>

video 标签表示这里是一个视频，width、height 属性分别表示这个视频内容的 宽 高（单位像素）。video 标签中可以包含 source 标签，source 标签用来表示引用的视频和视频的格式、类型。为了保证向下的兼容性，我们还在 video 标签中加了一句提示，这句话在支持 video 标签的浏览器中是不会显示的，如果不支持就会显示出来。这里，还增加了一个视频的下载地址，如果浏览器不支持，可以让用户选择下载下来看。

特别需要注意 一点 ，你的主机必须能正确的处理这事些视频请求。确保你的主机被请求这些视频的时候会在 Content -t ype 头发送正确的 MIME 类型。如果你不清楚，可以咨询一下主机 服务商 ，也可以自己添加。如果主机支持 .htaccess ，可以在 .htaccess 文件中增加下面语句：

大体就是这样，比较简单，更加具体的关于 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 -s hockwave-flash" data="fallback.swf">
<param name="movie" value="fallback.swf" />
<param name="flash VAR s" value="autostart=true&amp;file=video.flv" />
</object></video>

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

以上内容就是关于HTML5 video 实现浏览器兼容的方法，希望能帮助到大家。

相关推荐：

浏览器兼容HTML5和CSS3的问题

HTML里需要兼容验证的浏览器有 哪些

实现兼容各种浏览器的音乐播放js代码

以上就是HTML5 video 实现浏览器兼容的方法的详细内容，更多请关注其它相关 文章 ！

总结

以上是 为你收集整理的 HTML5 video 实现浏览器兼容的方法 全部内容，希望文章能够帮你解决 HTML5 video 实现浏览器兼容的方法 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于HTML5 video 实现浏览器兼容的方法的详细内容...