vue2获取视频时长
-
使用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>