大体思路:先在wxml文件中定义一个进度条,然后在视频上定义播放进度变化时触发bindtimeupdate这个属性,进而进度条值改变触发sliderChanging()和sliderChange()方法。
1、定义进度条
<view class='process-container'>
<view class='slider-container'>
<slider bindchange="sliderChange" bindchanging="sliderChanging" step="1" value="{{sliderValue}}"
backgroundColor="#A8A8A8" activeColor="#FFEE83" block-color="#FFEE83" />
</view>
</view>
2、在video标签绑定播放时间改变videoUpdate()方法
<video id="videoplayer" class='player' src="{{url}}" autoplay="true" bindtimeupdate="videoUpdate"></video>
3、触发进度条并跳转对应播放时间,贴出整个js代码
Page({
/**
* 页面的初始数据
*/
data: {
url: "",
sliderValue: 0, //控制进度条slider的值,
updateState: false, //防止视频播放过程中导致的拖拽失效
},
onLoad: function (options) {
// 生命周期函数--监听页面加载
this.setData({
url: options.url,
})
},
onReady: function (res) {
this.videoContext = wx.createVideoContext('videoplayer');
this.setData({
updateState: true
})
},
//播放条时间改表触发
videoUpdate(e) {
if (this.data.updateState) { //判断拖拽完成后才触发更新,避免拖拽失效
let sliderValue = e.detail.currentTime / e.detail.duration * 100;
this.setData({
sliderValue: sliderValue,
duration: e.detail.duration
})
}
},
sliderChanging(e) {
this.setData({
updateState: false //拖拽过程中,不允许更新进度条
})
},
//拖动进度条触发事件
sliderChange(e) {
if (this.data.duration) {
this.videoContext.seek(e.detail.value / 100 * this.data.duration); //完成拖动后,计算对应时间并跳转到指定位置
this.setData({
sliderValue: e.detail.value,
updateState: true //完成拖动后允许更新滚动条
})
}
}
})
参考资源: