uni-app 播放组件快进导致无法播放 出现播放按钮抽搐 进度条快速跳

uni-app 播放组件快进导致无法播放 出现播放按钮抽搐 进度条快速跳

属性
产品分类 uniapp/App
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 10
HBuilderX类型 正式
HBuilderX版本号 3.3.5
手机系统 Android
手机系统版本号 Android 7.1.1
手机厂商 模拟器
手机机型 雷电模拟器最新版
页面类型 vue
vue版本 vue2
打包方式 云端
项目创建方式 HBuilderX

示例代码:

<video   
id="myVideo" autoplay   
style="style"
src="item.matUrl"
initial-time="currentTime"
@timeupdate="videoTimeUpdateEvent"
@ended="videoEndedEvent"
play-strategy=1
enable-progress-gesture  >
</video>

js代码

export default {
data() {
return {
item: {
· matUrl:""   //mp4  URL
},
videoTime: "",
videoContext: {}, // 用于绑定视频标签
currentTime: 0,
isDo: 0,
speedMaterial: {},
isSubmit: false,
show: false,
experience: '',
style:{
width:"92vw"
}
}
},
onLoad(option) {
//获取列表传的播放地址
this.item = JSON.parse(decodeURIComponent(option.item));
this.item.matUrl = this.$url.data.url.djUrl + this.item.matUrl
//获取上次播放位置
this.speedMaterial = JSON.parse(decodeURIComponent(option.obj));
this.currentTime=this.speedMaterial.matTime ?this.speedMaterial.matTime :this.currentTime;
},
methods: {
videoTimeUpdateEvent(e) {
var that = this;
// 播放进度改变
console.log(e);
// e.detail.currentTime为每次触发时,视频的当前播放时间
if(this.currentTime != Number(e.detail.currentTime)){
this.currentTime = Number(e.detail.currentTime);
}
// that.videoTime = e.detail.duration - this.currentTime;
// console.log('播放进度条改变', this.currentTime)
},
videoEndedEvent() { //播放结束时监听
this.isDo = 1;
this.isSubmit = true;
},
},
onBackPress(e) { //监听返回
var that = this;
if (!this.isSubmit) {
uni.showModal({
title: '提示',
content: '你还未观看完,确认退出吗?',
success: function(res) {
if (res.confirm) {
// 保存观看位置   这个就不贴了
this.speedSubmit();
}
}.bind(this)
})
return true; //阻止默认返回行为
}
},
}

更多关于uni-app 播放组件快进导致无法播放 出现播放按钮抽搐 进度条快速跳的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 播放组件快进导致无法播放 出现播放按钮抽搐 进度条快速跳的实战教程也可以访问 https://www.itying.com/category-93-b0.html


应该跟网速有关

回到顶部