开发APP怎样解决添加视频快进慢进按钮?深圳APP开发公司根据多年移动端项目搭建经验认为,HTML5的video元素几乎带来了所有传统播放器都具备的功能,本例将在自定义播放器上加入慢进和快进按钮。
使用Chrome浏览器打开网页文件,点击屏幕中央的三角播放按钮,播放器底部出现自定义工具条,同时下方工具条左端出现快慢进按钮,运行效果如图3.9所示。 点击播放按钮本例的代码构建在“3-6.添加视频快进慢进按钮.html”的功能基础之上。下面对增添的代码部分做一个分析。字符模板增加快进和慢进HTML结构,代码如下:
< div class=" control backward_ control" data- type=" backward" title=" 慢 退 "><div></ div>< div></ div></ div> < div class=" control forward_ control" data- type=" forward" title=" 快进 "><div></ div>< div></ div></ div>
在HTML结构中,自定义data-type属性表示对应按钮元素执行的方法名。快进和慢进在委托方法中对应的方法名为“backward”和“forward”,方法执行脚本如下:
case 'backward': // 自定义 工具 条 慢 退 self._ playbackRate(- 0. 1); // 给 实例 方法_ playbackRate 传入 负数 播放 速度 break; case 'forward': // 自定义 工具 条 快进 self._ playbackRate( 0. 1); break;
如上代码所示,快慢进执行相同的实例方法_playbackRate,该方法接收1个数字参数,表示增减播放速度,_playbackRate代码如下:
_playbackRate: function (rate) { this. video. get( 0). playbackRate += rate; }
playbackRate属性表示视频的播放速度,默认值为1,数值越小播放速度越慢,反之亦然。好了,APP开发公司本文关于“开发APP的公司怎样解决添加视频快进慢进按钮?”知识就分享到这里,谢谢关注,博纳网络编辑整理。