js获取非mp4格式时长

Question

问题遇到的现象和发生背景
Vue获取视频文件的时长
网上搜索出来的结果大多是这个使用 new Audio（） 返回HTMLAudioElement ，再获取其时长。

我想要达到的结果
使用这个方法确实能实现，但是只能获取到mp4格式的视频长度。avi、ts等其他格式获取不到

Answer 1

【以下回答由 GPT 生成】

如何在Vue.js中获取非mp4格式视频的时长？

这个问题需要使用一些第三方库来获取非mp4格式视频的时长。下面是一种可能的解决方案：

1. 安装ffmpeg：使用ffmpeg可以获取视频的时长信息。你可以根据操作系统的不同，选择合适的安装方式。可以通过以下命令验证是否安装成功：ffmpeg -version。

2. 安装依赖：为了在Vue.js中使用ffmpeg，我们需要安装fluent-ffmpeg和@ffmpeg-installer/ffmpeg这两个库。在终端中执行以下命令：

npm install fluent-ffmpeg @ffmpeg-installer/ffmpeg

1. 创建一个工具类：在Vue.js中创建一个DurationUtils.js文件，用来封装获取视频时长的方法。

import ffmpeg from 'fluent-ffmpeg';

export default {
  getVideoDuration(videoPath) {
    return new Promise((resolve, reject) => {
      ffmpeg.ffprobe(videoPath, (err, metadata) => {
        if (err) {
          reject(err);
        } else {
          const durationInSeconds = metadata.format.duration;
          resolve(durationInSeconds);
        }
      });
    });
  }
}

1. 在Vue组件中使用工具类：假设你有一个VideoComponent.vue组件，需要获取视频时长。你需要在这个组件中引入DurationUtils.js和视频文件路径，然后调用工具类的方法来获取视频时长。

<template>
  <div>
    <video ref="videoPlayer" controls>
      <source :src="videoPath" type="video/avi">
    </video>
    <p>视频时长：{{ videoDuration }}</p>
  </div>
</template>

<script>
import DurationUtils from './DurationUtils.js';

export default {
  data() {
    return {
      videoPath: '/path/to/your/video.avi',
      videoDuration: null
    };
  },
  mounted() {
    const videoElement = this.$refs.videoPlayer;
    videoElement.addEventListener('loadedmetadata', () => {
      DurationUtils.getVideoDuration(this.videoPath)
        .then(duration => {
          this.videoDuration = duration;
        })
        .catch(error => {
          console.error(error);
        });
    });
  }
}
</script>

这样，在Vue.js中就可以获取非mp4格式视频的时长了。如果你使用了其他格式，只需将<source>标签中的type属性改成对应的视频格式。

需要注意的是，这个解决方案需要安装ffmpeg并调用命令行 ffprobe 方法来获取视频时长，因此可能对服务器资源有一定需求。如果你的服务器资源有限或者有其他限制，可能需要考虑其他解决方案。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^