yarn add video.js videojs-contrib-hls
<template>
    <div id="businessDetails">
        <div class="carousel">
            <img :src="'http://182.108.156.16:8889/' + detail.enviromentPicture" v-if="detail.enviromentPicture" />
            <img src="../../assets/images/43.png" v-else  />
        </div>
        <div class="detail-content">
            <div class="content-title">{{detail.companyName}}</div>
            <div class="person">
                <div class="person-1">
                    <div class="person-1-1">
                        <div>联系人</div>
                        <div>{{ detail.chargePerson }}</div>
                    </div>
                    <div class="person-1-1">
                        <div>联系电话</div>
                        <div>{{ detail.phone }}</div>
                    </div>
                    <div class="person-1-1">
                        <div>监管分局</div>
                        <div>{{ detail.officeName }}</div>
                    </div>
                    <div class="person-1-1">
                        <div>所属片区</div>
                        <div>{{ detail.organName }}</div>
                    </div>
                    <div class="person-1-1">
                        <div>地址</div>
                        <div>{{ detail.address }}</div>
                    </div>
                    <div class="person-1-1">
                        <div>片管员</div>
                        <div>{{ detail.supervisorName }}</div>

                    </div>
                </div>
            </div>
        </div>

        <div class="keng"></div>
        <div class="detail-content">
            <div class="title">
                <img src="../../assets/images/title-icon.png" />
                <span>动态视频</span>
            </div>
            <div class="box" v-for="(v,i) in videoDatas" :key="i">
                <div class="box-1">
                    <video :id="i" class="my-video video-js vjs-default-skin vjs-big-play-centered"  muted="muted" preload="auto" width="100%" height="100%">
                        <source :src="`${leftUrl}${v.code}${rightUrl}`"
                            type="application/x-mpegURL" style="width: 100%; height: 800px;" />
                    </video>
        
                    <div class="video-name">{{v.name}}</div>
                </div>

                <!-- {{videoDatas.myVideo0.name}} -->


                <!--    <div class="box-1">
                    <video id="myVideo1" class="my-video" controls muted="muted" preload="auto" width="100%" height="100%">
                        <source :src="`http://182.108.156.16:8889/pag/127.0.0.1/7302/001284/0/MAIN/TCP/live.m3u8`"
                            type="application/x-mpegURL"  />
                    </video>
                    <div>{{videoDatas.myVideo0.name}}</div>
                </div> -->
                <!-- <div class="box-1">
                    <video id="myVideo2" class="my-video" controls muted="muted" preload="auto" width="100%" height="100%">
                        <source src="http://182.108.156.16:8889/pag/127.0.0.1/7302/001284/0/MAIN/TCP/live.m3u8"
                            type="application/x-mpegURL"   />
                    </video>
                    <div>厨房区</div>
                </div>
                <div class="box-1">
                    <video id="myVideo2" class="my-video" controls muted="muted" preload="auto" width="100%" height="100%">
                        <source src="http://182.108.156.16:8889/pag/127.0.0.1/7302/001284/0/MAIN/TCP/live.m3u8"
                            type="application/x-mpegURL"   />
                    </video>
                    <div>厨房区</div>
                </div>
                <div class="box-1">
                    <video id="myVideo2" class="my-video" controls muted="muted" preload="auto" width="100%" height="100%">
                        <source src="http://182.108.156.16:8889/pag/127.0.0.1/7302/001284/0/MAIN/TCP/live.m3u8"
                            type="application/x-mpegURL"   />
                    </video>
                    <div>厨房区</div>
                </div>
                <div class="box-1">
                    <video id="myVideo2" class="my-video" controls muted="muted" preload="auto" width="100%" height="100%">
                        <source src="http://182.108.156.16:8889/pag/127.0.0.1/7302/001284/0/MAIN/TCP/live.m3u8"
                            type="application/x-mpegURL"   />
                    </video>
                    <div>厨房区</div>
                </div> -->



            </div>
        </div>
    </div>
</template>
<script>
    export default {
        name: "businessDetails",
        data() {
            return {
                obj: "",
                leftUrl: '',
                rightUrl: '',
                formalUrl: 'http://182.108.156.16:8889',
                testUrl: 'http://172.30.1.163:8999',
                currentUrl: '',
                detail: "",
                videoUrl: "http://182.108.156.16:8889/pag/61.180.67.164/85/001571/0/MAIN/TCP/live.m3u8",
                posterUrl: "../../assets/images/34.png",
                list: '',
                videoDatas: {},
                video: [],
            };
        },
        mounted() {
            if (window.location.hostname === 'localhost') {
                this.currentUrl = this.testUrl
            } else {
                this.currentUrl = this.formalUrl
            }
            this.obj = this.$route.query;
            this.getData(this.obj);
            this.getUrl('hls_url', 'prefix').then(res => {
                if (res.data.code == 200) {
                    this.leftUrl = res.data.data.code
                }
            })
            this.getUrl('hls_url', 'suffix').then(res => {
                if (res.data.code == 200) {
                    this.rightUrl = res.data.data.code
                }
            })
            
        },

        destroyed() {
            for(var i in this.video){
                this.video[i].dispose()
                
            }
            this.video = []
            
        },
        methods: {
            getData(obj) {
                this.axios({
                    url: this.currentUrl + "/market-regulation/api/getCameraByCompanyIdAndModel",
                    method: "POST",
                    params: {
                        companyId: obj.companyId,
                        model: obj.model,
                        encry: 1,
                    },
                }).then((res) => {
                    if (res.data.code == 200) {
                        this.detail = res.data.data.companyMessage;
                        this.list = res.data.data.cameraList
                        this.list.forEach((item, index) => {
                            let key = `myVideo${index}`
                            this.videoDatas[key] = {
                                ...item
                            };

                        })
                        this.$nextTick(() => {
                            let list = this.list;
                            for (let i = 0; i < list.length; i++) {
                                this.initPlayer('myVideo' + i, i)
                            }

                        }, )
                    
                    }
                });
            },
            getUrl(type, name) {
                return new Promise(resolve => {
                    this.axios({
                        url: this.currentUrl + '/market-regulation/api/selectByDic',
                        method: 'POST',
                        params: {
                            type: type,
                            name: name
                        }
                    }).then(res => {
                        resolve(res)
                    })
                })
            },

            initPlayer(id, index) {
                let _this=this;
                console.log(index)
                this.video[id] = this.$video(
                    id, {
                        textTrackDisplay: false,
                        posterImage: false,
                        errorDisplay: false,
                        "controls": true,
                        "autoplay": false,
                        techOrder: ['html5'],
                        html5: {
                            hls: {
                                overrideNative: false
                            },
                            nativeVideoTracks: true,
                            nativeAudioTracks: true,
                            nativeTextTracks: true
                        }
                    },
                    function() { 
                        this.on("loadedmetadata", function() {
                            console.log("loadedmetadata");
                            //加载到元数据后开始播放视频
                            // myPlayer.play();
                        });
                        this.on("ended", function() {
                            console.log("ended");
                        });

                        this.on("loadstart", function() {
                            //开始加载
                            // myPlayer.play();
                            console.log("loadstart");
                        });
                        this.on("loadeddata", function() {
                            console.log("loadeddata");
                        });
                        this.on("seeking", function() {
                            //正在去拿视频流的路上
                            console.log("seeking");
                        });
                        this.on("seeked", function() {
                            //已经拿到视频流,可以播放
                            console.log("seeked");
                        });
                        this.on("waiting", function() {
                            console.log("waiting");
                        });
                        this.on("pause", function() {
                            console.log("pause");
                            // console.log(_this,666)
                        });
                        this.on("play", function() {
                            // console.log("play",_this.video[id],this.id_)
                            
                            console.log(this,444)
                            for(let i in _this.video){
                                console.log(i!== this.id_,"id不等于")
                                if(i!== this.id_){
                                    console.log(_this.video[i],"id不等于")
                                    _this.video[i].pause()
                                }
                            }
                            // _this.video.forEach((v,i)=>{
                            //  console.log(v,i,444)
                                
                            // })
                        })
                        this.on("error", function() {
                            console.log("加载错误");
                        });
                    }
                );
                // var urlObj = {
                //  src: "http://182.108.156.16:8889/pag/61.180.67.164/85/001571/0/MAIN/TCP/live.m3u8",
                //  type: "application/x-mpegURL"
                // };
                // myPlayer.src([urlObj]);
            },
        },
    };
</script>