HTML 5视频标签跨浏览器兼容

顺晟科技

2021-08-07 10:47:49

参数解释

src 视频指向地址

poster 在加载视频内容前显示的图片

controls 视频控件，方便用户自己操作媒体

autoplay 视频自动播放

source 不同浏览器支持的视频格式不一样，因此要使用多个source上传不同格式的视频

width 播放器宽度

height 播放器高度

　　让主流浏览器都支持video标签，可以在html中引入一个js文件：

　　官方网站：https://html5media.info

<script src="http://html5media.googlecode.com/svn/trunk/src/html5media.min.js"></script>

HTML5 video标签嵌入视频各个浏览器下通用：http://www.zhangxinxu.com/study/201003/html5-video-mp4.html

以下内容摘自网络：

浏览器能播放哪种格式的视频？各个浏览器不同，有专利格式的，有开源格式的。

具体支持情况如下：

专利格式mp4：Safari（iPad、Windows、Mac OS）、Chrome、IE9

开源格式webm：Firefox、Chrome、Opera

开源格式ogg：Firefox、Chrome、Opera

MP4

Safari 3+
Internet Explorer 9+
Chrome (wasn’t meant to be but it certainly is!)

OGG

Firefox 3.5+
Chrome 3+
Opera 10.5+

WebM

Firefox 4+
Chrome 6+
Opera 10.6+

如何让视频在所有浏览器上都能播放？如何支持iPad和IE876？

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

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

目前没有一个视频格式兼容所有浏览器，的解决方法就是把视频转换成多种格式。

mp4 格式的视频，可以在苹果设备中使用；
ogv 格式的视频，用在火狐浏览器中；
webm 格式的视频，这个可以用在谷歌浏览器；

视频转换工具国内的功能比较少，转换格式可能没有上面后两个，而且质量良莠不齐，往往需要注册才能使用。推荐一个国外的工具(需要FQ)http://www.online-convert.com 。甚至不用安装软件，直接选择相应的目标格式，然后上传视频，配置一下参数就可以转换出来了。没有合适工具的朋友，可以尝试一下。

第二步：使用多个source上传不同格式的视频

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

我们可以把视频上传到优酷、土豆或者爱奇艺等国内视频服务商，直接调用视频代码
在老旧版本的浏览器上使用flash视频文件
head部分引用 <script src="http://html5media.googlecode.com/svn/trunk/src/html5media.min.js"></script>
1. html5media是一个让video、audio标签在旧版IE中全面兼容的JavaScript类库，它不依赖于任何JavaScript框架。页面使用了html5media之后，当老版本的浏览器不支持HTML5时，它将会自动切换成Flash模式的flowplayer播放器尝试播放。。
使用VideoJS插件实现兼容 http://videojs.com

head部分：

<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">  
<script src="http://vjs.zencdn.net/c/video.js"></script> 

<!–[if lt IE 9]>   
    <script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>   
<![endif]–>

关于HTML 5 video 标签跨浏览器兼容问题，还需要不断的实践。

网站建设

Html