vue2获取视频时长

然后，在你的Vue组件中，你可以这样使用hls.js来获取视频长度：使用HTML5的video标签和JavaScript：

<template>
  <video ref="video" autoplay controls loop muted @loadedmetadata="getVideoDuration">
    <source src="http://***issp.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>

vue2怎么获取m3u8格式的视频长度
在Vue 2中，要获取m3u8格式视频的长度，通常需要使用JavaScript库来解析m3u8文件并获取相关信息。一个常用的库是hls.js，它能够处理HLS格式的视频流。首先，你需要在项目中安装hls.js：
```
npm install hls.js --save
```
然后，在你的Vue组件中，你可以这样使用hls.js来获取视频长度：

<template>
  <div>
    <video ref="video" controls></video>
  </div>
</template>
 
<script>
import Hls from 'hls.js';
 
export default {
  name: 'VideoPlayer',
  mounted() {
    const video = this.$refs.video;
 
    if (Hls.isSupported()) {
      const hls = new Hls();
      hls.loadSource('path/to/your/video.m3u8');
      hls.attachMedia(video);
      hls.on(Hls.Events.MANIFEST_PARSED, function() {
        video.play();
        const duration = video.duration;
        console.log('Video duration:', duration);
      });
    }
  }
};
</script>

在上面的代码中，hls.js首先检查浏览器是否支持HLS视频格式，如果支持，它会加载m3u8文件，然后绑定到<video>元素上。当manifest解析完成后，它会触发MANIFEST_PARSED事件，此时你可以通过访问video元素的duration属性来获取视频长度。

请注意，你需要将'path/to/your/video.m3u8'替换为你的m3u8视频文件的实际路径。此外，你可能需要在你的服务器上正确配置HLS视频流的传输，以确保hls.js能够正确加载和播放视频。

vue2获取视频时长

悦读