1.安装hls.js和flv.js
npm i hls.js flv.js
<template>
<div>
<video
controls
autoplay
loop
muted
preload="auto"
width="550"
ref="videoEl"
></video>
<el-button @click="playVideo(src)" type="primary">播放</el-button>
<el-button @click="stopVideo()" type="primary">停止播放</el-button>
</div>
</template>
<script>
import Hls from "hls.js";
import Flv from "flv.js";
export default {
data() {
return {
flvPlayer: null,
hls: null,
// src: "http://www.w3school.com.cn/i/movie.mp4",
// src: "https://live.video.weibocdn.com/848d6fd7-f77d-4315-aad8-097b89a8a19c_index.m3u8?ori=0&ps=1Cx9YB1mmR49jS&Expires=1713376596&ssig=ZLi1scc1Un&KID=unistore,video",
src: "https://pull-flv-l1.douyincdn.com/third/stream-403202739025739814_or4.flv?keeptime=00093a80&wsSecret=0cef314b5f0b58fe34bb2f89b2766b07&wsTime=6625d053",
};
},
methods: {
playVideo(src) {
if (src.includes(".m3u8")) {
if (Hls.isSupported()) {
this.hls = new Hls();
this.hls.loadSource(src);
this.hls.attachMedia(this.$refs.videoEl);
this.hls.on(Hls.Events.MANIFEST_PARSED, () => {
this.$refs.videoEl.play();
});
} else if (
this.$refs.videoEl.canPlayType("application/vnd.apple.mpegurl")
) {
this.$refs.videoEl.src = src;
this.$refs.videoEl.addEventListener("loadedmetadata", function () {
this.$refs.videoEl.play();
});
}
} else if (src.includes(".flv")) {
if (Flv.isSupported()) {
const flvPlayer = Flv.createPlayer({
type: "flv",
url: src,
});
flvPlayer.attachMediaElement(this.$refs.videoEl);
flvPlayer.load();
flvPlayer.play();
this.flvPlayer = flvPlayer;
}
} else if (src.includes(".mp4")) {
this.$refs.videoEl.src = src;
this.$refs.videoEl.play();
}
},
stopVideo() {
this.$refs.videoEl.pause();
if (this.flvPlayer) {
this.flvPlayer.pause();
}
},
},
};
</script>
<style lang="less" scoped>
</style>
标签:src,hls,M3U8,videoEl,refs,HLS,FLV,flv,flvPlayer
From: https://www.cnblogs.com/hxy--Tina/p/18160602