- 发布:2021-01-26 16:46
- 更新:2021-02-02 15:26
- 阅读:1508
产品分类: uniapp/App
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: windows10 64位
HBuilderX类型: 正式
HBuilderX版本号: 3.0.7
手机系统: 全部
手机厂商: 华为
页面类型: nvue
打包方式: 云端
项目创建方式: HBuilderX
测试过的手机:
示例代码:
<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>
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 设置远高码率的 远程视频地址
把以上代码作为视频播放组件
<list>
<cell>
引入组件
</cell>
</list>
直接使用video 组件,src 设置远高码率的 远程视频地址
预期结果:
希望能够流畅播放,不卡顿
希望能够流畅播放,不卡顿
实际结果:
图像卡顿
图像卡顿
bug描述:
video 组件
视频播放, 高码率 800M MP4视频播放卡顿,图像停止,声音继续播放
测试文件
1080*1920
7845.82Kbps
878.82 MB
时长 15 分钟左右
3 个回复
DCloud_Android_DQQ
bug 已确认,修复中
DCloud_Android_DQQ
已与开发者沟通确认:
bug说明:
问题视频源,码率高达8000kps。 在服务器/终端 网络网络环境无法满足该速率的情况下,现有版本video组件音视频处理脱轨,导致视频慢动作,音频正常播放。
解决方案:
1 通过ffmpeg 命令
ffmpeg -i input.mp4 -movflags +faststart out.mp4
可以将880M的MP4 重编码为 122M视频。播放质量无太大差别。
2 与开发者沟通, 稍后版本,video 组件会新增播放策略 属性,当配置为 稳定播放模式时,会针对类似网络环境差的情况进行专门优化,测试可以解决此类问题。
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