最近专题做的有点多,控制媒体文件较频繁,比如 H5加背景音乐(bibibi xx) 暂停、播放的切换,实时显示播放进度。
这里我们只针对H5背景音乐业务。
业务需求:添加背景音乐
添加按钮控制播放状态,并把播放状态显示在按钮上
为了快速搭建我写了这么个东西,轻量简单的控件 : H5MediaC https://github.com/songyijian/H5MediaC
很轻量小巧,能做的事也比较简单。还有很多待拓展。有兴趣的可以参与
它可以帮我们快速创建媒体文件(音频,视频),然后做一些简单的检测和超控
好那就用用吧,看看他是如何快速完成业务的:
//H5背景音乐业务就这样完成了
先引入:<script src="src/H5MediaC.0.3.0.js" type="text/javascript" charset="utf-8"></script>
js逻辑:
var vbtn = document.getElementById('toggle'); //播放按钮 var vobj=new H5MediaC('http://mobilepics.nosdn.127.net/BkZvwlcZbzFtHdWJQ2tMeWGzbdRDabO1%3D%3DE8DFORUE.mp3',{ 'toggleFn':function(_this){ //在这里控制播放按钮状态就可以了 if(_this.state){ vbtn.style.color="blue" }else{ vbtn.style.color="red" } } }) vbtn.onclick=function(){ vobj.toggle()}
其实这个组件不光能创建音频,视频也是同理的。
控制:插入位置、创建属性、全屏播放 ...
实时反映:播放进度、媒体长度、当前播放进度 ....
具体API,dom 请到github :https://github.com/songyijian/H5MediaC
记得帮忙点赞加星,也欢迎有这方面业务的朋友参与进来