flv.js使用记录

目前主流浏览器不能直接嵌入并且播放FLV文件，所以在网上找到开源插件flv.js并封装组件以便使用
首先创建vue插件，在mounted的时候使用$nextTick创建flvPlayer对象
然后监听url防止url未获取就初始化

<template><videoclass="video-component"ref="videoElement"controlsautoplay>当前浏览器不支持HTML5 video。</video>
</template>
<script>
import flvjs from "flv.js";export default {name: "FVideo",props: {types: {type: String,default: "flv"},url: {types: String,default: ""}},data() {return {flvPlayer: null};},watch: {url() {if (this.flvPlayer) {this.flvPlayer.detachMediaElement();this.flvPlayer.destroy();}this.createVideo();}},mounted() {this.$nextTick(() => {this.createVideo();});},methods: {createVideo() {const videoElement = this.$refs.videoElement;this.flvPlayer = flvjs.createPlayer({type: this.types,url: this.url});this.flvPlayer.attachMediaElement(videoElement);try {this.flvPlayer.load();this.flvPlayer.play();} catch (error) {console.error(error);}}}
};
</script><style scoped>
.video-component {width: 100%;max-height: 100%;
}
</style>

最后使用插件即可

<FVideo v-if="url" :url="url" types="flv" autoplay playsinline controls class="fvideo" />