使用video遇到的问题

1、bindplay回调在安卓手机的机型下无限触发

2、bindtimeupdate进度变化回调事件

该事件微信官方给的调用频率是250ms,但是在实际的开发中的触发频率并不是250ms

3、bindpause、bindended的触发时机

官网给的逻辑是:视频播放到结束,会调用暂停事件,再调用结束事件,但是在安卓手机播放结束并没有触发暂停事件

bindpause绑定的方法下不要写视频暂停

4、代码观看进度统计

进度变化时开启定时器,每5秒传递一下进度,视频暂停或者播放完成时

timeupdate(e) {
    this.setData({
      durationTime: e.detail.currentTime, //进度
    })
    if (!this.tiemer) {
      this.tiemer = setInterval(() => {
        this.setData({
          allTime: this.data.allTime+ 1
        })
        if (this.data.allTime% 5 == 0) {
           this.data.allTime? this.update(5):''  
        }
      }, 1000)
    }
},
ended() {
    console.log('结束播放')
    if (this.data.allTime) {
      this.data.isRouter != 1 ? this.update() : ''
      setTimeout(() => {
        if (this.tiemer) {
          this.setData({
            durationTime: '',
            allTime: 0,
          })
          clearInterval(this.tiemer)
          this.tiemer = ''
        }
        this.data.isRouter != 1 ? this.getList() : ''
      }, 500)
    }
},
update(secod) {
    if (!this.data.allTime) return
    let params = {
      id: this.data.list.id,
      percent: secod == 5 ? 5 : Math.round(this.data.allTime% 5),
      videoDuration: secod == 5 ? 5 : Math.round(this.data.allTime% 5),
    }
    app.api._post('/video/update', params).then(res => {
      console.log('update', res)
      console.log('更新完成')
    }).catch()
  },
<video objectFit="cover"
      id="videos" src="{{list.url ||''}}" poster="{{list.posterUrl}}"
      controls="{{controls}}" enable-danmu enable-progress-gesture="{{false}}" class="videos"
      show-center-play-btn="{{false}}" bindtimeupdate="timeupdate" bindended="ended" bindpause="pause"></video>

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

爱编程的小学究

愿你有所收获

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值