问题1:需求重现:做一个视频答题功能,到时指定时间,问题弹出,视频暂停,回答正确继续播放,视频继续播放,弹窗消失、否则回到指定时间位置...
- 当前 Bug 的表现(可附上截图)
1.弹出问题,执行视频暂停pause()
2.此时已执行暂停,程序也并未继续其他事件
3.问题回答正确后,视频状态虽是暂停(1,2),但是视频声音仍在继续,点击暂停按钮是点不动(有种卡住的感觉),除非拖动
弹出问题后,视频执行了暂停时间,控制台也没有继续执行(bindtimeupdate)事件,此时视频声音仍在继续,回答正确继续播放时(此时加上videoContext.play()),视频样式仍然处在暂停状态,声音继续,此时暂停按钮点不了,只有拖动进度条后才恢复正常播放,目前只在IOS6、6plus上、vivox9s、小米note上有过测试,IOS上能正常运行,安卓机上就会出现上述问题
- 预期表现
问题弹出后,视频状态、声音都暂停、执行play()后状态和声音继续
- 复现路径
- 提供一个最简复现 Demo
刚试了在全屏下,到了指定时间后,问题弹窗不显示,视频状态、进度条为暂停,视频声音仍未停止
<
view
wx:if
=
"{{answerShow}}"
class
=
"consultModel"
>
<
view
class
=
"answerBox"
>
<
scroll-view scroll-y style="max-height: 600rpx;min-height: 500rpx;margin-bottom:60rpx"
>内容</
scroll-view
>
</
view
>
</
view
>
data(){
return{
answerShow: false, //答题弹窗
}
}
.consultModel{
position
:
fixed
;
z-index
:
1011
;
top
:
0
;
right
:
0
;
left
:
0
;
bottom
:
0
;
opacity:
1
;
background
:rgba(
0
,
0
,
0
,
0.2
);
}
.answerBox{
position:fixed;
top:50%;
left:50%;
transform: translate(-50%,-50%);
width: 672rpx;
min-height: 736rpx;
padding: 60rpx 20rpx 60rpx 60rpx;
background-color:#fff;
box-sizing:border-box;
border-radius: 10px;
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2);
box-sizing: border-box
}
请具体描述问题出现的流程,并提供能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。
产品需求:
一个视频可能会有多个问题,每个问题都有一个指定弹窗时间,播放中根据指定的不同时间节点触发问题弹窗,此时视频需要暂停,回答错误后通过seek(time-5)倒退到当前时间节点前5s直到回答正确视频才继续播放,回答正确视频继续播放
注:我们的视频播放是会记录用户上次观看的进度,再次进入视频播放页会定位到上次观看位置
问题复现:
到了指定时间点,触发问题弹窗后,程序执行videoContext.pause()暂停视频播放,虽然程序并没有继续往下执行,但是视频声音仍在继续(目前该bug只在安卓机上能复现)
上次视频观看进度条已超过指定问题时间点,进入播放页时,弹窗因已超指定时间&没答完题会触发,虽然程序并没有继续往下执行,视频状态为暂停,但是视频声音仍在继续
全屏模式下,无法弹出视频弹窗,虽然程序并没有继续往下执行,视频状态为暂停,但是视频声音仍在继续
代码有点多,见谅,麻烦帮我看看是怎么回事,谢谢了!
data() {
return {
hasDone: 0,
lastCurrentTime: 20,
answerIndex:0,
answerList:[
{
"vid": "ffbcc00f996171a95bee3204298e2075_f",
"question": "问题1",
"wrong_jump_to_second": -1, //回答错误后跳回到第几秒,-1 指不退回
"options": [
{
"answer": "A1", //选项文本描述
"right_answer": 0, //是否正确答案
"answer_val": 1, //答案的值
"checked":0
}
],
"multiple": 0, //是否多选
"show_time_second": 61, //视频第几秒展示
"has_done": 0, //用户是否已完成此题目
},
{
"vid": "ffbcc00f996171a95bee3204298e2075_f",
"question": "问题2",
"wrong_jump_to_second": -1, //回答错误后跳回到第几秒,-1 指不退回
"options": [
{
"answer": "A2", //选项文本描述
"right_answer": 0, //是否正确答案
"answer_val": 1, //答案的值
"checked":0
}
],
"multiple": 0, //是否多选
"show_time_second": 61, //视频第几秒展示
"has_done": 0, //用户是否已完成此题目
}
]
}
}
onReady: function(res) {
this.videoContext = wx.createVideoContext('polyvVideo'); //创建播放器
},
//单选
radioChange: function(e) {
let _ = this;
this.setData({
answerItem: e.detail.value
})
},
videoIsPlay(e) {
console.log('----videoIsPlay---')
let _ = this
setTimeout(()=>{
_.videoContext.playbackRate(_.data.currentPlayRate);
},300)
},
/*更新视频播放进度*/
timeUpdate: function (e) {
let _ = this
console.log('视频播放进度变化123')
let has_done = _.data.answerList[_.data.answerIndex].has_done
let show_time = _.data.answerList[_.data.answerIndex].show_time_second
let play_time = e.detail.currentTime
if (_.data.hasDone) {
console.log('暂停1')
_.setData({
answerShow: false
})
return
}
// 不满足答题时间
if ((play_time < show_time)) {
_.setData({
answerShow: false
})
return
}
// 满足答题时间 & 未答完
if ((play_time >= show_time) && !has_done) {
console.log('暂停211')
_.setData({
answerShow: true
})
//暂停
_.videoContext.pause();
return
}
},
videoIsPause(e) {
let _ = this
console.log('视频播放状态变化222')
console.log(e)
},
//当前视频播放完毕回调
i_videoOnStop(e) {
let _ = this
let has_done = _.data.answerList[_.data.answerIndex].has_done
console.log('视频结束播放')
_.setData({
is_video_end: true
})
if (_.data.hasDone) {
_.setData({
answerShow: false,
answerItem: [],
})
return
}
if(!has_done){
console.log('结束的暂停')
_.setData({
answerShow: true,
answerItem:[],
})
console.log('再次暂停')
_.videoContext.pause()
return
}
},
videoIsError(e) {
wx.showToast({
icon: 'none',
title: '播放出错,解码错误',
})
},
// 提交答案
answerSubmit: function(e){
let _ = this
let show_time_second = parseInt(e.currentTarget.dataset.time - 5)
_.setData({
submitStatus: !_.data.submitStatus,
})
if(_.data.answerItem){
wx.showToast({
title:'回答正确',
icon:'success'
})
if(_.data.answerIndex == parseInt(_.data.answerList.length - 1)){
console.log('最后一题')
_.setData({
hasDone: 1,
answerShow: false
})
return
}
if(_.data.answerIndex < parseInt(_.data.answerList.length - 1)){
_.setData({
answerItem:[],
answerIndex: _.data.answerIndex+=1,
})
return
}
if(!_.data.is_video_end){
_.videoContext.play()
}
return
}else{
_.setData({
answerItem:[],
answerShow: false
})
wx.showToast({
icon: 'none',
title: '回答错误',
})
_.videoContext.pause()
_.videoContext.seek(show_time_second)
_.videoContext.play()
}
},
麻烦按照提示提供一下相关的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)