在vue项目中获取标签duration属性值为NaN或者undefined

出现的问题

在vue项目中获取<video>的duration属性值的方式有很多，但是在某些特定的方式下去获取duration的值可能会出现NaN或者undefined的情况。

下面会列出获取duration的方式及注意事项

获取duration的方式及注意事项

方式一：

使用@绑定canplay事件

页面组件代码：

<template>
	<div>
    	<video
      		id="video"
      		src="videoURL"
      		style="width: 400px"
			@canplay="getVidDur()"
    	></video>
    </div>
</template>

<script>
import {video} from "videoFileUrl"//导入调用的方法
export default {
  name: "Video",
  methods: {
    getVidDur() {
      video();
    },
  },
};
</script>

自定义的获取duration的方法（js文件）：

使用javascript语法获取

export var video = () => {
    var videoTime = document.getElementById("video");
    console.log(videoTime.duration);
}

使用Jq方式获取

以下是错误的方式：会出现undefined的情况

export var video = () => {
    var myVid = $("#video");
    console.log(myVid.duration);
}

错误的原因：在浏览器的控制台打印myVideoconsole.log(muVideo)

我们会发现使用jq方式myVideo对象是一个数组，那么现在我们知道myVideo是一个数组了，获取数组下的值就很简单了。

正确的方式：

export var video = () => {
    var myVid = $("#video");
    console.log(myVid[0].duration);
}

方式二：

使用生命周期mounted钩子函数

先说明一下会出现的情况：

• 使用js方式console.log(videoTime.duration)获取：在控制台打印会出现NaN。**原因:**暂时不明，望高人指点迷津，鄙人将感激不尽！（有网友只说明：在dom挂在完成后直接获取会为NaN,原因无。）
• 使用jq方式console.log(myVideo.duration)获取：在控制台打印会出现undefined。**原因：**同方法一中的jq错误方式。
• 以上两种直接获取的方式需要配合一个函数使用，在这里作者配合使用的是canplay事件并调用函数

页面组件代码：

<template>
	<div>
    	<video
      		id="video"
      		src="videoURL"
      		style="width: 400px"
    	></video>
    </div>
</template>

<script>
import {video} from "videoUrl"//导入调用的方法
export default {
  name: "Video",
  methods: {
    getVidDur() {
      video();
    },
  },
  mounted() {
    this.getVidDur();
  },
};
</script>

使用javascript方式获取：

export var video = () => {
    var videoTime = document.getElementById("video");
    
    videoTime.oncanplay=function(){
        console.log(videoTime.duration);
    }
}

使用jq方式获取：

export var video = () => {
    var myVid = $("#video");
    
    myVid[0].oncanplay = function () {
        console.log(myVid[0].duration);
    }
}

最后： 如有其它更好的见解，还望高手可以在评论区留言。