当前位置：首页 > news >正文

vue3中播放m3u8，附测试网址

news 2025/8/7 16:12:52

说明

关于m3u8的播放，网上有各种库供大家参考：

vue-video-player
videojs-contrib-hls
video.js
hls.js
xgplayer-hls（西瓜视频官方的）

如何选择

经小编测试，功能最强的就是hls.js了，同一个m3u8的地址，其他的库要么不能播放、要么就是速度慢，用hls.js基本是秒出，解析速度相当快
但是其他的几种库也各有优点，比如：

vue-video-player：支持多宫格播放（4宫格，9宫格）
xgplayer-hls：支持预览、超清、高清、标清、支持下载……

hls.js用法

预览地址（大家可用来测试m3u8）m3u8测试预览地址

/public文件夹下放入hls.min.js
在index.html中引入：

    <script type="text/javascript" src="/public/hls.min.js"></script>

示例组件vue3:

<template><div class="app-container"><div style="margin-bottom: 8px;"><el-input v-model="videoUrl" style="width: 70%;" /><el-button @click="playHLS(videoUrl)" style="margin-left: 8px;">播放</el-button></div><videoid="hls"width="1000"height="600"class="img-responsive video-js vjs-default-skin"controlspreload="auto":autoplay="true"mutedref="videoRef"></video></div>
</template><script setup>
import { ref, nextTick, onMounted, onBeforeUnmount } from "vue";const videoRef = ref()
const videoUrl = ref('https://devstreaming-cdn.apple.com/videos/streaming/examples/img_bipbop_adv_example_fmp4/master.m3u8')
let hlsPlayer
const playHLS = (url) => {const video = videoRef.value;if (typeof hlsPlayer !== "undefined") {if (hlsPlayer != null) {hlsPlayer.destroy();}}hlsPlayer = new Hls();hlsPlayer.loadSource(url);hlsPlayer.attachMedia(video);//将视频元素绑定到此 HLS 对象hlsPlayer.on(Hls.Events.MANIFEST_PARSED, function () {video.play();emit("changeIsPlay", true);});hlsPlayer.on(Hls.Events.ERROR, function (eventName, data) {if(data.fatal && data.type !=="networkError") {video.pause();emit("changeIsPlay", false);}});
};onBeforeUnmount(() => {if (typeof hlsPlayer!== "undefined") {hlsPlayer.destroy();}
})
</script>