c***@126.com
c***@126.com
  • 发布:2021-01-26 16:46
  • 更新:2021-02-02 15:26
  • 阅读:1252

【报Bug】video 高码率 800M MP4视频播放卡顿,图像停止,声音继续播放

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: windows10 64位

HBuilderX类型: 正式

HBuilderX版本号: 3.0.7

手机系统: 全部

手机厂商: 华为

页面类型: nvue

打包方式: 云端

项目创建方式: HBuilderX

测试过的手机:

华为 mate 30 5g

示例代码:
<template> <view class="area"> <video v-if="refId != ''" ref="video_${refId}" id="video_${refId}" src="src" @play="play"
@pause="pause"
@waiting="waiting"
@timeupdate="Timeupdate" loop="true" enable-progress-gesture="false" page-gesture="false" initial-time="startTime" controls="false" show-fullscreen-btn="false" show-center-play-btn="false" class="video" style="boxStyle" @ended="endedPlay" objectFit="system=='ios'?'fill':'cover'" ></video>
<progress :percent="progress" stroke-width="2" activeColor="rgba(255,255,255,0.8)"
backgroundColor="rgba(255,255,255,0.3)" class="progress"/>
</view>
</template>
<script>
export default {
watch: {
state(newValue,oldValue){
var videoCtx = this.$refs[video_${this.refId}];
switch (newValue) {
case 'play':
videoCtx.play();
break;
case 'continue':
videoCtx.play();
break;
case 'pause':
videoCtx.pause();
break;
case 'stop':
videoCtx.pause();
break;
default:
break;
}
}
},
props: {
startTime:{type:Number,default:0},
system:{type:String,default:''},
idx:{type:Number,default:0},
state: {type: String,default:'stop'},
src: {type: String, default() { return '';}},
boxStyle: {type: Object, default() {return {};}},
refId: {type: String,default() { return '';}},
progress:{type:Number,default:0}
},
methods: {
Timeupdate(e){
this.$emit('timeupdateEvent', e,this.idx);
},
endedPlay(e) {
this.$emit('endedEvent', e,this.idx);
},
play(e){
this.$emit('playEvent', e,this.idx);
},
waiting(e){
this.$emit('waitEvent', e,this.idx);
},
pause(e){
this.$emit('pauseEvent', e);
}
}
};
</script>

<style scoped>
.area {position:relative;flex: 1;background-color: #0A98D5;}
.video {width: 750rpx;flex: 1;}
.progress{position:absolute;bottom:0rpx;left:0px;width: 750rpx;z-index:4;flex: 1;}
</style>

操作步骤:

把以上代码作为视频播放组件
<list>
<cell>
引入组件
</cell>
</list>
直接使用video 组件,src 设置远高码率的 远程视频地址

预期结果:

希望能够流畅播放,不卡顿

实际结果:

图像卡顿

bug描述:

video 组件
视频播放, 高码率 800M MP4视频播放卡顿,图像停止,声音继续播放
测试文件
1080*1920
7845.82Kbps
878.82 MB
时长 15 分钟左右

2021-01-26 16:46 负责人:DCloud_Android_DQQ 分享
已邀请:
DCloud_Android_DQQ

DCloud_Android_DQQ

bug 已确认,修复中

DCloud_Android_DQQ

DCloud_Android_DQQ

已与开发者沟通确认:

bug说明:
问题视频源,码率高达8000kps。 在服务器/终端 网络网络环境无法满足该速率的情况下,现有版本video组件音视频处理脱轨,导致视频慢动作,音频正常播放。

解决方案:
1 通过ffmpeg 命令
ffmpeg -i input.mp4 -movflags +faststart out.mp4
可以将880M的MP4 重编码为 122M视频。播放质量无太大差别。

    类似场景,建议进行同样的预处理,可以节省服务器、带宽费用,优化用户体验  

2 与开发者沟通, 稍后版本,video 组件会新增播放策略 属性,当配置为 稳定播放模式时,会针对类似网络环境差的情况进行专门优化,测试可以解决此类问题。

DCloud_Android_DQQ

DCloud_Android_DQQ

HX 3.1.0 修复 新增 视频播放控件支持 playStrategy 属性设置视频优化策略,解决播放在线高清视频卡顿、音视频脱轨的问题

  • 西城东哥

    playStrategy属性如何设置

    2021-02-05 00:24

  • DCloud_Android_DQQ

    回复 西城东哥: 0: 默认策略 1:平滑播放模式: 开启了此模式的视频源 会加大缓冲力度,采用open sl解码音频,避免音视频脱轨的问题,可能会降低首屏展现速度,视频帧率。 适用于在线播放高清视频的场景 默认0

    2021-02-05 11:40

  • 西城东哥

    回复 DCloud_Android_DQQ: 好的。感谢解答

    2021-02-05 19:03

该问题目前已经被锁定, 无法添加新回复