移动端

在<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"controlsautoplay="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.currentTimethis.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)}