m3u8视频播放

<template>
<div class="borrad congye" v-if="mclzData.length > 0">
    <div v-for="(item, index) in mclzData" :key="item.id">
        <div class="vidioArea" :id="`my-div${index}`" style="min-height:200px;background: #000;">
            <video :id="`my-video${index}`" class="video-js vjs-default-skin videos" muted>
                  <source :ref="`my-source${index}`" src="" type="application/x-mpegURL" />
             </video>
        </div>
        <div class="shua">
             <span>{{ item.title }}</span>
              <i class="el-icon-refresh" ref="icon" :class="{ rotated: index === activeIndex }" style="font-size: 20px; cursor: pointer;margin: 0 10px;"
                                @click="shuaxin(item.monitor_id, index)"></i>
        </div>
    </div>

</div>
<div class="borrad congye" v-else style="line-height: 6;text-align: center;font-weight: bold;">暂无视频~</div>
</template>
<style lang="less" scoped>
.rotated {
    animation: rotate-45 1s ease-in-out forwards;
}

@keyframes rotate-45 {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(360deg);
    }
}
</style>
           

<script>
import videojs from 'video.js'

import 'videojs-contrib-hls'
import 'video.js/dist/video-js.css'
export default {
    data() {
        return {
            activeIndex: -1,
            divShow: ['', '', ''],
            playerOptions: '',
            player: [],
            videoList: [],
            mclzData: [],
        }
    },
    mounted() {
       this.getmclzData()
    },
    methods: {
        resetRotation() {
            this.videoList.forEach((icon) => {
                icon.rotated = false; // 重置所有图标的旋转状态为false
            });
        },
        shuaxin(monitor_id, i) {
            if (this.activeIndex === i) {
                this.videoList[i].rotated = true;
                this.activeIndex = -1;
            } else {
                console.log("!=i");
                this.resetRotation();
                this.activeIndex = i; // 设置当前活动的图标索引
                setTimeout(() => {
                    this.activeIndex = -1;
                }, 1000);
            }
            if (this.player[i] && this.player[i].player_) {
                console.log(this.player[i], "this.player[i]");
                this.player[i].dispose()
                this.$axios.post("/frontend/v1.Wechat/getthisurl", {
                    monitor_id: monitor_id
                }).then((res) => {
                    if (res.data.code === 1) {
                        let dom = document.getElementById(`my-div${i}`)
                        dom.innerHTML = 
                        `<video id="my-video${i}" style="width:100%;min-height:200px"  ref="my-video${i}" autoplay class="video-js vjs-default-skin videos" muted > 
                            <source "my-source${i}" id='my-source${i}' src="${res.data.data.data}" type="application/x-mpegURL" />
                        </video>`
                        this.player[i] = videojs(
                            `my-video${i}`,
                            {
                                bigPlayButton: true,
                                textTrackDisplay: false,
                                posterImage: false,
                                errorDisplay: false,
                                controls: true,
                                hls: {
                                    withCredentials: true,
                                },
                                controlBar: {
                                    fullscreenToggle: true, //显示全屏按钮，默认为true
                                    pictureInPictureToggle: false, //隐藏画中画按钮，默认为true
                                    volumePanel: false, //隐藏声音面板
                                },
                            },
                            function () {
                                this.play();
                            }
                        );
                    }
                });

            } else {
                this.setVideo(monitor_id, i)
            }

        },
        goVideo(data) {
            const that = this;
            this.videoList = data;
            if (data.length == 0) {
                 this.$message({
                   showClose: true,
                   message: "暂无视频~",
                 });
            } else {
                this.videoisShow = true;
                for (let i = 0; i < this.videoList.length; i++) {
                    this.setVideo(this.videoList[i].monitor_id, i)
                }
            }
        },
        setVideo(code, i) {
            this.$axios.post("/frontend/v1.Wechat/getthisurl", {
                monitor_id: code
            }).then((res) => {
                if (res.data.data.code === 200) {
                    let dom = document.getElementById(`my-div${i}`)
                    dom.innerHTML = `<video id="my-video${i}" style="width:100%;min-height:200px"  ref="my-video${i}" autoplay class="video-js vjs-default-skin videos" muted > <source
                ref="my-source${i}" id='my-source${i}'
                  src="${res.data.data.data}"
                  type="application/x-mpegURL"
                />
              </video>`
                    this.player[i] = videojs(
                        `my-video${i}`,
                        {
                            bigPlayButton: true,
                            textTrackDisplay: false,
                            posterImage: false,
                            errorDisplay: false,
                            controls: true,
                            hls: {
                                withCredentials: true,
                            },
                            controlBar: {
                                fullscreenToggle: true, //显示全屏按钮，默认为true
                                pictureInPictureToggle: false, //隐藏画中画按钮，默认为true
                                volumePanel: false, //隐藏声音面板
                                //currentTimeDisplay: true,//显示当前播放时间
                                //timeDivider: true,//显示时间分割线
                                //durationDisplay: true,//显示总时间
                                //remainingTimeDisplay: false,//隐藏剩余时间，
                            },
                        },
                        function () {
                            this.play();
                        }
                    );
                } else {
                    this.$set(this.divShow, index, res.data.data.msg)

                    console.log(this.divShow, "this.divShow");
                }
            });
        },
        getVideo(i) {
            console.log(videojs);
            // this.$nextTick(() => {
            let res = videojs(
                `my-video${i}`,
                {
                    bigPlayButton: true,
                    textTrackDisplay: false,
                    posterImage: false,
                    errorDisplay: false,
                    controls: true,
                    hls: {
                        withCredentials: true,
                    },
                    controlBar: {
                        fullscreenToggle: true,//显示全屏按钮，默认为true
                        pictureInPictureToggle: false,//隐藏画中画按钮，默认为true
                        volumePanel: false,//隐藏声音面板
                        //currentTimeDisplay: true,//显示当前播放时间
                        //timeDivider: true,//显示时间分割线
                        //durationDisplay: true,//显示总时间
                        //remainingTimeDisplay: false,//隐藏剩余时间，
                    }
                },
                function () {
                    this.play();
                }
            );
            this.player.push(res);
            // })

        },
        // 获取列表
        getmclzData() {
            this.$axios.post("/frontend/v1.Wechat/mastermonitor", {
                id: this.id
            }).then((res) => {
                if (res.data.code === 1) {
                    this.mclzData = res.data.data.data
                    this.goVideo(this.mclzData)
                }
            });
        },
        videoClose() {
            this.player.forEach((item) => item.dispose());
            this.player = [];
            this.videoList = [];
        },


    },
    beforeDestroy() {
        this.videoClose();
    },
};
</script>