flv.js是bilibili网站开源的使用纯JavaScript而不使用Flash编写的HTML5 Flash视频(FLV)播放器。
组件中使用
<template>
<div id="videoPage">
<!-- 通过 v-if 会移出 DOM 实现刷新部分组件 -->
<div v-if="loading">
<flv-video :item="item"></flv-video>
</div>
</div>
</template>
<script>
import flvVideo from "./flvVideo"
export default {
name: 'videoPage',
data () {
return {
item: {
camera_id: 'id',
flv_address: 'video_url'
},
loading: true,
}
},
components: {
flvVideo
},
}
</script>
引用
npm install flv.js
单独的组件部分
<template>
<div id="flvVideo">
<video :id="this.videoData.camera_id"
:style="'width: 100%; height:300px'"
controls
autoplay
muted></video>
</div>
</template>
<script>
//=> 引入flv.js
import flvjs from "flv.js";
export default {
name: 'flvVideo',
data () {
return {
videoData: {},
}
},
props: {
item: {
type: Object,
default: {}
},
},
watch: {
item: {
// 每个属性值发生变化就会调用这个函数
handler (newVal, oldVal) {
this.videoData = newVal
setTimeout(() => {
this.startPlay()
}, 1000)
},
// 立即处理 进入页面就触发
immediate: true,
// 深度监听 属性的变化
deep: true
}
},
methods: {
//视频浏览
startPlay () {
if (flvjs.isSupported()) {
let player = null;
let videoElement = document.getElementById(this.videoData.camera_id);
player = flvjs.createPlayer({
type: "flv", //=> 媒体类型 flv 或 mp4
isLive: true, //=> 是否为直播流
hasAudio: false, //=> 是否开启声音
url: this.videoData.flv_address, //=> 视频流地址
});
player.attachMediaElement(videoElement); //=> 绑DOM
player.load();
player.play();
} else {
console.log("flvjs不支持");
}
}
},
}
</script>
<style>
</style>