SOURCE

new Vue({
   el: '#vueapp',
   data() {
        return {
            videoName: '',
            player: null,
            source: {
                src: '',
                type: ''
            },
            videoList: [
                { name: 'cctv6', protocol: 'FLV', type: 'video/x-flv', url: 'https://pull-flv-f26.douyincdn.com/media/stream-7307079688336263970_hd.flv?abr_pts=-800&_session_id=037-2023113013210827B0C2D07797400AE3C7.1701321721338.97266'},
                { name: '浙江卫视', protocol: 'HLS', type: 'application/x-mpegURL', url: 'https://hw-m-l.cztv.com/channels/lantian/channel001/1080p.m3u8'},
                { name: '山东卫视', protocol: 'HLS', type: 'application/x-mpegURL', url: 'http://l1.weihai.tv:8081/hls/oK0gP1n8ea.m3u8'},
                { name: '湖南卫视', protocol: 'HLS', type: 'application/x-mpegURL', url: 'http://120.196.232.43:8088/rrs03.hw.gmcc.net/PLTV/651/224/3221226698/1.m3u8'},
                { name: '东方卫视', protocol: 'HLS', type: 'application/x-mpegURL', url: 'https://volc-stream.kksmg.com/live/dfws/index.m3u8?volcSecret=64ab879122b0443296122928351def8d&volcTime=1701415488'},
                { name: '陕西卫视', protocol: 'HLS', type: 'application/x-mpegURL', url: 'http://stream.snrtv.com/sxbc-star-eDJX37.m3u8'},
                { name: '湖北卫视', protocol: 'HLS', type: 'application/x-mpegURL', url: 'http://120.196.232.55:8088/rrs03.hw.gmcc.net/PLTV/651/224/3221226713/1.m3u8'},
                { name: '甘肃卫视', protocol: 'HLS', type: 'application/x-mpegURL', url: 'https://hls.gstv.com.cn/49048r/6e1sy2.m3u8'},
                { name: '江苏卫视', protocol: 'HLS', type: 'application/x-mpegURL', url: 'http://120.196.232.15:8088/rrs03.hw.gmcc.net/PLTV/651/224/3221226692/1.m3u8'},
                { name: '山西卫视', protocol: 'HLS', type: 'application/x-mpegURL', url: 'https://livehhhttps.sxrtv.com/lsdream/q8RVWgs/1000/53sqjR0.m3u8'},


                { name: 'CCTV1', protocol: 'HLS', type: 'application/x-mpegURL', url: 'https://ldncctvwbndtxy.liveplay.myqcloud.com/ldncctvwbnd/ldcctv1_2_md.m3u8'},
                { name: 'CCTV2', protocol: 'HLS', type: 'application/x-mpegURL', url: 'http://120.196.232.54:8088/rrs03.hw.gmcc.net/PLTV/651/224/3221226739/1.m3u8'},
                { name: 'CCTV3', protocol: 'HLS', type: 'application/x-mpegURL', url: 'http://120.196.232.50:8088/rrs03.hw.gmcc.net/PLTV/651/224/3221226720/1.m3u8'},
                { name: 'CCTV4', protocol: 'HLS', type: 'application/x-mpegURL', url: 'http://120.196.232.27:8088/rrs03.hw.gmcc.net/PLTV/651/224/3221226725/1.m3u8'},
                { name: 'CCTV5', protocol: 'HLS', type: 'application/x-mpegURL', url: 'http://120.196.232.31:8088/rrs03.hw.gmcc.net/PLTV/651/224/3221226731/1.m3u8'},
                { name: 'CCTV6', protocol: 'HLS', type: 'application/x-mpegURL', url: 'http://120.196.232.25:8088/rrs03.hw.gmcc.net/PLTV/651/224/3221226699/1.m3u8'},
                { name: 'CCTV7', protocol: 'HLS', type: 'application/x-mpegURL', url: 'http://120.196.232.31:8088/rrs03.hw.gmcc.net/PLTV/651/224/3221226721/1.m3u8'},
                { name: 'CCTV8', protocol: 'HLS', type: 'application/x-mpegURL', url: 'http://120.196.232.17:8088/rrs03.hw.gmcc.net/PLTV/651/224/3221226715/1.m3u8'},
                { name: 'CCTV9', protocol: 'HLS', type: 'application/x-mpegURL', url: 'https://hlsliveali-cdn.ysp.cctv.cn/08CCAEB39B1B426A29B47638E225CF53C3AC62B61958D81C72EBEA2968ABF9C2D7BF6AC6DEA153B85406E21B7B5ED1C4C14D234EB7332D65943BC55D675325CD4EDB789414662FF4FD1933C9551D4185F338F631CBE2101F2CD190C68ECF6C0D98D12BEF448D3EAE78FF2A7A8FA1EEAA/2000499402.m3u8'},
                { name: 'CCTV10', protocol: 'HLS', type: 'application/x-mpegURL', url: 'https://hlsliveali-cdn.ysp.cctv.cn/7196E78C7390273A3845D7F7D1BAB16D163AA48AE0A5F1F25FD09BE72084E338BF54CE30622B6E0BE7568FC06AEA5FA5BBE73807ADCC909E27DD3CB75E007A521DB09B4767F60A45B6E27CE7634DD531B34C4F45D02F2A0585E7413256298D302591B952E286AEE6180973F09366A096/2000203502.m3u8'},
                { name: 'CCTV11', protocol: 'HLS', type: 'application/x-mpegURL', url: 'https://hlsliveali-cdn.ysp.cctv.cn/7884E214E448A05CEF84E9B515EBA0D990A383807CB1DBB98F61CE9AED0664C1AD7BAF976E58792EAFE2DCED92FF505AC93B9380AE92C63EF05BEBA6D86CFB0DF69982D041418913216F2C766A75B550CA32E64954CD66EC5B6B19243B071BC7CAE51B7EAAE8F300BB038CEC222FDF31/2000204102.m3u8'},
                { name: 'CCTV12', protocol: 'HLS', type: 'application/x-mpegURL', url: 'https://hlsliveali-cdn.ysp.cctv.cn/90C8895F0AD9C2C6C58F083AF5C79441401422B97AA8D72251A24141105C1B94B0E2667A53972FC437552EF52C4B6F53F575F821D85EADC1F19E1100F4B9B14F34D70E6CB39FF4ED06AB6E1D5106E43153699F1C5AFCDC8CD8B0D4580BB4091E6FF2D6B15383606F9DB753FEA1676B09/2000202602.m3u8'},
                { name: 'CCTV13', protocol: 'HLS', type: 'application/x-mpegURL', url: 'https://live-play.cctvnews.cctv.com/cctv/merge_cctv13_mhd.m3u8'},

            ]
        }
    },
    mounted() {

        this.initVideo()

        // 初始化默认播放
        this.handlePlay(this.videoList[0])
    },

    beforeDestroy() {
        // 销毁播放器
        if (this.player) {
            this.player.pause();
            this.player.dispose();
        }
    },
    methods: {
        initVideo() {
            this.player = videojs(this.$refs.videoPlayer,{
                preload: 'auto', // 预加载
                autoplay: 'muted',//自动播放
                controls: true,//用户可以与之交互的控件
                aspectRatio:"16:9",//显示比率
                posterImage: true,
                fullscreen:{
                    options: {navigationUI: 'hide'}
                },
                techOrder: ['html5', 'flvjs', 'flash'],// 兼容顺序
                flvjs: {
                    mediaDataSource: {
                        isLive: true,
                        cors: true,
                        withCredentials: false
                    }
                },
                sources: [this.source] },
                function() {
                    if (this.source.src) {
                        this.play();
                    }
                }
            )

        },
        // 播放切换
        handlePlay(data) {
            const { type, url, name } = data;
            this.source = { src: url, type };
            this.videoName = name;

            this.player.src(this.source);
        }
    }
})

<div id="vueapp">
    <h3>{{videoName}}</h3>
    <video
        ref="videoPlayer"
        class="video-js vjs-big-play-centered vjs-fluid"
        controls
        preload="auto"
        width="500px"
    >
    </video>
    <h3>数据源</h3>
    <el-table
    :data="videoList"
    border
    height="250"
    size="mini"
    style="width: 100%">
    <el-table-column prop="name" label="名称" width="160"> </el-table-column>
    <el-table-column prop="type" label="type" width="160"> </el-table-column>
    <el-table-column prop="protocol" label="协议" width="70"> </el-table-column>
    <el-table-column prop="url" label="地址" show-overflow-tooltip	> </el-table-column>
    <el-table-column fixed="right" width="70" label="操作">
      <template slot-scope="scope">
        <el-button @click="handlePlay(scope.row)" icon="el-icon-video-play
" type="text" size="small">播放</el-button>
      </template>
    </el-table-column>
  </el-table>
</div>