Vue项目中解决<video>标签duration获取异常问题

"在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元素。