HTML5 video 跨浏览器兼容的方法

来源：互联网 2023-02-22 02:00:17 186

在过去 flash 是网页上最好的解决视频的方法，截至到目前还算是主流，但是这种状况将会随着 HTML5 的发展而改变。就视频而言，HTML5 新增了 video 来实现在线播放视频的功能。

方法/步骤

一、兼容性

由于html5的出现，让网页中的视频、音频有了更加便捷的实现方式。但是video、audio标签只在IE 9 、Safari 3 、FireFox 4 、Opera 10 、Chrome 3 的浏览器版本得到了支持，并且各浏览器对于视频编码格式的支持不一致，这就需要我们考虑一个综合的实现方案，使得视频在不同浏览器中都能顺利播放，而且在老版本的浏览器中也能得到支持。

HTML5 video 跨浏览器兼容的方法

1本页面非法爬取自百度经验

使用VideoJS插件实现兼容

head部分添加

linkhref="css/video-js.css"rel="stylesheet">

scriptsrc="js/video.js">/script>

HTML5 video 跨浏览器兼容的方法

上述javascript代码进适用于支持html5元素的IE版本，对于老版本的IE可以通过HTML5shiv来使不支持HTML5的浏览器支持HTML新标签。htnl5shiv主要解决HTML5提出的新的元素不被IE6/IE7/IE8识别，这些新元素不能作为父节点包裹子元素，且不能应用CSS样式。让CSS 样式应用在未知元素只需执行 document.createElement(elementName) 即可实现。html5shiv的工作原理也就是基于此。html5shiv的使用很简单，由于IE9是支持html5的，故只需要在head中添加如下代码即可：

!–[ifltIE9]>

scripttype="text/javascript"src="js/html5.js">/script>

![endif]–>

HTML5 video 跨浏览器兼容的方法

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

HTML5 video 跨浏览器兼容的方法

目前比较主流和使用比较的的视频格式主要有：avi、rmvb、wmv、mpeg4、ogg、webm。这些视频都是由视频、音频、编码格式三部分组成的。在HTML5中，根据浏览器的不同，目前拥有多套不同的编码格式。我们可以用“格式工厂”转换生成不同的格式和编码

HTML5 video 跨浏览器兼容的方法

编写对应 HTML5 video 代码：HTML5 中的 video 实际上就是一个简单的标签，包含了一些视频相关信息等。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"&gt下载视频/a&gt./video>

HTML5 video 跨浏览器兼容的方法