解决:移动端H5的<video>初始化拿不到总时长

移动端

在<video>的初始化后,会调用如下事件。

@canplay="canplay"

解决方案:<video>添加自动播放属性:

autoplay="autoplay"

然后这个方法里,用js在0.01秒后主动关闭播放,接着在0.1秒之后获取视频总长度即可(这里用0.01秒有几率失败)。

这样连视频的预览图都省了,哈哈哈😁😁😁😁😁。。。。

    canplay() {
      this.getSize();
      //表示视频已经加载好了
      //这可以获取视频真是高度和宽度,
      console.log("视频已准备好了,可以播放,宽度:" + this.videoWidth + ",高度:" + this.videoHeight)
      setTimeout(()=>{
        this.playPause();
        setTimeout(()=>{
          this.getSize();
        },100);
      },10);

    },

pc端

pc端<video>的监听事件没什么问题,一共有这么多种监听事件。

 <video ref="video"
           controls
           autoplay="autoplay"
           @loadedmetadata="loadedmetadata"
           @canplay="canplay"
           @waiting="waiting"
           @timeupdate="timeupdate"
           @play="play"
           @pause="pause"
           @ended="ended"
    >   

    canplay() {
      //表示视频已经加载好了
      //这可以获取视频真是高度和宽度,
    },
    waiting() {//转圈的时候才会调用,秒加载好像不会触发
      console.log("加载中");
    },
    loadedmetadata() {
      this.totalTime = this.$refs.video.duration;
      console.log("获取视频总时间长度:" + this.formatTime(this.totalTime));
    },

    play() {
      this.displayStatus = true;
      console.log("开始播放");
    },
    pause() {
      console.log("暂停播放");
      this.displayStatus = false;
    },
    ended() {
      console.log("播放结束");
    },
    timeupdate() { //播放的时间戳更新
      this.nowTime = this.$refs.video.currentTime
      this.totalTime = this.$refs.video.duration
    },

    this.$refs.video.onloadstart =(e)=> {
      //在浏览器开始寻找指定视频/音频(audio/video)触发

      console.log("onloadstart",e)
    }
    this.$refs.video.onprogress =(e)=> {
      //在浏览器下载指定的视频/音频(audio/video)时触发
      console.log("onprogress",e)
    }
    this.$refs.video.ondurationchange =(e)=> {
      //事件在视频/音频(audio/video)的时长发生变化时触发
      console.log("ondurationchange",e)
    }
    this.$refs.video.onloadeddata =(e)=> {
      //事件在当前帧的数据加载完成且还没有足够的数据播放视频/音频(audio/video)的下一帧时触发
      console.log("onloadeddata",e)
    }
    this.$refs.video.oncanplaythrough =(e)=> {
      //可以正常播放且无需停顿和缓冲时触发
      console.log("oncanplaythrough",e)
    }

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值