浙大科创项目收获二

1.video.js实现m3u8格式的直播视频的展示和切换

1. 在工程中引入video.js 和播放m3u8格式必要的插件videojs-contrib-hls

npm install --save video.js 
npm install --save videojs-contrib-hls

2.在main.js 文件引入vidio.js的样式文件

import 'video.js/dist/video-js.css';

3. 创建popVideo2.vue文件

<!-- html部分 -->
<div class="video">
     <video id="videoPlayer" class="video-js"></video>
</div>

//js部分
import 'video.js/dist/video-js.css';
import videojs from 'video.js';
export default {
    name: 'SciTechCockpitPopupVideo',
    components: {
    },
    data() {
        return {
            show_video2: false,
            nowPlayVideoUrl: "https://spsvhic.zju.edu.cn/openUrl/HZ4Y9uo/live.m3u8",
            deceviedId: "",
            options: {
                autoplay: true, // 设置自动播放
                muted: true, // 设置了它为true，才可实现自动播放,同时视频也被静音 （Chrome66及以上版本，禁止音视频的自动播放）
                preload: "auto", // 预加载
                controls: true // 显示播放的控件
            },
            player: null,
        };
    },
    watch: {
        nowPlayVideoUrl(newVal, old) {
            this.getVideo(newVal);
        }
    },

    mounted() {
        this.getVideo(this.nowPlayVideoUrl);
    },
    created() {
        this.$EventBus.$on("openVideo2", (data, sys_name) => {
            if (sys_name !== "" && sys_name !== null) {
                this.deceviedId = this.selectLabId(sys_name)
                this.$api.getVideoStream(this.deceviedId).then((res) => {
                    let str = res.data
                    let index = str.lastIndexOf("=")
                    str = str.substring(index + 1, str.length);
                    let finalStr = str.slice(0, -1)
                    console.log('打印设备和视频路径', sys_name, this.deceviedId, finalStr);
                    this.nowPlayVideoUrl = finalStr;
                })
                this.show_video2 = data
            }
        });
    },
    beforeDestroy() {
        if (this.player) {
            this.player.dispose()
        }
    },

    methods: {
        handleClose() {
            //暂停视频播放
            // this.$refs.vueRef.pause();
            this.player.pause()
            this.show_video2 = false
        },
        selectLabId(name) {
            let labId = "";
            // let decevied = {
            //     labId:"",
            //     videoUrl:""
            // }
            switch (name) {
                case "3105":
                    labId = "1486298156370087938"
                    break;
                case "3111":
                    labId = "1486298156927930370"
                    break;
                case "3125":
                    labId = "1486298154625257474"
                    break;
                case "3239":
                    labId = "1486298156437196802"
                    break;
                case "3245":
                    labId = "1486298156294590465"
                    break;
                case "4113":
                    labId = "1486298151949291521"
                    break;
                case "4114":
                    labId = "1486298151966068737"
                    break;
                case "9108":
                    labId = "1486298147159396354"
                    break;

                default:
                    break;
            }
            return labId
        },
        getVideo(nowPlayVideoUrl) {
            console.log('重新加载视频组件',nowPlayVideoUrl);
            console.log('this.player',this.player);
            if(this.player!==null){
                this.player = null
            }
            this.player = videojs("videoPlayer", this.options);
            //关键代码， 动态设置src，才可实现换台操作
            this.player.src([
                {
                    src: nowPlayVideoUrl,
                    type: "application/x-mpegURL" // 告诉videojs,这是一个hls流
                }
            ]);
        },
    },
};
</script>

2：扁平数据结构转化为树结构

/** 扁平数组处理成树状结构 */
    getTree(list, pid) {
      let tree = [];
      let arr = JSON.parse(JSON.stringify(list))
      arr.map((item) => {
      //其中yjygfbm相当于子id，class_code相当于父id
        if (item.yjygfbm === pid) {
          // 递归寻找
          item.children = this.getTree(arr, item.class_code);
          tree.push(item);
        }
      });
      return tree;
    },