然后,在你的Vue组件中,你可以这样使用hls.js来获取视频长度:使用HTML5的video标签和JavaScript:
export default {
methods: {
getVideoDuration() {
const videoElement = this.$refs.video;
const duration = videoElement.duration;
console.log(duration);
}
}
}
使用Vue的@load事件:
export default {
data() {
return {
videoSource: "your_video_source",
};
},
methods: {
getVideoDuration() {
const videoElement = this.$refs.video;
const duration = videoElement.duration;
console.log(duration);
}
}
}
使用第三方库,如video.js:
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");
}
}
}
vue2怎么获取m3u8格式的视频长度
在Vue 2中,要获取m3u8格式视频的长度,通常需要使用JavaScript库来解析m3u8文件并获取相关信息。一个常用的库是hls.js,它能够处理HLS格式的视频流。首先,你需要在项目中安装hls.js:
npm install hls.js --save
然后,在你的Vue组件中,你可以这样使用hls.js来获取视频长度:
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);
});
}
}
};
在上面的代码中,hls.js首先检查浏览器是否支持HLS视频格式,如果支持,它会加载m3u8文件,然后绑定到
请注意,你需要将'path/to/your/video.m3u8'替换为你的m3u8视频文件的实际路径。此外,你可能需要在你的服务器上正确配置HLS视频流的传输,以确保hls.js能够正确加载和播放视频。