收藏
回答

使用video组件安卓机上暂停失效,播放状态是对的,但是声音仍在继续

问题模块 框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
API和组件 小程序 Bug video 客户端 Version 7.0.3 2.6.2

问题1:需求重现:做一个视频答题功能,到时指定时间,问题弹出视频暂停,回答正确继续播放,视频继续播放,弹窗消失、否则回到指定时间位置...

- 当前 Bug 的表现(可附上截图)

1.弹出问题,执行视频暂停pause()


2.此时已执行暂停,程序也并未继续其他事件


3.问题回答正确后,视频状态虽是暂停(1,2),但是视频声音仍在继续,点击暂停按钮是点不动(有种卡住的感觉),除非拖动


弹出问题后,视频执行了暂停时间,控制台也没有继续执行(bindtimeupdate)事件,此时视频声音仍在继续,回答正确继续播放时(此时加上videoContext.play()),视频样式仍然处在暂停状态声音继续,此时暂停按钮点不了只有拖动进度条后才恢复正常播放,目前只在IOS6、6plus上、vivox9s、小米note上有过测试,IOS上能正常运行,安卓机上就会出现上述问题

- 预期表现

问题弹出后,视频状态、声音都暂停、执行play()后状态和声音继续

- 复现路径


- 提供一个最简复现 Demo


最后一次编辑于  03-18  (未经腾讯允许,不得转载)
回答关注问题邀请回答
收藏

2 个回答

  • 社区技术运营专员-白柿子
    社区技术运营专员-白柿子
    03-18

    请具体描述问题出现的流程,并提供能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。

    03-18
    赞同
    回复 3
    • 
      03-18

      产品需求:

      一个视频可能会有多个问题,每个问题都有一个指定弹窗时间,播放中根据指定的不同时间节点触发问题弹窗,此时视频需要暂停,回答错误后通过seek(time-5)倒退到当前时间节点前5s直到回答正确视频才继续播放,回答正确视频继续播放

      注:我们的视频播放是会记录用户上次观看的进度,再次进入视频播放页会定位到上次观看位置

      问题复现:

      1. 到了指定时间点,触发问题弹窗后,程序执行videoContext.pause()暂停视频播放,虽然程序并没有继续往下执行,但是视频声音仍在继续(目前该bug只在安卓机上能复现)

      2. 上次视频观看进度条已超过指定问题时间点,进入播放页时,弹窗因已超指定时间&没答完题会触发,虽然程序并没有继续往下执行,视频状态为暂停,但是视频声音仍在继续

      3. 全屏模式下,无法弹出视频弹窗,虽然程序并没有继续往下执行,视频状态为暂停,但是视频声音仍在继续


      03-18
      回复
    • 
      03-18

      代码有点多,见谅,麻烦帮我看看是怎么回事,谢谢了!

      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()

      }

      },


      03-18
      回复
    • 社区技术运营专员-白柿子
      社区技术运营专员-白柿子
      03-18回复

      麻烦按照提示提供一下相关的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html

      03-18
      回复
  • 
    03-18

    刚试了在全屏下,到了指定时间后,问题弹窗不显示,视频状态、进度条为暂停,视频声音仍未停止

    <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

    }




    03-18
    赞同
    回复 1
    • 半度誓言
      半度誓言
      08-07
      楼主问题解决了吗
      08-07
      回复