介绍
在小程序中，我们可以通过使用内置组件 video 和 audio，实现播放音视频的功能。但是，如果要自定义一个可拖拽的进度条，则需要使用一些额外的代码实现。本文将介绍如何使用 wx.createVideoContext 和 wx.createInnerAudioContext 方法实现视频和音频的可拖拽进度条。
视频进度条
1. 在 wxml 中定义视频组件
我们在 wxml 文件中定义一个 video 组件，并给它一个 id，用于后面通过 wx.createVideoContext 方法获取视频上下文。
代码如下：
<video id="my-video" poster="{{poster}}" src="{{src}}" bindplay="onPlay" bindtimeupdate="onTimeUpdate" controls="controls"></video>
其中，poster 和 src 分别表示视频的封面和地址。bindplay 和 bindtimeupdate 是用来绑定视频的播放和时间更新事件的。
2. 在 js 文件中获取视频上下文
在 js 文件中，我们使用 wx.createVideoContext 方法获取上面所定义的视频组件的上下文，注意，第一个参数必须是视频组件的 id 名称。
const videoCtx = wx.createVideoContext('my-video')
3. 实现拖拽进度条功能
在 onTimeUpdate 方法中，我们可以获取到视频的当前播放时间和总时长，然后通过计算得到当前进度百分比。最后，我们将百分比值设置到一个进度条组件中，实现自定义的进度条效果。
代码如下：
onTimeUpdate(e) {
const duration = e.target.duration
const currentTime = e.detail.currentTime
const percent = currentTime / duration * 100
this.setData({
percent: percent.toFixed(2)
})
}
在 setData 中设置的 percent 值将会用于更新进度条。
音频进度条
1. 在 wxml 中定义音频组件
和视频组件一样，在 wxml 文件中定义一个 audio 组件，并给它一个 id，用于后面通过 wx.createInnerAudioContext 方法获取音频上下文。
代码如下：
<audio id="my-audio" src="{{src}}" bindtimeupdate="onTimeUpdate" controls="controls"></audio>
其中，src 表示音频的地址。bindtimeupdate 是用来绑定音频的时间更新事件的。
2. 在 js 文件中获取音频上下文
在 js 文件中，我们使用 wx.createInnerAudioContext 方法获取上面所定义的音频组件的上下文，注意，第一个参数必须是音频组件的 id 名称。
const audioCtx = wx.createInnerAudioContext('my-audio')
3. 实现拖拽进度条功能
在 onTimeUpdate 方法中，我们可以获取到音频的当前播放时间和总时长，然后通过计算得到当前进度百分比。最后，我们将百分比值设置到一个进度条组件中，实现自定义的进度条效果。
代码如下：
onTimeUpdate(e) {
const duration = e.target.duration
const currentTime = e.detail.currentTime
const percent = currentTime / duration * 100
this.setData({
percent: percent.toFixed(2)
})
}
在 setData 中设置的 percent 值将会用于更新进度条。
总结
通过上面的介绍，我们可以实现小程序中视频和音频的自定义可拖拽进度条功能。在实现过程中，我们需要使用到 wx.createVideoContext 和 wx.createInnerAudioContext 方法来获取视频和音频的上下文，然后通过计算得到当前进度百分比，并将百分比值设置到一个进度条组件中。