让你更愉快地使用HTML5的video和audio的html5media.js

2015-11-26 10:01 栏目:技术开发 查看(5515)

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

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

323

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

<script src="//api.html5media.info/1.1.8/html5media.min.js"></script>

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

官网及演示:https://html5media.info

github:https://github.com/etianen/html5media

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

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

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

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

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

与我们的项目经理联系
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流

转载请注明出处:让你更愉快地使用HTML5的video和audio的html5media.js - 微构网络
分享:
  • 中央直属机关工委主要职责 2019-05-22
  • 打造“互联网+”,共享经济改变百姓生活 2019-04-22
  • 破财免灾!C罗愿向西班牙税务部门缴纳1880万欧元 2019-04-19
  • 中国品牌SUV新标杆 人民网试驾WEY VV7VV5 2019-04-19
  • 杨爱国:借助小博会促进尚志社会经济加快发展 2019-04-15
  • 泪目!川农院士逝世5年,夫人每日都去看他的雕像…思念如马,不停蹄! 2019-04-15
  • 海信世界杯首秀出奇招 竟打出俄文广告 2019-03-25
  • 财政部:对原产于美国的500亿美元进口商品加征关税 2019-03-11
  • 我和《人民日报》(我与人民日报·纪念人民日报创刊70周年) 2019-03-11
  • 杭州再增100个海绵城市项目 2018-11-08
  • 新华网申领新闻记者证资格审核公示 2018-11-08
  • 175| 698| 605| 630| 750| 309| 672| 163| 297| 756|