"在Vue项目中，当尝试获取HTML5 `<video>`标签的`duration`属性时，可能会遇到返回值为NaN或undefined的问题。本文主要探讨这个问题并提供解决方案。"
在Vue.js应用中，我们经常需要操作HTML5的多媒体元素，如`<video>`标签，以实现视频播放功能。`duration`属性是`<video>`元素的一个重要属性，它表示视频的总时长。然而，在某些情况下，尝试获取`duration`时可能会得到意外的结果，如NaN（非数字）或undefined。
## 出现的问题
当尝试直接在Vue组件中或通过JavaScript获取`<video>`元素的`duration`时，可能由于以下原因导致无法正常获取：
1. 视频文件尚未加载完全。
2. 使用jQuery时，未正确处理返回的对象。
## 解决方案
### 方式一：使用@canplay事件
在Vue组件中，可以绑定`@canplay`事件来确保视频已经加载到足够播放的程度，此时`duration`属性应已初始化。在模板中，我们可以这样写：
```html
<template>
<div>
<video
id="video"
src="videoURL"
style="width:400px"
@canplay="getVidDur()"
></video>
</div>
</template>
```
然后在Vue组件的方法中调用相应函数：
```js
<script>
import { video } from "videoUrl"; // 导入调用的方法
export default {
name: "Video",
methods: {
getVidDur() {
video();
},
},
};
</script>
```
在自定义的JavaScript方法中，可以使用原生JavaScript获取`duration`：
```js
export var video = () => {
var videoTime = document.getElementById("video");
console.log(videoTime.duration);
};
```
### 使用jQuery时的注意事项
错误示例：直接使用jQuery选择器`$("#video")`获取`duration`将返回undefined。
```js
export var video = () => {
var myVid = $("#video");
console.log(myVid.duration);
};
```
这是因为在jQuery中，`$("#video")`返回的是一个jQuery对象数组，而不是DOM元素。因此，正确的做法是访问数组中的第一个元素（即实际的DOM元素）来获取`duration`：
```js
export var video = () => {
var myVid = $("#video");
console.log(myVid[0].duration);
};
```
总结，要正确获取`<video>`标签的`duration`属性，需确保视频已加载到可以播放的状态，并正确处理JavaScript和jQuery的选择器结果。在Vue项目中，推荐使用`@canplay`事件监听视频加载状态，同时确保在jQuery中正确访问DOM元素。
我的内容管理
展开
