vue项目中flv格式的视频流播放

<template>
    <div class="livePlayerContainer">

        <!-- LivePlayer使用 -->
        <div class="livePlayerBox" style="position: relative">
            <!-- :aspect="'16:9'" -->
            <!-- custom-buttons="极速/流畅, 拉伸/标准" -->
            <!-- :custom-buttons="getVideoLcd" -->
            
            <LivePlayer ref="player"
                        :videoTitle="titleValue"
                        :videoUrl="getFlvURL" 
                        live
                        aspect='fullscreen'
                        :loading="true"
                        :stretch="true"
                        :show-custom-button="true"
                        :resolution="'yh,hd,sd'"
                        @message="message"
                        @error="error"
                        @ended="ended"
                        @timeupdate="timeupdate"
                        @pause="pause"
                        @play="play" 
                        @fullscreen="fullscreen" 
                        @snapOutside="snapOutside"
                        @snapInside="snapInside"
                        @customButtons="customButtons" />
        </div>

        <!-- 外部按钮调用事件 -->
        <div style="display:flex;justify-content:space-between" v-if="false">
            <el-button type="success" @click="customPause">暂停</el-button>
            <el-button type="success" @click="customPlay">播放</el-button>
            <el-button type="success" @click="customSnap">截图数据</el-button>
            <el-button type="success" @click="destoryLivePlayer">销毁直播流</el-button>
        </div>
       
    </div>
</template>

<script>
import LivePlayer from '@liveqing/liveplayer'
export default {
    name: 'liveplayer',
    components: {
        LivePlayer
    },
    props: {
        sources:{
            type: [Array,String],
            required: true
        },
        title:{
            type: String,
            default:'直播流标题'
        },
        uniqueKey:{
            type: Number,
            default:-1
        }
    },
    data(){
        return {
            flvURL:null,
            changeVideoLcd:'高清'
        }
    },
    watch:{
        sources:{
            handler(nv,ov){
                if(nv){
                    let type = Array.isArray(nv)
                    switch(type){
                        case true:
                            this.flvURL = nv[0].url
                            break;
                        default:
                            this.flvURL = nv
                            break;
                    }
                   
                }
            },
            immediate:true,
            deep:true
        }
    },
    computed: {
        getFlvURL:{
            get() {
                return this.flvURL;
            },
            set(newValue) {
               console.log('newValue',newValue)
            }
            // return `${location.protocol}//${location.host}/video.flv`
        },
        getVideoLcd() {
            return this.changeVideoLcd;
        },
        titleValue() {
            return this.title;
        }
    },
    methods: {
        changeSource(){
            if(this.sources&&Array.isArray(this.sources)&&this.sources.length>1){
                if(this.changeVideoLcd=='高清'){
                    this.changeVideoLcd=='流畅'
                    this.flvURL = this.sources[1].url
                } else {
                    this.changeVideoLcd=='高清'
                    this.flvURL = this.sources[0].url
                }
            }
            
        },
        // 用户自定义点击
        destoryLivePlayer(){
            this.flvURL = null;
        },
        customPause() {
            console.log('外部调用暂停')
            this.$refs.player.pause()
        },
        customPlay() {
            console.log('外部调用播放')
            this.$refs.player.play()
        },
        customSnap() {
            console.log('外部调用快照')
            this.$refs.player.snap();
        },
        // 原本的事件
        error(error){
            // console.log('播放器出错回调',error)
        },
        message(message){
            console.log('m3u8 加载失败时触发通知消息',message)
        },
        timeupdate(timeupdate){
            // console.log('当前时间进度',timeupdate)
        },
        ended(){
            // console.log('播放结束')
        },
        pause(timestamp) {
            // console.log('暂停,参数：当前时间进度',timestamp)
        },
        play(timestamp) {
            // console.log('播放,参数：当前时间进度',timestamp)
        },
        fullscreen(flag) {
            // console.log('全屏状态',flag)
        },
        snapOutside(snapOutside) {
            // console.log('外部快照回调, 参数: 快照 Base64 数据',snapOutside)
        },
        snapInside(snapInside) {
            // console.log('内部快照回调, 参数: 快照 Base64 数据',snapInside)
        },
        customButtons(customButtons) {
            if(customButtons=='高清'||customButtons=='流畅'){
                this.changeSource()
                console.log('this.flvURL',this.flvURL,'this.changeVideoLcd',this.changeVideoLcd)
            }
            console.log('自定义按钮点击回调, 参数：名称',customButtons)
        },
    },
    beforeDestroy() {
        this.destoryLivePlayer();
        console.log('beforeDestroy',this.flvURL)
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped lang="scss">
.livePlayerContainer{
    width:100%;
    height:100%;
    .livePlayerBox{
        width:100%;
        height:100%;
    }
}
.buttonTalk{
    color:green
}
</style>