使用HTML5的video标签和JavaScript：

<template><video ref="video" autoplay controls loop muted @loadedmetadata="getVideoDuration"><source src="https://desktop-yikao.oss-cn-beijing.aliyuncs.com/avatar/kaissp.mp4" type="video/mp4"></video>
</template><script>
export default {methods: {getVideoDuration() {const videoElement = this.$refs.video;const duration = videoElement.duration;console.log(duration);}}
}
</script>

使用Vue的@load事件：

<template><video ref="video" @load="getVideoDuration" :src="videoSource"></video>
</template><script>
export default {data() {return {videoSource: "your_video_source",};},methods: {getVideoDuration() {const videoElement = this.$refs.video;const duration = videoElement.duration;console.log(duration);}}
}
</script>

使用第三方库，如video.js：

<template><video ref="video" class="video-js"></video>
</template><script>
import videojs from "video.js";
import "video.js/dist/video-js.css";export default {mounted() {this.initVideoPlayer();},methods: {initVideoPlayer() {const videoElement = this.$refs.video;const player = videojs(videoElement);player.on("loadedmetadata", () => {const duration = player.duration();console.log(duration);});player.src("your_video_source");}}
}
</script>