开发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>
使用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;
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: function (rate) { this. video. get( 0). playbackRate += rate; }
playbackRate属性表示视频的播放速度，默认值为1，数值越小播放速度越慢，反之亦然。好了，APP开发公司本文关于“开发APP的公司怎样解决添加视频快进慢进按钮？”知识就分享到这里，谢谢关注，博纳网络编辑整理。
当前文章链接：/construction/appkaifa/3084.html
如果您觉得案例还不错请帮忙分享：
[声明]本网转载网络媒体稿件是为了传播更多的信息，此类稿件不代表本网观点，本网不承担此类稿件侵权行为的连带责任。故此，如果您发现本网站的内容侵犯了您的版权，请您的相关内容发至此邮箱【qin@198bona.com 】，我们在确认后，会立即删除，保证您的版权。
