移动端

在<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)
    }

Logo

一站式 AI 云服务平台

更多推荐