在vue项目中如何获取视频的时长

在Vue项目中获取视频时长可以通过以下步骤完成：

安装video.js

video.js是一个开源的web视频播放器库，它提供了很多方便的API，包括获取视频时长等功能。可以通过以下命令进行安装：

npm install video.js

嵌入视频

将视频嵌入Vue项目中，可以使用v-video组件。例如：

<video ref="video" v-video:loadedmetadata="onLoadedMetadata">
  <source src="./video.mp4" type="video/mp4">
</video>

其中，ref属性用于获取video元素的引用，v-video指令用于监听视频元数据加载完成事件，onLoadedMetadata是处理函数名。

获取视频时长

通过video.js提供的API，我们可以获得视频元数据和时长信息。只需在onLoadedMetadata函数中添加代码进行调用。

import videojs from 'video.js'

export default {
  methods: {
    onLoadedMetadata() {
      const player = videojs(this.$refs.video)
      const duration = player.duration()
      console.log(`视频时长为${duration}秒`)
    }
  }
}

代码解释：

1. 导入video.js库。
2. 在onLoadedMetadata函数中，通过this.$refs.video获取video元素引用。
3. 创建videojs播放器实例，并通过player.duration()函数获取视频时长信息。
4. 输出视频时长信息。

示例1

以下是一个简单的Vue单文件组件，通过上述方法获取视频时长并显示在页面中：

<template>
  <div>
    <h1>视频时长</h1>
    <p>视频1时长：{{ video1Duration }}</p>
    <p>视频2时长：{{ video2Duration }}</p>
    <video ref="video1" v-video:loadedmetadata="onLoadedMetadata('video1')">
      <source src="./video1.mp4" type="video/mp4">
    </video>
    <video ref="video2" v-video:loadedmetadata="onLoadedMetadata('video2')">
      <source src="./video2.mp4" type="video/mp4">
    </video>
  </div>
</template>

<script>
import videojs from 'video.js'

export default {
  data() {
    return {
      video1Duration: 0,
      video2Duration: 0
    }
  },
  methods: {
    onLoadedMetadata(videoName) {
      const player = videojs(this.$refs[videoName])
      const duration = player.duration()
      this[`${videoName}Duration`] = duration
    }
  }
}
</script>

代码解释：

1. 在data中声明了两个视频时长变量。
2. 在onLoadedMetadata函数中，通过传入视频名称参数，将视频时长信息绑定到对应的变量中。
3. 在模板中展示视频时长信息。

示例2

如果你不想安装video.js，也可以通过HTML5的video元素提供的API获取视频时长。以下是一个简单的Vue单文件组件，演示如何通过原生方法获取视频时长：

<template>
  <div>
    <h1>视频时长</h1>
    <p>视频时长：{{ videoDuration }}</p>
    <video ref="video" @loadedmetadata="onLoadedMetadata">
      <source src="./video.mp4" type="video/mp4">
    </video>
  </div>
</template>

<script>
export default {
  data() {
    return {
      videoDuration: 0
    }
  },
  methods: {
    onLoadedMetadata() {
      const duration = this.$refs.video.duration
      this.videoDuration = duration
    }
  }
}
</script>

代码解释：

1. 在data中声明了一个视频时长变量。
2. 在onLoadedMetadata函数中，通过this.$refs.video获取video元素，再获取视频时长信息。
3. 将视频时长信息绑定到变量中，在模板中展示。