HTML5的video标签的浏览器兼容性增强方案分享


Posted in HTML / CSS onMay 19, 2016

在过去 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复制内容到剪贴板
  1. <video width=”800” height=”374”>  
  2.     <source src=”my_video.mp4” type=”video/mp4” />  
  3.     <source src=”my_video.ogv” type=”video/ogg” />  
  4.     <source src=”my_video.webm” type=”video/webm” />  
  5.     你浏览器不支持 video 功能,点击这里下载视频: <a href=”video.webm”>下载视频</a>.   
  6. </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 版本的视频。例如:

XML/HTML Code复制内容到剪贴板
  1. <video width=”800” height=”374”>  
  2.     <source src=”my_video.mp4” type=”video/mp4” />  
  3.     <source src=”my_video.ogv” type=”video/ogg” />  
  4. <object width="800" height="374" type="application/x-shockwave-flash" data="fallback.swf">  
  5.     <param name="movie" value="fallback.swf" />  
  6.     <param name="flashvars" value="autostart=true&file=video.flv" />  
  7. </object>  
  8. </video>  

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

HTML / CSS 相关文章推荐
利用CSS3实现文本框的清除按钮相关的一些效果
Jun 23 HTML / CSS
CSS3径向渐变之大鱼吃小鱼之孤单的大鱼
Apr 26 HTML / CSS
使用CSS3制作一个简单的进度条(demo)
May 23 HTML / CSS
详解CSS3中强大的filter(滤镜)属性
Jun 29 HTML / CSS
HTML5 Canvas实现玫瑰曲线和心形图案的代码实例
Apr 10 HTML / CSS
基于 HTML5 的 WebGL 3D 版俄罗斯方块的示例代码
May 28 HTML / CSS
HTML5之SVG 2D入门13—svg对决canvas及长处和适用场景分析
Jan 30 HTML / CSS
HTML5 贪吃蛇游戏实现思路及源代码
Sep 03 HTML / CSS
让ie浏览器成为支持html5的浏览器的解决方法(使用html5shiv)
Apr 08 HTML / CSS
微信浏览器取消缓存的方法
Mar 28 HTML / CSS
浅谈HTML5 服务器推送事件(Server-sent Events)
Aug 01 HTML / CSS
浅谈HTML5 Web Worker的使用
Jan 05 HTML / CSS
HTML5中的postMessage API基本使用教程
May 20 #HTML / CSS
浅谈HTML5 defer和async的区别
Jun 07 #HTML / CSS
Html5上传图片 移动端、PC端通用代码
Jun 08 #HTML / CSS
你不知道的5个HTML5新功能
Jun 28 #HTML / CSS
HTML5里autofocus自动聚焦属性使用介绍
Jun 22 #HTML / CSS
HTML5 placeholder属性详解
Jun 22 #HTML / CSS
HTML5 本地存储 LocalStorage详解
Jun 24 #HTML / CSS
You might like
动漫女神老婆无限好,但日本女生可能就不是这么一回事了!
2020/03/04 日漫
Windows中安装Apache2和PHP4权威指南
2006/11/18 PHP
PHP编实现程动态图像的创建代码
2008/09/28 PHP
在Debian系统下配置LNMP的教程
2015/07/09 PHP
PHP多进程编程实例详解
2017/07/19 PHP
js输出列表实现代码
2010/09/12 Javascript
JavaScript判断DOM何时加载完毕的技巧
2012/11/11 Javascript
JS实现字体选色板实例代码
2013/11/20 Javascript
JS中使用sort结合localeCompare实现中文排序实例
2014/07/23 Javascript
使表格的标题列可左右拉伸jquery插件封装
2014/11/24 Javascript
Javascript的闭包详解
2014/12/26 Javascript
javascript解析xml实现省市县三级联动的方法
2015/07/25 Javascript
基于Bootstrap的Java开发问题汇总(Spring MVC)
2017/01/15 Javascript
简单实现js菜单栏切换效果
2017/03/04 Javascript
Vue.js实战之使用Vuex + axios发送请求详解
2017/04/04 Javascript
ionic2自定义cordova插件开发以及使用(Android)
2017/06/19 Javascript
原生JS实现的自动轮播图功能详解
2018/12/28 Javascript
使用Node.js写一个代码生成器的方法步骤
2019/05/10 Javascript
[01:20]2018DOTA2亚洲邀请赛总决赛战队LGD晋级之路
2018/04/07 DOTA
[01:05:36]VP vs TNC Supermajor小组赛B组 BO3 第二场 6.2
2018/06/03 DOTA
详解Python操作RabbitMQ服务器消息队列的远程结果返回
2016/06/30 Python
Python如何抓取天猫商品详细信息及交易记录
2018/02/23 Python
python机器学习之随机森林(七)
2018/03/26 Python
Python实现自定义顺序、排列写入数据到Excel的方法
2018/04/23 Python
Python实现的远程登录windows系统功能示例
2018/06/21 Python
浅谈django rest jwt vue 跨域问题
2018/10/26 Python
ActiveMQ:使用Python访问ActiveMQ的方法
2019/01/30 Python
Python完全识别验证码自动登录实例详解
2019/11/24 Python
Pycharm中切换pytorch的环境和配置的教程详解
2020/03/13 Python
各营销点岗位职责范本
2014/03/05 职场文书
药学职务聘任书
2014/03/29 职场文书
地理信息科学专业推荐信
2014/09/08 职场文书
2015年事业单位办公室文员工作总结
2015/04/24 职场文书
单位计划生育责任书
2015/05/09 职场文书
刑事辩护词范文
2015/05/21 职场文书
诚信高考倡议书
2019/06/24 职场文书