首页 > H5教程 > 正文

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

原创 2017-12-04 11:55:11 0 83
赞助会员专享特权
本文我们将和大家分享关于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 实际上就是一个简单的标签,包含了一些视频相关信息等。下面我直接给出具体代码,然后简单解释一下:

<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>

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

特别需要注意一点,你的主机必须能正确的处理这事些视频请求。确保你的主机被请求这些视频的时候会在 Content-Type 头发送正确的 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-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 功能使用。

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

相关推荐:

浏览器兼容HTML5和CSS3的问题

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

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

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

  • 相关标签:Firefox webkit video
  • 本文原创发布php中文网 ,转载请注明出处,感谢您的尊重!
  • 相关文章


  • 如何利用input事件来监听移动端的输入_html5教程技巧
  • 深入解析HTML5 Canvas控制图形矩阵变换的方法_html5教程技巧
  • 实例讲解使用SVG制作loading加载动画的方法_html5教程技巧
  • 实例讲解利用HTML5 Canvas API操作图形旋转的方法_html5教程技巧
  • HTML5 video 实现浏览器兼容的方法
  • 网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
    独孤九贱(4)_PHP视频教程

    独孤九贱(4)_PHP视频教程

    江湖传言:PHP是世界上最好的编程语言。真的是这样吗?这个梗究竟是从哪来的?学会本课程,你就会明白了。 PHP中文网出品的PHP入门系统教学视频,完全从初学者的角度出发,绝不玩虚的,一切以实用、有用...

    独孤九贱(5)_ThinkPHP5视频教程

    独孤九贱(5)_ThinkPHP5视频教程

    ThinkPHP是国内最流行的中文PHP开发框架,也是您Web项目的最佳选择。《php.cn独孤九贱(5)-ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例,从最基本的框架常识开始,将...

    独孤九贱(1)_HTML5视频教程

    独孤九贱(1)_HTML5视频教程

    《php.cn原创html5视频教程》课程特色:php中文网原创幽默段子系列课程,以恶搞,段子为主题风格的php视频教程!轻松的教学风格,简短的教学模式,让同学们在不知不觉中,学会了HTML知识。 ...

    ThinkPHP5实战之[教学管理系统]

    ThinkPHP5实战之[教学管理系统]

    本套教程,以一个真实的学校教学管理系统为案例,手把手教会您如何在一张白纸上,从零开始,一步一步的用ThinkPHP5框架快速开发出一个商业项目。

    PHP入门视频教程之一周学会PHP

    PHP入门视频教程之一周学会PHP

    所有计算机语言的学习都要从基础开始,《PHP入门视频教程之一周学会PHP》不仅是PHP的基础部分更主要的是PHP语言的核心技术,是学习PHP必须掌握的内容,任何PHP项目的实现都离不开这部分的内容,通...

    相关视频教程

  • javascript初级视频教程 javascript初级视频教程
  • jquery 基础视频教程 jquery 基础视频教程
  • javascript三级联动视频教程 javascript三级联动视频教程
  • 独孤九贱(3)_JavaScript视频教程 独孤九贱(3)_JavaScript视频教程
  • 独孤九贱(6)_jQuery视频教程 独孤九贱(6)_jQuery视频教程
  • 相关视频章节