vue3中播放flv流视频，以及组件封装超全

实现以上功能的播放，只需要传入一个流的地址即可，当然组件也只有简单的实时播放功能

下面直接上组件

里面的flvjs通过npm i flv.js直接下载 

<template>
    <div class="player" style="position: relative;">
        <p style="position: absolute !important;top: 10px;left: 20px;">通道{
  { title }}</p>
        <img src="@/assets/img/videostop.png" alt="" class="centeredVideo" v-show="url == ''">
        <video  v-show="url" ref="videoElement" class="centeredVideo" controls autoplay
            muted></video>
    </div>
</template>

<script>

import flvjs from "flv.js";  //引入flv
export default {
    props: {
        title: {
            type: String,
            default: ''
        },
        url: {
            type: String,
            default: ''
        },
    },
    data() {
        return {
            flvPlayer: null,
            // src: ["http://172.21.1.111/live?port=1935&app=myapp&stream=streamname"],
        };
    },
    mounted() {
        this.flv_load(this.url);
    },
    methods: {
        flv_load(url) {
            if (flvjs.isSupported()) {
                let videoElement = this.$refs.videoElement;
                this.flvPlayer = flvjs.createPlayer(
                    {
                        type: "flv", //媒体类型
                        url: url || '', //flv格式媒体URL
                        isLive: true, //数据源是否为直播流
                        hasAudio: false, //数据源是否包含有音频
                        hasVideo: true, //数据源是否包含有视频
                        enableStashBuffer: false, //是否启用缓存区