- 发布：2023-05-05 09:36
- 更新：2023-05-10 16:48
- 阅读：451
产品分类： uniapp/App
PC开发环境操作系统： Mac
PC开发环境操作系统版本号： 13.3.1 (22E261)
HBuilderX类型： 正式
HBuilderX版本号： 3.7.9
手机系统： 全部
手机厂商： 华为
页面类型： nvue
vue版本： vue2
打包方式： 云端
项目创建方式： HBuilderX
测试过的手机：
示例代码：
<view class="page-root">
<video class="video" src="https://video.gsmba.net/Video/M3u8/08014b1b-cfd5-483d-b825-7c080071e479/08014b1b-cfd5-483d-b825-7c080071e479.m3u8?auth_key=1683247060-0-0-4acc3cc7a408a7516a1ae3e564ca751d" :header="header"></video>
</view>
</template>
<script>
export default {
data() {
return {
header: {
referer: 'http://bs.gsmba.net'
},
}
},
onLoad() {
},
methods: {
init() {
//
}
}
}
</script>
<style scoped lang='scss'>
.page-root {
margin-top: 100rpx;
}
.video {
width: 750rpx;
}
</style>```
<view class="page-root">
<video class="video" src="https://video.gsmba.net/Video/M3u8/08014b1b-cfd5-483d-b825-7c080071e479/08014b1b-cfd5-483d-b825-7c080071e479.m3u8?auth_key=1683247060-0-0-4acc3cc7a408a7516a1ae3e564ca751d" :header="header"></video>
</view>
</template>
<script>
export default {
data() {
return {
header: {
referer: 'http://bs.gsmba.net'
},
}
},
onLoad() {
},
methods: {
init() {
//
}
}
}
</script>
<style scoped lang='scss'>
.page-root {
margin-top: 100rpx;
}
.video {
width: 750rpx;
}
</style>``` 操作步骤：
安卓或iOS APP 端，nvue 页面，使用 video 组件播放 m3u8 视频，进行拖动进度条改变进度，进行拖动进度条到最开始的位置，播放完视频点击播放按钮继续播放
安卓或iOS APP 端，nvue 页面，使用 video 组件播放 m3u8 视频，进行拖动进度条改变进度，进行拖动进度条到最开始的位置，播放完视频点击播放按钮继续播放
预期结果：
- 进行拖动进度条改变进度流畅不卡顿
- 进度条可以正常拖到最开始的位置进行重新播放
- 播放完成后点击播放按钮可以重新播放
- 进行拖动进度条改变进度流畅不卡顿
- 进度条可以正常拖到最开始的位置进行重新播放
- 播放完成后点击播放按钮可以重新播放
实际结果：
- 进行拖动进度条改变进度卡顿，需要等待 3-6 秒才能恢复播放，并且卡顿过程中视频进度也会向前
- 进度条拖动到最开始位置无法重新播放，卡顿 3-6 秒后恢复之前的播放位置进行播放
- 播放完成后点击播放按钮后无法重新播放
- 进行拖动进度条改变进度卡顿，需要等待 3-6 秒才能恢复播放，并且卡顿过程中视频进度也会向前
- 进度条拖动到最开始位置无法重新播放，卡顿 3-6 秒后恢复之前的播放位置进行播放
- 播放完成后点击播放按钮后无法重新播放
bug描述：
在 APP 的 nvue 页面上，安卓和iOS 播放 m3u8 视频存在三个问题：
- 拖动进度条改变进度时卡顿，在 video 自带的 loading 结束后，还需要等待3-6秒才能恢复播放，并且恢复播放时，当前播放进度不会因为卡顿而暂停。
- 播放进度无法归0，拖动进度条到最开始的时，不会生效，会停顿 3-6 秒后，从改变进度前的进度后开始播放。
- 视频播放结束后，点击播放按钮，无法重新播放。
以上问题复现视频在附近，iOS 和 安卓都单独录制了一份；
复现项目 demo 也在附近，如视频地址失效/无法播放请联系我重新发一个；
