vue2获取视频时长

xingxingwuxin2024-07-21 14:08

使用HTML5的video标签和JavaScript：

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事件：

javascript 复制代码

<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：

javascript 复制代码

<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>