安装 flv.js
页面使用
<template>
<div class="box">
<div v-for="(item, index) in list" :key="index">
<video
:id="'video' + item.id"
style="width: 500px; height: 500px"
controls
autoplay
muted
></video>
</div>
</div>
</template>
<script>
//=> 引入flv.js
import flvjs from "flv.js";
export default {
deta() {
return {
//=> 后台反的视频流
list: [
{
src: "http://xxxxxxxxxxxxxx/flv/06030540A81DC5E0",
id: 0,
},
{
src: "http://xxxxxxxxxxxxxx/flv/06030540A81DC5E0",
id: 1,
},
{
src: "http://xxxxxxxxxxxxxx/flv/06030540A81DC5E0",
id: 2,
},
],
};
},
mounted() {
this.startPlay();
},
methods: {
//视频浏览
startPlay() {
this.list.forEach((item, index) => {
if (flvjs.isSupported()) {
let player = null;
let videoElement = document.getElementById("video" + index.id);
player = flvjs.createPlayer({
type: "flv", //=> 媒体类型 flv 或 mp4
isLive: true, //=> 是否为直播流
hasAudio: false, //=> 是否开启声音
url: item.src, //=> 视频流地址
});
player.attachMediaElement(videoElement); //=> 绑DOM
player.load();
player.play();
} else {
console.log("flvjs不支持");
}
});
},
},
};
</script>
以上就是实现的步骤和代码 有什么问题欢迎大家评论和指出！！！
