html5 <video>本地资源,让你更愉快地使用HTML5的video和audio的html5media.js

HTML5的确很好,特别是对于我们开发者而言,以前需要写一大段代码,现在一行代码也许就能解决,彻底提供了我们的效率,比如视频音频的video和audio这两个新标签就为我们省下了不少事情。然而,遗憾的是很多旧版本的浏览器(尤其IE9以下版本)不能够支持它们,搞得很多开发者还是使用传统的方式去解决问题。

这样一来至少是现在,HTML5这么好的东西对于有的项目来讲却是然并卵。然而高手在民间,人民的智慧是无穷的;更可喜的是有人愿意为开发者做贡献,不仅有了自己的解决方案,而且还以非常优雅的方式公布其解决方案。这就是我们这里要说的html5media.js。它是一个JS类库(对了,不需要任何类库的支持,比如jQuery也不需要),让支持HTML5的浏览器依然使用HTML5,不支持HTML5的浏览器使用该库所使用的falsh播放器。

516733884680133416f7c572bc4479f2.png

这样我们就可以放心地使用HTML5来承载我们网页音频视频的播放了。使用这个类库的方法是最简单的,直接在网页中引入这个类库即可,其官网提供了CDN服务:

除此之外,Bootstrap中文网也提供了CDN服务,地址为:http://www.bootcdn.cn/html5media。对,就是这么简单,引入一段JS就成了,接下来你的可以在你的网页中使用HTML5的video和audio标签了。

大家可以在它的官网查看DEMO(首页就是),你可以分别用Chrome、IE各个版本等各种浏览器访问,看看有啥不一样,看到区别也许你就能够理解这个类库的意义了。

===========================我是分割线===========================

到这里还没完,我就知道也许有那么一些朋友就是强迫症,就是希望这样的代码在自己服务器的本地,也就是不使用第三方的CDN服务。不过也不一定是因为强迫症,因为在国内访问其官方的资源会很慢,于是还不如使用我们自己服务器的资源。

这时候需要注意了,如果把这个类库放在本地,那么就不仅仅是这个类库要down下来了,还有其他的文件,否则你就会发现你的浏览器会报404错错误,也就会发现在不支持HTML5的浏览器中你的视频音频播放不了。

因为这个类库会调用相对路径的flash文件,还需要flowplayer.controls.swf、 flowplayer.swf、expressInstall.swf、flowplayer.audio.swf;把这四个文件放在跟JS同一目录即可;这些文件在github中有,可以看到在bootstrap中文网的CDN服务中就会看到这些文件。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值