×

深圳网站建设—APP开发—网站制作—小程序开发_博纳网络公司

0755 -
82538016
82560826
网站制作资讯

开发APP的公司怎样解决添加视频快进慢进按钮?

文章编辑:网站建设 文章来源:APP开发 浏览量:

  开发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的公司怎样解决添加视频快进慢进按钮?”知识就分享到这里,谢谢关注,博纳网络编辑整理。
 
 

当前文章链接:/construction/appkaifa/3084.html
如果您觉得案例还不错请帮忙分享:

[声明]本网转载网络媒体稿件是为了传播更多的信息,此类稿件不代表本网观点,本网不承担此类稿件侵权行为的连带责任。故此,如果您发现本网站的内容侵犯了您的版权,请您的相关内容发至此邮箱【qin@198bona.com 】,我们在确认后,会立即删除,保证您的版权。