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
应该跟网速有关

