视频类APP开发是怎样解决添加视频进度条的

当前位置：

发布时间：2019-07-04

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

视频类APP开发是怎样解决添加视频进度条的？深圳APP开发公司本例将完成给自定义播放器添加进度条的工作。一共会添加两种进度条，分别为下载进度条和播放进度条。使用Chrome浏览器打开网页文件，点击屏幕中央的三角播放按钮，播放器底部出现自定义工具条，同时进度条慢慢地向右伸长，运行效果如图3.7所示。

图3.7中的蓝色进度条表示播放时间，灰色条表示视频下载进度。将鼠标悬浮于进度条之上，此时进度条上方会出现对应的时间提示框，效果如图3.8所示。

本例的代码构建在“3-5.添加视频进度条.html”的功能基础之上。下面对增添的代码部分做一个分析。字符串模板CONTROLS_HTML增加进度条HTML结构，代码如下：

'<div class=" control progress_ control">' + // 进度条外围层 '<div class=" progress_ bar_ bg"></ div>' + // 进度条背景层 '<div class=" progress_ bar_ buffered"></ div>' + //

// 下载进度条层 '<div class=" progress_ bar_ played"></ div>' + // 播放进度条层 '<div class=" progress_ bar_ time">' + // 悬浮提示外围层 '<div class=" progress_ bar_ time_ line"></ div>' + '<div class=" progress_ bar_ time_ txt"> 00: 00</ div>' + // 悬浮时间提示 '</div>' + '</div>' +

APP开发公司提示HTML模板对应的CSS可以参考源码。视频工具类VideoControl的prototype原型上增加_progress和_bartime方法。其中_progress方法用于控制下载进度条的移动，代码如下：
_progress: function () { // 控制下载进度条 var self = this, video = self. video, // 实例上的video 属性 video_ ele = video. get( 0), // 视频的原生元素 progress_ bar = self. wraper. find(' div. progress_ control'), // 进度条外围元素 progress_ bar_ buffered = self. wraper. find(' div. progress_ bar_ buffered');// 下载进度条元素 video. on({ 'progress': function (e) { // 监听 video 的下载进度事件 if (this. buffered && this. buffered. length) { // 判断是否开始接收数据 var percent = video_ ele. buffered. end( 0) / video_ ele. duration; // 下载数据相对总时间百分比 progress_ bar_ buffered. width( percent * progress_ bar. width()); // 设置下载进度条长度 }; } }); },

video的buffered属性返回1个TimeRanges对象。TimeRanges对象表示音视频的已缓冲部分，对象具有1个length属性，表示音视频中已缓冲范围的数量，同时还具有两个方法，即start和end，语法如下：
video. buffered. start( index); // 获得某个已缓冲范围的开始位置 video. buffered. end (index); // 获得某个已缓冲范围的结束位置

_bartime方法用于实现鼠标悬浮进度条的时间提示，代码如下：

_bartime: function () { // 鼠标悬浮进度条的时间提示 var wraper = this. wraper, progress_ control = wraper. find(' div. progress_ control'),// 进度条外围元素 progress_ bar_ bg = wraper. find(' div. progress_ bar_ bg'), // 进度条背景层 progress_ bar_ time = wraper. find(' div. progress_ bar_ time'), // 时间悬浮提示层外框 progress_ bar_ time_ txt = wraper. find(' div. progress_ bar_ time_ txt'), video_ ele = this. video. get( 0); // 悬浮提示时间元素 progress_ bar_ bg. on({ // 绑定进度条背景

'mousemove': function (e) { var offsetX = e. clientX - progress_ bar_ bg. offset(). left, // 相对于进度条横轴距离 percent = offsetX / progress_ bar_ bg. width(); progress_ bar_ time. css(' left', offsetX + 6); // 设置时间浮动框位置 progress_ bar_ time_ txt. html( timeFormat(( percent * video_ ele. duration)|| 0)); }, 'mouseenter': function (){ progress_ bar_ time. show(); },// 移入显示时间提醒 'mouseleave': function (){ progress_ bar_ time. hide(); }// 移出隐藏时间提醒 }); }

最后，完成播放进度条的动态更新功能，修改原型方法_timeupdate，代码如下：

this. video. on({ 'timeupdate': function () { // 视频播放位置变动时触发 currentTime. html( timeFormat( video. currentTime)); // 当前

播放时间动态更新 var percent = video. currentTime / video. duration; // 播放时间占总时间百分比 progress_ bar_ played. width( percent * progress_ bar. width()); // 设置播放进度条宽度 }, 'loadedmetadata': function () { // 视频元数据加载完毕后触发 duration. html( timeFormat( video. duration)); } });

在上面的代码中，将之前监听video的play事件换为loadedmetadata事件，是为了保证视频的元数据下载完毕后再设置视频总耗时，避免在play事件触发时获取video的duration属性为空。提示视频的元素据包含时长、尺寸（仅视频）以及文本轨道等信息。好了，APP开发公司本文关于“视频类APP开发是怎样解决添加视频进度条的”的相关APP制作知识我们就分享到这里，谢谢关注，博纳网络编辑整理。

当前文章链接：/construction/appkaifa/3070.html

上一篇：APP开发Git工具的使用下一篇：APP开发Git工具的常用命令及使用时的注意事项

返回列表