
- 发布:2021-01-13 14:49
- 更新:2021-01-13 16:39
- 阅读:1239
产品分类: uniapp/App
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: Microsoft Windows [Version 10.0.17763.1217]
HBuilderX类型: 正式
HBuilderX版本号: 3.0.5
手机系统: 全部
手机机型: iPhone X
页面类型: vue
打包方式: 云端
项目创建方式: HBuilderX
App下载地址或H5⽹址: https://cam.crystal-yida.cn/CRDCWebAPI/UpdateFile/MobileYiDa.apk
测试过的手机:
示例代码:
<template>
<view>
<view class="page-section" >
<video class="VideoCss" id="myVideo" :src="VideoSrc"
enable-danmu controls enable-progress-gesture="false" :title="title"
@timeupdate="timeupdate" @ended="PlayEnd" @error="videoErrorCallback"
@pause = "VideoPause" @loadedmetadata="loadedmetadata"
@play="VideoPlay"
v-if="VideoSrc !=''"
>
</video>
</view>
</view>
</template>
<script>
let _this;
let TimeRule=null
export default {
data() {
return {
OldTime:0,
WatchTime:0,
title:'video',
inputValue: '',
BgUrl:this.$BaseImgServerUrl+'LrgMapVideoBg.jpg',
VideoSrc:'',
LangList:{},
FileType:0,
ImgSrc:'',
ImgHeight:'0rpx',
ImgUpdateStatus:true,
LearnTime:0,
IsOpenFile:false,
Time:0,
LearingStatus:'',
NowVideoTime:0, //当下视频学习的时间点
// VideoStatus:0, //视频状态,进入画面无播放为0,不记录
LastVideoTime:0 ,//上一次视频学习的时间点
SuccessStatus:0 ,//视频是否已完成
ServerTime:'',
MapID:'',
LoadVideo:false, //视频是否已经加载
TimingNum:0
}
},
beforeCreate() {
},
async onLoad(e){
this.VideoSrc = 'https://cam.crystal-yida.cn/CRDCWebAPI/UploadFile/Courseware/78BCB3AE66A24EE9AB96697FFA4D560C.mp4'
this.$nextTick(function(){
this.context = uni.createVideoContext("myVideo", this)
})
},
methods: {
loadedmetadata(e){
console.log("视频开始播放")
console.log(e)
this.LearnTime= Math.round(e.detail.duration)
if(Number(this.LastVideoTime)!=0){
this.context.seek(Number(this.LastVideoTime))
}
this.LoadVideo=true
},
//当视频开始播放时触发
VideoPlay(e){
console.log("视频开始播放")
console.log(e)
},
//视频暂停
VideoPause(e){
},
//视频播放出错
videoErrorCallback: function (e) {
console.log("视频加载失败")
console.log(e)
},
//播放进度发生变化
timeupdate(e){
console.log("timeupdate")
this.NowVideoTime=Math.round(e.detail.currentTime)
if(this.LearingStatus=='0'){
return
}
let NowTime=Math.round(e.detail.currentTime)
if(NowTime-this.OldTime>1 && NowTime>this.WatchTime ){
this.context.seek(this.OldTime)
return
}
this.OldTime = NowTime
if(NowTime>this.WatchTime){
this.WatchTime=NowTime
}
},
//视频播放结束
PlayEnd(e){
console.log("End")
this.SuccessStatus=1
this.context.seek(0)
}
},
onShow() {
},
onUnload() {
},
onHide() {
}
}
</script>
<style>
@import url("LRG0134");
</style>
<template>
<view>
<view class="page-section" >
<video class="VideoCss" id="myVideo" :src="VideoSrc"
enable-danmu controls enable-progress-gesture="false" :title="title"
@timeupdate="timeupdate" @ended="PlayEnd" @error="videoErrorCallback"
@pause = "VideoPause" @loadedmetadata="loadedmetadata"
@play="VideoPlay"
v-if="VideoSrc !=''"
>
</video>
</view>
</view>
</template>
<script>
let _this;
let TimeRule=null
export default {
data() {
return {
OldTime:0,
WatchTime:0,
title:'video',
inputValue: '',
BgUrl:this.$BaseImgServerUrl+'LrgMapVideoBg.jpg',
VideoSrc:'',
LangList:{},
FileType:0,
ImgSrc:'',
ImgHeight:'0rpx',
ImgUpdateStatus:true,
LearnTime:0,
IsOpenFile:false,
Time:0,
LearingStatus:'',
NowVideoTime:0, //当下视频学习的时间点
// VideoStatus:0, //视频状态,进入画面无播放为0,不记录
LastVideoTime:0 ,//上一次视频学习的时间点
SuccessStatus:0 ,//视频是否已完成
ServerTime:'',
MapID:'',
LoadVideo:false, //视频是否已经加载
TimingNum:0
}
},
beforeCreate() {
},
async onLoad(e){
this.VideoSrc = 'https://cam.crystal-yida.cn/CRDCWebAPI/UploadFile/Courseware/78BCB3AE66A24EE9AB96697FFA4D560C.mp4'
this.$nextTick(function(){
this.context = uni.createVideoContext("myVideo", this)
})
},
methods: {
loadedmetadata(e){
console.log("视频开始播放")
console.log(e)
this.LearnTime= Math.round(e.detail.duration)
if(Number(this.LastVideoTime)!=0){
this.context.seek(Number(this.LastVideoTime))
}
this.LoadVideo=true
},
//当视频开始播放时触发
VideoPlay(e){
console.log("视频开始播放")
console.log(e)
},
//视频暂停
VideoPause(e){
},
//视频播放出错
videoErrorCallback: function (e) {
console.log("视频加载失败")
console.log(e)
},
//播放进度发生变化
timeupdate(e){
console.log("timeupdate")
this.NowVideoTime=Math.round(e.detail.currentTime)
if(this.LearingStatus=='0'){
return
}
let NowTime=Math.round(e.detail.currentTime)
if(NowTime-this.OldTime>1 && NowTime>this.WatchTime ){
this.context.seek(this.OldTime)
return
}
this.OldTime = NowTime
if(NowTime>this.WatchTime){
this.WatchTime=NowTime
}
},
//视频播放结束
PlayEnd(e){
console.log("End")
this.SuccessStatus=1
this.context.seek(0)
}
},
onShow() {
},
onUnload() {
},
onHide() {
}
}
</script>
<style>
@import url("LRG0134");
</style>
操作步骤:
Android 系统 小米11 进入页面,点击播放;
IOS 系统 iPnoneX:
1.进入页面,点击播放;
2.拖拉底部进度条使其快进;
Android 系统 小米11 进入页面,点击播放;
IOS 系统 iPnoneX:
1.进入页面,点击播放;
2.拖拉底部进度条使其快进;
预期结果:
Android 系统 小米11 正常播放;
IOS 系统 iPnoneX:
1.播放正常,触发loadedmetadata函数,正常运行代码内方法;
loadedmetadata(e){
console.log("视频开始播放")
console.log(e)
this.LearnTime= Math.round(e.detail.duration)
if(Number(this.LastVideoTime)!=0){
this.context.seek(Number(this.LastVideoTime))
}
this.LoadVideo=true
}
2.快进触发timeupdate函数,检测是否当前播放时间点是否与上一时间点差距超过1秒,超过跳回上一时间点;
timeupdate(e){
console.log("timeupdate")
this.NowVideoTime=Math.round(e.detail.currentTime)
if(this.LearingStatus=='0'){
return
}
let NowTime=Math.round(e.detail.currentTime)
if(NowTime-this.OldTime>1 && NowTime>this.WatchTime ){
this.context.seek(this.OldTime)
return
}
this.OldTime = NowTime
if(NowTime>this.WatchTime){
this.WatchTime=NowTime
}
}
Android 系统 小米11 正常播放;
IOS 系统 iPnoneX:
1.播放正常,触发loadedmetadata函数,正常运行代码内方法;
loadedmetadata(e){
console.log("视频开始播放")
console.log(e)
this.LearnTime= Math.round(e.detail.duration)
if(Number(this.LastVideoTime)!=0){
this.context.seek(Number(this.LastVideoTime))
}
this.LoadVideo=true
}
2.快进触发timeupdate函数,检测是否当前播放时间点是否与上一时间点差距超过1秒,超过跳回上一时间点;
timeupdate(e){
console.log("timeupdate")
this.NowVideoTime=Math.round(e.detail.currentTime)
if(this.LearingStatus=='0'){
return
}
let NowTime=Math.round(e.detail.currentTime)
if(NowTime-this.OldTime>1 && NowTime>this.WatchTime ){
this.context.seek(this.OldTime)
return
}
this.OldTime = NowTime
if(NowTime>this.WatchTime){
this.WatchTime=NowTime
}
}
实际结果:
Android 系统 小米11 无法正常播放视频;
IOS 系统 iPnoneX:
1.正常播放,当无法触发loadedmetadata(e)函数;
2.拖拉快进后,拖拉超一秒,视频内容已跳转至拖拉前的时间点,但是底部进度条无法正常显示时间点,timeupdate函数的触发频率变低。
Android 系统 小米11 无法正常播放视频;
IOS 系统 iPnoneX:
1.正常播放,当无法触发loadedmetadata(e)函数;
2.拖拉快进后,拖拉超一秒,视频内容已跳转至拖拉前的时间点,但是底部进度条无法正常显示时间点,timeupdate函数的触发频率变低。
bug描述:
Android 版错误 测试手机 小米 11
无法播放视频
IOS 版错误 测试手机 iPnone X
video 组件内的方法loadedmetadata()无效
拖拉进度条快进。使其在timeupdate()方法内使用seek()跳转后 底部进度条无法跳转至对应时间点, timeupdate 触发频率由原来的 205ms一次 变为 几秒一次
8***@qq.com (作者)
好的,非常感谢您的答复,另外请您确认一下 Android 11 播放视频的问题,App测试中除了手机版本为 Android 11 会出现播放视频错误外,其它版本的手机均能正常播放视频。
2021-01-14 09:03
DCloud_UNI_Anne
回复 8***@qq.com: Android 11播放视频错误具体指什么?请详细描述,另外用你小米 11手机,试下hello uni-app里面的视频,是否会复现您说的问题,不能的话你需要排查出来具体你哪个页面,甚至哪一行导致的。
2021-01-14 11:12