接入视屏监控

public/index.html

@@ -9,6 +9,7 @@
   <link rel="shortcut icon" href="<%= BASE_URL %>favicon.ico" />
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
   <script src="<%= BASE_URL %>jquery-3.1.1.min.js"></script>
+  <script src="<%= BASE_URL %>jessibuca.js"></script>
   <!-- 站点配置 -->
   <script>
     window.SITE_CONFIG = {}

public/jessibuca.d.ts

@@ -0,0 +1,637 @@
+declare namespace Jessibuca {
+
+    /** 超时信息 */
+    enum TIMEOUT {
+        /** 当play()的时候，如果没有数据返回 */
+        loadingTimeout = 'loadingTimeout',
+        /** 当播放过程中，如果超过timeout之后没有数据渲染 */
+        delayTimeout = 'delayTimeout',
+    }
+
+    /** 错误信息 */
+    enum ERROR {
+        /** 播放错误，url 为空的时候，调用 play 方法 */
+        playError = 'playError',
+        /** http 请求失败 */
+        fetchError = 'fetchError',
+        /** websocket 请求失败 */
+        websocketError = 'websocketError',
+        /** webcodecs 解码 h265 失败 */
+        webcodecsH265NotSupport = 'webcodecsH265NotSupport',
+        /** mediaSource 解码 h265 失败 */
+        mediaSourceH265NotSupport = 'mediaSourceH265NotSupport',
+        /** wasm 解码失败 */
+        wasmDecodeError = 'wasmDecodeError',
+    }
+
+    interface Config {
+        /**
+         * 播放器容器
+         * *  若为 string ，则底层调用的是 document.getElementById('id')
+         * */
+        container: HTMLElement | string;
+        /**
+         * 设置最大缓冲时长，单位秒，播放器会自动消除延迟
+         */
+        videoBuffer?: number;
+        /**
+         * worker地址
+         * *  默认引用的是根目录下面的decoder.js文件 ，decoder.js 与 decoder.wasm文件必须是放在同一个目录下面。 */
+        decoder?: string;
+        /**
+         * 是否不使用离屏模式（提升渲染能力）
+         */
+        forceNoOffscreen?: boolean;
+        /**
+         * 是否开启当页面的'visibilityState'变为'hidden'的时候，自动暂停播放。
+         */
+        hiddenAutoPause?: boolean;
+        /**
+         * 是否有音频，如果设置`false`，则不对音频数据解码，提升性能。
+         */
+        hasAudio?: boolean;
+        /**
+         * 设置旋转角度，只支持，0(默认)，180，270 三个值
+         */
+        rotate?: boolean;
+        /**
+         * 1. 当为`true`的时候：视频画面做等比缩放后,高或宽对齐canvas区域,画面不被拉伸,但有黑边。 等同于 `setScaleMode(1)`
+         * 2. 当为`false`的时候：视频画面完全填充canvas区域,画面会被拉伸。等同于 `setScaleMode(0)`
+         */
+        isResize?: boolean;
+        /**
+         * 1. 当为`true`的时候：视频画面做等比缩放后,完全填充canvas区域,画面不被拉伸,没有黑边,但画面显示不全。等同于 `setScaleMode(2)`
+         */
+        isFullResize?: boolean;
+        /**
+         * 1. 当为`true`的时候：ws协议不检验是否以.flv为依据，进行协议解析。
+         */
+        isFlv?: boolean;
+        /**
+         * 是否开启控制台调试打
+         */
+        debug?: boolean;
+        /**
+         * 1. 设置超时时长, 单位秒
+         * 2. 在连接成功之前(loading)和播放中途(heart),如果超过设定时长无数据返回,则回调timeout事件
+         */
+        timeout?: number;
+        /**
+         * 1. 设置超时时长, 单位秒
+         * 2. 在连接成功之前,如果超过设定时长无数据返回,则回调timeout事件
+         */
+        heartTimeout?: number;
+        /**
+         * 1. 设置超时时长, 单位秒
+         * 2. 在连接成功之前,如果超过设定时长无数据返回,则回调timeout事件
+         */
+        loadingTimeout?: number;
+        /**
+         * 是否支持屏幕的双击事件，触发全屏，取消全屏事件
+         */
+        supportDblclickFullscreen?: boolean;
+        /**
+         * 是否显示网
+         */
+        showBandwidth?: boolean;
+        /**
+         * 配置操作按钮
+         */
+        operateBtns?: {
+            /** 是否显示全屏按钮 */
+            fullscreen?: boolean;
+            /** 是否显示截图按钮 */
+            screenshot?: boolean;
+            /** 是否显示播放暂停按钮 */
+            play?: boolean;
+            /** 是否显示声音按钮 */
+            audio?: boolean;
+            /** 是否显示录制按 */
+            record?: boolean;
+        };
+        /**
+         * 开启屏幕常亮，在手机浏览器上, canvas标签渲染视频并不会像video标签那样保持屏幕常亮
+         */
+        keepScreenOn?: boolean;
+        /**
+         * 是否开启声音，默认是关闭声音播放的
+         */
+        isNotMute?: boolean;
+        /**
+         * 加载过程中文案
+         */
+        loadingText?: string;
+        /**
+         * 背景图片
+         */
+        background?: string;
+        /**
+         * 是否开启MediaSource硬解码
+         * * 视频编码只支持H.264视频（Safari on iOS不支持）
+         * * 不支持 forceNoOffscreen 为 false (开启离屏渲染)
+         */
+        useMSE?: boolean;
+        /**
+         * 是否开启Webcodecs硬解码
+         * *  视频编码只支持H.264视频 (需在chrome 94版本以上，需要https或者localhost环境)
+         * *  支持 forceNoOffscreen 为 false （开启离屏渲染)
+         * */
+        useWCS?: boolean;
+        /**
+         * 是否开启键盘快捷键
+         * 目前支持的键盘快捷键有：esc -> 退出全屏；arrowUp -> 声音增加；arrowDown -> 声音减少；
+         */
+        hotKey?: boolean;
+        /**
+         *  在使用MSE或者Webcodecs 播放H265的时候，是否自动降级到wasm模式。
+         *  设置为false 则直接关闭播放，抛出Error 异常，设置为true 则会自动切换成wasm模式播放。
+         */
+        autoWasm?: boolean;
+        /**
+         * heartTimeout 心跳超时之后自动再播放,不再抛出异常，而直接重新播放视频地址。
+         */
+        heartTimeoutReplay?: boolean,
+        /**
+         * heartTimeoutReplay 从试次数，超过之后，不再自动播放
+         */
+        heartTimeoutReplayTimes?: number,
+        /**
+         * loadingTimeout loading之后自动再播放,不再抛出异常，而直接重新播放视频地址。
+         */
+        loadingTimeoutReplay?: boolean,
+        /**
+         * heartTimeoutReplay 从试次数，超过之后，不再自动播放
+         */
+        loadingTimeoutReplayTimes?: number
+        /**
+         * wasm解码报错之后，不再抛出异常，而是直接重新播放视频地址。
+         */
+        wasmDecodeErrorReplay?: boolean,
+        /**
+         * https://github.com/langhuihui/jessibuca/issues/152 解决方案
+         * 例如：WebGL图像预处理默认每次取4字节的数据，但是540x960分辨率下的U、V分量宽度是540/2=270不能被4整除，导致绿屏。
+         */
+        openWebglAlignment?: boolean
+    }
+}
+
+
+declare class Jessibuca {
+
+    constructor(config?: Jessibuca.Config);
+
+    /**
+     * 是否开启控制台调试打印
+     @example
+     // 开启
+     jessibuca.setDebug(true)
+     // 关闭
+     jessibuca.setDebug(false)
+     */
+    setDebug(flag: boolean): void;
+
+    /**
+     * 静音
+     @example
+     jessibuca.mute()
+     */
+    mute(): void;
+
+    /**
+     * 取消静音
+     @example
+     jessibuca.cancelMute()
+     */
+    cancelMute(): void;
+
+    /**
+     * 留给上层用户操作来触发音频恢复的方法。
+     *
+     * iPhone，chrome等要求自动播放时，音频必须静音，需要由一个真实的用户交互操作来恢复，不能使用代码。
+     *
+     * https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
+     */
+    audioResume(): void;
+
+    /**
+     *
+     * 设置超时时长, 单位秒
+     * 在连接成功之前和播放中途,如果超过设定时长无数据返回,则回调timeout事件
+
+     @example
+     jessibuca.setTimeout(10)
+
+     jessibuca.on('timeout',function(){
+        //
+    });
+     */
+    setTimeout(): void;
+
+    /**
+     * @param mode
+     *      0 视频画面完全填充canvas区域,画面会被拉伸  等同于参数 `isResize` 为false
+     *
+     *      1 视频画面做等比缩放后,高或宽对齐canvas区域,画面不被拉伸,但有黑边 等同于参数 `isResize` 为true
+     *
+     *      2 视频画面做等比缩放后,完全填充canvas区域,画面不被拉伸,没有黑边,但画面显示不全 等同于参数 `isFullResize` 为true
+     @example
+     jessibuca.setScaleMode(0)
+
+     jessibuca.setScaleMode(1)
+
+     jessibuca.setScaleMode(2)
+     */
+    setScaleMode(mode: number): void;
+
+    /**
+     * 暂停播放
+     *
+     * 可以在pause 之后，再调用 `play()`方法就继续播放之前的流。
+     @example
+     jessibuca.pause().then(()=>{
+        console.log('pause success')
+
+        jessibuca.play().then(()=>{
+
+        }).catch((e)=>{
+
+        })
+
+    }).catch((e)=>{
+        console.log('pause error',e);
+    })
+     */
+    pause(): Promise<void>;
+
+    /**
+     * 关闭视频,不释放底层资源
+     @example
+     jessibuca.close();
+     */
+    close(): void;
+
+    /**
+     * 关闭视频，释放底层资源
+     @example
+     jessibuca.destroy()
+     */
+    destroy(): void;
+
+    /**
+     * 清理画布为黑色背景
+     @example
+     jessibuca.clearView()
+     */
+    clearView(): void;
+
+    /**
+     * 播放视频
+     @example
+
+     jessibuca.play('url').then(()=>{
+        console.log('play success')
+    }).catch((e)=>{
+        console.log('play error',e)
+    })
+     //
+     jessibuca.play()
+     */
+    play(url?: string): Promise<void>;
+
+    /**
+     * 重新调整视图大小
+     */
+    resize(): void;
+
+    /**
+     * 设置最大缓冲时长，单位秒，播放器会自动消除延迟。
+     *
+     * 等同于 `videoBuffer` 参数。
+     *
+     @example
+     // 设置 200ms 缓冲
+     jessibuca.setBufferTime(0.2)
+     */
+    setBufferTime(time: number): void;
+
+    /**
+     * 设置旋转角度，只支持，0(默认) ，180，270 三个值。
+     *
+     * > 可用于实现监控画面小窗和全屏效果，由于iOS没有全屏API，此方法可以模拟页面内全屏效果而且多端效果一致。   *
+     @example
+     jessibuca.setRotate(0)
+
+     jessibuca.setRotate(90)
+
+     jessibuca.setRotate(270)
+     */
+    setRotate(deg: number): void;
+
+    /**
+     *
+     * 设置音量大小，取值0 — 1
+     *
+     * > 区别于 mute 和 cancelMute 方法，虽然设置setVolume(0) 也能达到 mute方法，但是mute 方法是不调用底层播放音频的，能提高性能。而setVolume(0)只是把声音设置为0 ，以达到效果。
+     * @param volume 当为0时，完全无声;当为1时，最大音量，默认值
+     @example
+     jessibuca.setVolume(0.2)
+
+     jessibuca.setVolume(0)
+
+     jessibuca.setVolume(1)
+     */
+    setVolume(volume: number): void;
+
+    /**
+     * 返回是否加载完毕
+     @example
+     var result = jessibuca.hasLoaded()
+     console.log(result) // true
+     */
+    hasLoaded(): boolean;
+
+    /**
+     * 开启屏幕常亮，在手机浏览器上, canvas标签渲染视频并不会像video标签那样保持屏幕常亮。
+     * H5目前在chrome\edge 84, android chrome 84及以上有原生亮屏API, 需要是https页面
+     * 其余平台为模拟实现，此时为兼容实现，并不保证所有浏览器都支持
+     @example
+     jessibuca.setKeepScreenOn()
+     */
+    setKeepScreenOn(): boolean;
+
+    /**
+     * 全屏(取消全屏)播放视频
+     @example
+     jessibuca.setFullscreen(true)
+     //
+     jessibuca.setFullscreen(false)
+     */
+    setFullscreen(flag: boolean): void;
+
+    /**
+     *
+     * 截图，调用后弹出下载框保存截图
+     * @param filename 可选参数, 保存的文件名, 默认 `时间戳`
+     * @param format   可选参数, 截图的格式，可选png或jpeg或者webp ,默认 `png`
+     * @param quality  可选参数, 当格式是jpeg或者webp时，压缩质量，取值0 ~ 1 ,默认 `0.92`
+     * @param type 可选参数, 可选download或者base64或者blob，默认`download`
+
+     @example
+
+     jessibuca.screenshot("test","png",0.5)
+
+     const base64 = jessibuca.screenshot("test","png",0.5,'base64')
+
+     const fileBlob = jessibuca.screenshot("test",'blob')
+     */
+    screenshot(filename?: string, format?: string, quality?: number, type?: string): void;
+
+    /**
+     * 开始录制。
+     * @param fileName 可选，默认时间戳
+     * @param fileType 可选，默认webm，支持webm 和mp4 格式
+
+     @example
+     jessibuca.startRecord('xxx','webm')
+     */
+    startRecord(fileName: string, fileType: string): void;
+
+    /**
+     * 暂停录制并下载。
+     @example
+     jessibuca.stopRecordAndSave()
+     */
+    stopRecordAndSave(): void;
+
+    /**
+     * 返回是否正在播放中状态。
+     @example
+     var result = jessibuca.isPlaying()
+     console.log(result) // true
+     */
+    isPlaying(): boolean;
+
+    /**
+     *   返回是否静音。
+     @example
+     var result = jessibuca.isMute()
+     console.log(result) // true
+     */
+    isMute(): boolean;
+
+    /**
+     * 返回是否正在录制。
+     @example
+     var result = jessibuca.isRecording()
+     console.log(result) // true
+     */
+    isRecording(): boolean;
+
+
+    /**
+     * 监听 jessibuca 初始化事件
+     * @example
+     * jessibuca.on("load",function(){console.log('load')})
+     */
+    on(event: 'load', callback: () => void): void;
+
+    /**
+     * 视频播放持续时间，单位ms
+     * @example
+     * jessibuca.on('timeUpdate',function (ts) {console.log('timeUpdate',ts);})
+     */
+    on(event: 'timeUpdate', callback: () => void): void;
+
+    /**
+     * 当解析出视频信息时回调，2个回调参数
+     * @example
+     * jessibuca.on("videoInfo",function(data){console.log('width:',data.width,'height:',data.width)})
+     */
+    on(event: 'videoInfo', callback: (data: {
+        /** 视频宽 */
+        width: number;
+        /** 视频高 */
+        height: number;
+    }) => void): void;
+
+    /**
+     * 当解析出音频信息时回调，2个回调参数
+     * @example
+     * jessibuca.on("audioInfo",function(data){console.log('numOfChannels:',data.numOfChannels,'sampleRate',data.sampleRate)})
+     */
+    on(event: 'audioInfo', callback: (data: {
+        /** 声频通道 */
+        numOfChannels: number;
+        /** 采样率 */
+        sampleRate: number;
+    }) => void): void;
+
+    /**
+     * 信息，包含错误信息
+     * @example
+     * jessibuca.on("log",function(data){console.log('data:',data)})
+     */
+    on(event: 'log', callback: () => void): void;
+
+    /**
+     * 错误信息
+     * @example
+     * jessibuca.on("error",function(error){
+        if(error === Jessibuca.ERROR.fetchError){
+            //
+        }
+        else if(error === Jessibuca.ERROR.webcodecsH265NotSupport){
+            //
+        }
+        console.log('error:',error)
+    })
+     */
+    on(event: 'error', callback: (err: Jessibuca.ERROR) => void): void;
+
+    /**
+     * 当前网速， 单位KB 每秒1次,
+     * @example
+     * jessibuca.on("kBps",function(data){console.log('kBps:',data)})
+     */
+    on(event: 'kBps', callback: (value: number) => void): void;
+
+    /**
+     * 渲染开始
+     * @example
+     * jessibuca.on("start",function(){console.log('start render')})
+     */
+    on(event: 'start', callback: () => void): void;
+
+    /**
+     * 当设定的超时时间内无数据返回,则回调
+     * @example
+     * jessibuca.on("timeout",function(error){console.log('timeout:',error)})
+     */
+    on(event: 'timeout', callback: (error: Jessibuca.TIMEOUT) => void): void;
+
+    /**
+     * 当play()的时候，如果没有数据返回，则回调
+     * @example
+     * jessibuca.on("loadingTimeout",function(){console.log('timeout')})
+     */
+    on(event: 'loadingTimeout', callback: () => void): void;
+
+    /**
+     * 当播放过程中，如果超过timeout之后没有数据渲染，则抛出异常。
+     * @example
+     * jessibuca.on("delayTimeout",function(){console.log('timeout')})
+     */
+    on(event: 'delayTimeout', callback: () => void): void;
+
+    /**
+     * 当前是否全屏
+     * @example
+     * jessibuca.on("fullscreen",function(flag){console.log('is fullscreen',flag)})
+     */
+    on(event: 'fullscreen', callback: () => void): void;
+
+    /**
+     * 触发播放事件
+     * @example
+     * jessibuca.on("play",function(flag){console.log('play')})
+     */
+    on(event: 'play', callback: () => void): void;
+
+    /**
+     * 触发暂停事件
+     * @example
+     * jessibuca.on("pause",function(flag){console.log('pause')})
+     */
+    on(event: 'pause', callback: () => void): void;
+
+    /**
+     * 触发声音事件，返回boolean值
+     * @example
+     * jessibuca.on("mute",function(flag){console.log('is mute',flag)})
+     */
+    on(event: 'mute', callback: () => void): void;
+
+    /**
+     * 流状态统计，流开始播放后回调，每秒1次。
+     * @example
+     * jessibuca.on("stats",function(s){console.log("stats is",s)})
+     */
+    on(event: 'stats', callback: (stats: {
+        /** 当前缓冲区时长，单位毫秒 */
+        buf: number;
+        /** 当前视频帧率 */
+        fps: number;
+        /** 当前音频码率，单位byte */
+        abps: number;
+        /** 当前视频码率，单位byte */
+        vbps: number;
+        /** 当前视频帧pts，单位毫秒 */
+        ts: number;
+    }) => void): void;
+
+    /**
+     * 渲染性能统计，流开始播放后回调，每秒1次。
+     * @param performance 0: 表示卡顿,1: 表示流畅,2: 表示非常流程
+     * @example
+     * jessibuca.on("performance",function(performance){console.log("performance is",performance)})
+     */
+    on(event: 'performance', callback: (performance: 0 | 1 | 2) => void): void;
+
+    /**
+     * 录制开始的事件
+
+     * @example
+     * jessibuca.on("recordStart",function(){console.log("record start")})
+     */
+    on(event: 'recordStart', callback: () => void): void;
+
+    /**
+     * 录制结束的事件
+
+     * @example
+     * jessibuca.on("recordEnd",function(){console.log("record end")})
+     */
+    on(event: 'recordEnd', callback: () => void): void;
+
+    /**
+     * 录制的时候，返回的录制时长，1s一次
+
+     * @example
+     * jessibuca.on("recordingTimestamp",function(timestamp){console.log("recordingTimestamp is",timestamp)})
+     */
+    on(event: 'recordingTimestamp', callback: (timestamp: number) => void): void;
+
+    /**
+     * 监听调用play方法 经过 初始化-> 网络请求-> 解封装 -> 解码 -> 渲染 一系列过程的时间消耗
+     * @param event
+     * @param callback
+     */
+    on(event: 'playToRenderTimes', callback: (times: {
+        playInitStart: number, // 1 初始化
+        playStart: number, // 2 初始化
+        streamStart: number, // 3 网络请求
+        streamResponse: number, // 4 网络请求
+        demuxStart: number, // 5 解封装
+        decodeStart: number, // 6 解码
+        videoStart: number, // 7 渲染
+        playTimestamp: number,// playStart- playInitStart
+        streamTimestamp: number,// streamStart - playStart
+        streamResponseTimestamp: number,// streamResponse - streamStart
+        demuxTimestamp: number, // demuxStart - streamResponse
+        decodeTimestamp: number, // decodeStart - demuxStart
+        videoTimestamp: number,// videoStart - decodeStart
+        allTimestamp: number // videoStart - playInitStart
+    }) => void): void
+
+    /**
+     * 监听方法
+     *
+     @example
+
+     jessibuca.on("load",function(){console.log('load')})
+     */
+    on(event: string, callback: Function): void;
+
+}
+
+export default Jessibuca;

src/views/dataBoard/IoTPerception/Videosurveillance/cpts/videoDialog.vue

@@ -0,0 +1,482 @@
+<template>
+    <div>
+        <el-dialog :destroy-on-close="true" :modal="true" :modal-append-to-body="false" :visible="showDialog"
+            width="686px" @close="handleClose">
+            <div class="main-title main-title2">
+                <Title text="视频监控" />
+            </div>
+            <div class="root">
+                <div class="container-shell">
+                    <div class="container-shell-title"><span class="tag-version"
+                            v-if="version">({{
+                            version
+                            }})</span></div>
+                   
+                    <div id="container" ref="container">
+                        <canvas style="width: 100%;height: 100%;"></canvas>
+                    </div>
+                   
+                    <div class="input" v-if="loaded" style="line-height: 30px">
+                        <button @click="destroy">销毁</button>
+                        <button v-if="quieting" @click="cancelMute">取消静音</button>
+                        <template v-else>
+                            <button @click="mute">静音</button>
+                            音量
+                            <select v-model="volume" @change="volumeChange">
+                                <option value="1">100</option>
+                                <option value="0.75">75</option>
+                                <option value="0.5">50</option>
+                                <option value="0.25">25</option>
+                            </select>
+                        </template>
+                        <span>旋转</span>
+                        <select v-model="rotate" @change="rotateChange">
+                            <option value="0">0</option>
+                            <option value="90">90</option>
+                            <option value="270">270</option>
+                        </select>
+
+                        <button @click="fullscreen">全屏</button>
+                        <button @click="screenShot">截图</button>
+                        <div style="line-height: 30px">
+                            <input type="checkbox" ref="operateBtns" v-model="showOperateBtns"
+                                @change="restartPlay" /><span>操作按钮</span>
+                            <!-- <input type="checkbox" ref="operateBtns" v-model="showBandwidth"
+                                @change="restartPlay" /><span>网速</span>
+                            <span v-if="performance">性能：{{ performance }}</span> -->
+                        </div>
+                    </div>
+                    <div class="input" v-if="loaded">
+                        <!-- <input type="checkbox" ref="offscreen" v-model="useOffscreen"
+                            @change="restartPlay('offscreen')" /><span>离屏渲染</span> -->
+
+                        <select v-model="scale" @change="scaleChange">
+                            <option value="0">完全填充(拉伸)</option>
+                            <option value="1">等比缩放</option>
+                            <option value="2">完全填充(未拉伸)</option>
+                        </select>
+                        <button v-if="!playing" @click="clearView">清屏</button>
+                        <template v-if="playing">
+                            <select v-model="recordType">
+                                <option value="webm">webm</option>
+                                <option value="mp4">mp4</option>
+                            </select>
+                            <button v-if="!recording" @click="startRecord">录制</button>
+                            <button v-if="!recording" @click="stopAndSaveRecord">暂停录制</button>
+                        </template>
+
+                    </div>
+                </div>
+            </div>
+        </el-dialog>
+
+    </div>
+</template>
+<script>
+import Title from "@/views/dataBoard/satisfactionEval/components/Title";
+import {requestPost} from "@/js/dai/request";
+
+export default {
+    name: "videoDialog",
+    components: {
+        Title,
+
+    },
+    props: {
+        showDialog: {
+            type: Boolean,
+            default: false
+        },
+        monitorCode:{
+            type:String,
+            default:''
+        }
+    },
+    data() {
+        return {
+            user: this.$store.state.user,
+            jessibuca: null,
+            version: '',
+            wasm: false,
+            vc: "ff",
+            playing: false,
+            quieting: true,
+            loaded: false, // mute
+            showOperateBtns: false,
+            showBandwidth: false,
+            err: "",
+            speed: 0,
+            performance: "",
+            volume: 1,
+            rotate: 0,
+            useWCS: false,
+            useMSE: true,
+            useOffscreen: false,
+            recording: false,
+            recordType: 'webm',
+            scale: 0
+        };
+    },
+    computed: {},
+    watch: {
+        showDialog: {
+            handler(val,old) {
+                if(val){
+                    this.$nextTick(()=>{
+                        this.create();
+                    })
+                    this.getVideoUrl()
+                }else{
+                    if(this.jessibuca){
+                    this.jessibuca.destroy();
+                    this.jessibuca = null;
+                    }
+                }
+            },
+            immediate: true,
+        },
+    },
+    mounted() {
+        window.onerror = (msg) => (this.err = msg);
+    },
+    async unmounted() {
+    if(this.jessibuca){
+      await this.jessibuca.destroy();
+      this.jessibuca = null;
+    }
+  },
+    created() {
+    },
+    methods: {
+         
+        async getVideoUrl(){
+           let {data,code} =  await requestPost('/actual/base/videoMonitoring/getVideoUrl',{monitorCode:this.monitorCode})
+            if(code === 0){
+                this.url = data
+                this.play()
+
+            }
+        },
+        create(options) {
+            console.log('seeee');
+            options = options || {};
+            this.jessibuca = new window.Jessibuca(
+                Object.assign(
+                    {
+                        container: this.$refs.container,
+                        videoBuffer: 0.2, // 缓存时长
+                        isResize: false,
+                        useWCS: this.useWCS,
+                        useMSE: this.useMSE,
+                        text: "",
+                        // background: "bg.jpg",
+                        loadingText: "疯狂加载中...",
+                        // hasAudio:false,
+                        debug: true,
+                        supportDblclickFullscreen: true,
+                        showBandwidth: this.showBandwidth, // 显示网速
+                        operateBtns: {
+                            fullscreen: this.showOperateBtns,
+                            screenshot: this.showOperateBtns,
+                            play: this.showOperateBtns,
+                            audio: this.showOperateBtns,
+                        },
+                        vod: this.vod,
+                        forceNoOffscreen: !this.useOffscreen,
+                        isNotMute: true,
+                        timeout: 10
+                    },
+                    options
+                )
+            );
+            console.log(this.jessibuca,'seeee');
+            
+            var _this = this;
+            this.jessibuca.on("load", function () {
+                console.log("on load");
+            });
+
+            this.jessibuca.on("log", function (msg) {
+                console.log("on log", msg);
+            });
+            this.jessibuca.on("record", function (msg) {
+                console.log("on record:", msg);
+            });
+            this.jessibuca.on("pause", function () {
+                console.log("on pause");
+                _this.playing = false;
+            });
+            this.jessibuca.on("play", function () {
+                console.log("on play");
+                _this.playing = true;
+            });
+            this.jessibuca.on("fullscreen", function (msg) {
+                console.log("on fullscreen", msg);
+            });
+
+            this.jessibuca.on("mute", function (msg) {
+                console.log("on mute", msg);
+                _this.quieting = msg;
+            });
+
+            this.jessibuca.on("mute", function (msg) {
+                console.log("on mute2", msg);
+            });
+
+            this.jessibuca.on("audioInfo", function (msg) {
+                console.log("audioInfo", msg);
+            });
+
+            // this.jessibuca.on("bps", function (bps) {
+            //   // console.log('bps', bps);
+            // });
+            // let _ts = 0;
+            // this.jessibuca.on("timeUpdate", function (ts) {
+            //     console.log('timeUpdate,old,new,timestamp', _ts, ts, ts - _ts);
+            //     _ts = ts;
+            // });
+
+            this.jessibuca.on("videoInfo", function (info) {
+                console.log("videoInfo", info);
+            });
+
+            this.jessibuca.on("error", function (error) {
+                console.log("error", error);
+            });
+
+            this.jessibuca.on("timeout", function () {
+                console.log("timeout");
+            });
+
+            this.jessibuca.on('start', function () {
+                console.log('frame start');
+            })
+
+            this.jessibuca.on("performance", function (performance) {
+                var show = "卡顿";
+                if (performance === 2) {
+                    show = "非常流畅";
+                } else if (performance === 1) {
+                    show = "流畅";
+                }
+                _this.performance = show;
+            });
+            this.jessibuca.on('buffer', function (buffer) {
+                console.log('buffer', buffer);
+            })
+
+            this.jessibuca.on('stats', function (stats) {
+                console.log('stats', stats);
+            })
+
+            this.jessibuca.on('kBps', function (kBps) {
+                console.log('kBps', kBps);
+            });
+
+            this.jessibuca.on("play", () => {
+                this.playing = true;
+                this.loaded = true;
+                this.quieting = this.jessibuca.isMute();
+            });
+
+            this.jessibuca.on('recordingTimestamp', (ts) => {
+                console.log('recordingTimestamp', ts);
+            })
+
+
+            // console.log(this.jessibuca);
+        },
+        play() {
+        // this.jessibuca.onPlay = () => (this.playing = true);
+        // if (this.$refs.playUrl.value) {
+            this.jessibuca.play(this.url);
+        // }
+        },
+        mute() {
+            this.jessibuca.mute();
+        },
+        cancelMute() {
+            this.jessibuca.cancelMute();
+        },
+
+        pause() {
+            this.jessibuca.pause();
+            this.playing = false;
+            this.err = "";
+            this.performance = "";
+        },
+        volumeChange() {
+            this.jessibuca.setVolume(this.volume);
+        },
+        rotateChange() {
+            this.jessibuca.setRotate(this.rotate);
+        },
+        async destroy() {
+            if (this.jessibuca) {
+                await this.jessibuca.destroy();
+            }
+            this.create();
+            this.playing = false;
+            this.loaded = false;
+            this.performance = "";
+        },
+
+        fullscreen() {
+            this.jessibuca.setFullscreen(true);
+        },
+
+        clearView() {
+            this.jessibuca.clearView();
+        },
+
+        startRecord() {
+            const time = new Date().getTime();
+            this.jessibuca.startRecord(time, this.recordType);
+        },
+
+        stopAndSaveRecord() {
+            this.jessibuca.stopRecordAndSave();
+        },
+
+
+        screenShot() {
+            this.jessibuca.screenshot();
+        },
+
+
+        async restartPlay(type) {
+
+            if (type === 'mse') {
+                this.useWCS = false;
+                this.useOffscreen = false;
+            } else if (type === 'wcs') {
+                this.useMSE = false
+            } else if (type === 'offscreen') {
+                this.useMSE = false
+            }
+
+            await this.destroy();
+            setTimeout(() => {
+                this.play();
+            }, 100)
+        },
+
+        changeBuffer() {
+            this.jessibuca.setBufferTime(Number(this.$refs.buffer.value));
+        },
+
+        scaleChange() {
+            this.jessibuca.setScaleMode(this.scale);
+        },
+        handleClose() {
+            this.$emit("close", false);
+            this.item = {};
+        },
+
+    },
+};
+</script>
+<style lang="scss" scoped src="@/assets/scss/dataBoard/popup-info.scss"></style>
+<style lang="scss" scoped>
+@import "@/assets/scss/modules/shequzhili/event-info.scss";
+@import "@/assets/scss/dataBoard/dialog.scss";
+
+@mixin fontStyle {
+    color: #fff !important;
+    font-size: 14px !important;
+}
+
+.title {
+    margin: 0 0 20px 20px;
+    color: #ffffff;
+    font-size: 18px;
+}
+
+.root {
+  display: flex;
+  place-content: center;
+  margin-top: 3rem;
+}
+
+.container-shell {
+  position: relative;
+  backdrop-filter: blur(5px);
+  background: hsla(0, 0%, 50%, 0.5);
+  padding: 30px 4px 10px 4px;
+  /* border: 2px solid black; */
+  width: auto;
+  position: relative;
+  border-radius: 5px;
+  box-shadow: 0 10px 20px;
+}
+
+.container-shell-title {
+  position: absolute;
+  color: darkgray;
+  top: 4px;
+  left: 10px;
+  text-shadow: 1px 1px black;
+}
+
+.tag-version {
+}
+
+#container {
+  background: rgba(13, 14, 27, 0.7);
+  width: 640px;
+  height: 398px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+#container > canvas{
+    width: 100%;
+    height: 100%;
+    transform: none !important;
+    top: 0 !important;
+    left: 0 !important;
+}
+.input {
+  display: flex;
+  align-items: center;
+  margin-top: 10px;
+  color: white;
+  place-content: stretch;
+}
+
+.input2 {
+  bottom: 0px;
+}
+
+.input input[type='input'] {
+  flex: auto;
+}
+
+.err {
+  position: absolute;
+  top: 40px;
+  left: 10px;
+  color: red;
+}
+
+.option {
+  position: absolute;
+  top: 4px;
+  right: 10px;
+  display: flex;
+  place-content: center;
+  font-size: 12px;
+}
+
+.option span {
+  color: white;
+}
+
+
+@media (max-width: 720px) {
+  #container {
+    width: 90vw;
+    height: 52.7vw;
+  }
+}
+</style>

src/views/dataBoard/IoTPerception/Videosurveillance/index.vue

@@ -2,64 +2,24 @@
     <div class="m-jdjs">
       <div class="m-jdjs-js">
 
-        <div class="video-right">
+      <div class="video-right" v-for="(item,index) in list" :key="index">
-          <video   
+          <img   ref="myVideo" src="../image/beijing1.png" />
-            ref="myVideo" src="../image/123.mp4" />
             <div
-            v-if="videoPauseShow"
             class="prism-big-play-btn"
-            @click="videoPlay"
+            @click="videoPlay(item.monitorCode)"
           >
             <div class="outter"></div>
         </div>
       </div>
-           
-      <div class="video-right">
-          <video   
-            ref="myVideo" src="../image/123.mp4" />
-            <div
-            v-if="videoPauseShow"
-            class="prism-big-play-btn"
-            @click="videoPlay"
-          >
-            <div class="outter"></div>
-        </div>
-      </div>
-           
-      <div class="video-right">
-          <video   
-            ref="myVideo" src="../image/123.mp4" />
-            <div
-            v-if="videoPauseShow"
-            class="prism-big-play-btn"
-            @click="videoPlay"
-          >
-            <div class="outter"></div>
-        </div>
-      </div>
-           
-      <div class="video-right">
-          <video   
-            ref="myVideo" src="../image/123.mp4" />
-            <div
-            v-if="videoPauseShow"
-            class="prism-big-play-btn"
-            @click="videoPlay"
-          >
-            <div class="outter"></div>
-        </div>
-      </div>
-          <!-- <video src="../image/123.mp4" />
-          <video src="../image/123.mp4" />
-          <video src="../image/123.mp4" /> -->
       </div>
-
+      <video-dialog :showDialog="showDialog" :monitorCode="monitorCode"  @close="close"></video-dialog>
     </div>
   </template>
   <script>
   import titleSmall from "@/views/dataBoard/satisfactionEval/components/Title/titleSmall.vue";
   import * as echarts from "echarts";
   import resiCategoryMap from "@/views/business/resi-category-map.js";
+  import videoDialog from "./cpts/videoDialog.vue"
   export default {
     name: "jdjs",
     props: {
@@ -71,45 +31,24 @@
     data() {
       return {
         orgId: this.$store.state.chooseArea.chooseName,
-        report: "",
         overview: "",
         loading: false,
         rffxDate:'',
         event12345Num:"",
         provinceSatisfactionNum:"",
         selfInspectNum:"",
-        typeConditionList: [
+        showDialog:false,
-          {
-            label: "本月",
-            value: 1,
-          },
-          {
-            label: "上月",
-            value: 2,
-          },
-          {
-            label: "近三月",
-            value: 3,
-          },
-          {
-            label: "近半年",
-            value: 4,
-          },
-          {
-            label: "近一年",
-            value: 5,
-          },
-        ],
         typeCondition:5,
         endTime:"",
-         startTime:"",
+        startTime:"",
-      videoPauseShow: true,
+        videoPauseShow: true,
+        list:[],
+        monitorCode:''
       };
     },
     watch: {
       currentLevelData(val) {
         if (val.orgId) {
-          this.getReport(val);
           this.getData();
           this.getChartData(val);
         }
@@ -117,43 +56,23 @@
     },
     mounted() {
       if (this.currentLevelData.orgId) {
-        this.getReport(this.currentLevelData);
         this.getChartData();
         this.getData()
       }
     },
     components: {
       titleSmall,
+      videoDialog
     },
     methods: {
-      videoPlay() {
+      videoPlay(code) {
-        //点击盒子让播放按钮隐藏
+        this.showDialog = true;
-      this.videoPauseShow = false;
+        this.monitorCode = code
-        //触发video的播放事件
-      this.$refs.myVideo.play();
       },
-      getReport({ orgId, orgLevel }) {
+      close(){
-        this.$http
+        this.showDialog = false;
-          .get(
-            "/actual/base/streetOverview/communityOverview?orgId=" +
-              orgId +
-              "&level=" +
-              orgLevel
-          )
-          .then(({ data: { data } }) => {
-            this.overview = data;
-          });
-        this.$http
-          .get(
-            "/actual/base/streetOverview/summaryReport?orgId=" +
-              orgId +
-              "&level=" +
-              orgLevel
-          )
-          .then(({ data: { data } }) => {
-            this.report = data;
-          });
       },
+    
       getChartData({ orgId, orgLevel }) {
         this.loading = true
         this.$http.get('/actual/base/resiCategory/categoryCountList?orgId=' +
@@ -338,22 +257,11 @@
       },
       getData() {
         this.loading = true;
-        let {startTime,endTime } = this
-        let params = {
-          level: this.currentLevelData.orgLevel,
-          orgId: this.currentLevelData.orgId,
-          startTime,
-          endTime,
-        };
         this.$http
           .get(
-            "/governance/satisfactionOverview/satisfactionFollowGroup?" +
+            "/actual/base/videoMonitoring/page?page=1&limit=10")
-              this.$paramsFormat(params)
-          )
           .then(({ data: { data } }) => {
-            this.event12345Num = data.event12345Num;
+            this.list = data.list.splice(0,4)
-            this.provinceSatisfactionNum = data.provinceSatisfactionNum;
-            this.selfInspectNum = data.selfInspectNum;
             this.loading = false;
           });
       },

src/views/dataBoard/IoTPerception/index.vue

@@ -289,7 +289,6 @@
       close(){this.showDialog=false},
       close1(){this.showequipmentListMore=false},
       getMore(){
-          console.log(123);
           this.showDialog=true
         }
       },

src/views/dataBoard/IoTPerception/more/index.vue

@@ -2,54 +2,32 @@
     <div>
         <el-dialog :destroy-on-close="true" :modal="true" :modal-append-to-body="false" :visible="showDialog"
             width="993px" @close="handleClose">
-            <div >
+            <div>
                 <div class="main-title main-title2">
-                <Title text="视频监控" />
+                    <Title text="视频监控" />
-            </div>
-            <div class="m-jdjs-js">
-                <div class="video-right">
-                    <video ref="myVideo" src="../image/123.mp4" />
-                    <div v-if="videoPauseShow" class="prism-big-play-btn" @click="videoPlay">
-                        <div class="outter"></div>
-                    </div>
-                </div>
-
-                <div class="video-right">
-                    <video ref="myVideo" src="../image/123.mp4" />
-                    <div v-if="videoPauseShow" class="prism-big-play-btn" @click="videoPlay">
-                        <div class="outter"></div>
-                    </div>
-                </div>
-
-                <div class="video-right">
-                    <video ref="myVideo" src="../image/123.mp4" />
-                    <div v-if="videoPauseShow" class="prism-big-play-btn" @click="videoPlay">
-                        <div class="outter"></div>
-                    </div>
                 </div>
-
+                <div class="m-jdjs-js">
-                <div class="video-right">
+                    <div class="video-right" v-for="(item, index) in list" :key="index">
-                    <video ref="myVideo" src="../image/123.mp4" />
+                        <img ref="myVideo" src="../image/beijing1.png" />
-                    <div v-if="videoPauseShow" class="prism-big-play-btn" @click="videoPlay">
+                        <div class="prism-big-play-btn" @click="videoPlay(item.monitorCode)">
-                        <div class="outter"></div>
+                            <div class="outter"></div>
+                        </div>
                     </div>
                 </div>
-                <!-- <video src="../image/123.mp4" />
-  <video src="../image/123.mp4" />
-  <video src="../image/123.mp4" /> -->
-            </div>
             </div>
         </el-dialog>
-
+        <video-dialog :showDialog="showDialogVideo" :monitorCode="monitorCode"  @close="handleVideoClose"></video-dialog>
     </div>
 </template>
 <script>
 import Title from "@/views/dataBoard/satisfactionEval/components/Title";
+import videoDialog from "../Videosurveillance/cpts/videoDialog.vue"
+
 export default {
     name: "moreDialog",
     components: {
         Title,
-
+        videoDialog
     },
     props: {
         showDialog: {
@@ -60,186 +38,42 @@ export default {
     },
     data() {
         return {
-            bubbleList: [
-                {
-                    w: 8,
-                    x: 10
-                },
-                {
-                    w: 9,
-                    x: 50
-                },
-                {
-                    w: 4,
-                    x: 30
-                },
-                {
-                    w: 5,
-                    x: 80
-                },
-                {
-                    w: 4,
-                    x: 30
-                },
-                {
-                    w: 4,
-                    x: 70
-                },
-                {
-                    w: 6,
-                    x: 20
-                },
-                {
-                    w: 8,
-                    x: 50
-                },
-                {
-                    w: 4,
-                    x: 60
-                },
-                {
-                    w: 6,
-                    x: 65
-                }
-            ],
-            list: [
-                {
-                    title: '常用功能',
-                    children: [
-                        {
-                            label: '物联一张图',
-                            navigator: ''
-                        },
-                        {
-                            label: '居民选举',
-                            navigator: ''
-                        },
-                        {
-                            label: '派件管理',
-                            navigator: 'shequzhili-Delivery-index'
-                        }, {
-                            label: '社区宣传',
-                            navigator: 'communityParty-comPromotion-index'
-                        }, {
-                            label: '社区活动',
-                            navigator: 'volunteer-activityArchive-index'
-                        }
-                    ]
-                },
-                {
-                    title: '人房管理',
-                    children: [
-                        {
-                            label: '房屋管理',
-                            navigator: 'base-community-community'
-                        },
-                        {
-                            label: '居民信息',
-                            navigator: 'base-resi'
-                        },
-                        {
-                            label: '居民分类',
-                            navigator: 'base-classification'
-                        }, {
-                            label: '迁入记录',
-                            navigator: 'base-huji-immigration-index'
-                        }, {
-                            label: '迁出记录',
-                            navigator: 'plugins-change-changerelocation'
-                        },
-                        {
-                            label: '死亡记录',
-                            navigator: 'plugins-change-changedeath'
-                        },
-                        {
-                            label: '虚拟网格居民',
-                            navigator: 'base-virtualResi'
-                        },
-                        {
-                            label: '智能导入',
-                            navigator: 'base-smartImport'
-                        }
-                    ]
-                },
-                {
-                    title:'社区党建',
-                    children:[
-                        {
-                            label: '党组织管理',
-                            navigator: 'communityParty-partyOrg-orgTree'
-                        },{
-                            label: '党员信息',
-                            navigator: 'communityParty-members-memberList'
-                        },{
-                            label: '联建单位',
-                            navigator: 'communityParty-regionalParty-units'
-                        },{
-                            label: '联建活动',
-                            navigator: 'communityParty-regionalParty-activitys'
-                        },{
-                            label: '社区宣传',
-                            navigator: 'communityParty-comPromotion-index'
-                        },{
-                            label: '社区活动',
-                            navigator: 'communityParty-activity-index'
-                        }
-                    ]
-                }
-            ],
             loading: false,
             loading1: false,
-            user: this.$store.state.user
+            user: this.$store.state.user,
+            showDialogVideo:false,
+            monitorCode:null
         };
     },
     computed: {},
     watch: {
         showDialog: {
             handler(val) {
-                if (val) {
+                this.getData()
-                    this.bubbleList.forEach((i, index) => {
-                        this.$set(
-                            i,
-                            'c',
-                            this.forArrayValue(
-                                [
-                                    'rgba(255,255,255,0.2)',
-                                    'rgba(255,255,255,0.4)',
-                                    'rgba(255,255,255,0.6)'
-                                ],
-                                index
-                            )
-                        )
-                    })
-                    console.log(this.bubbleList);
-                } else {
-                  
-                }
             },
             immediate: true,
         },
     },
 
     created() {
-        console.log('showDialog:', this.showDialog);  // 输出 showDialog 的值
-         console.log('type:', this.type);  // 输出 type 的值
-        
-        this.bubbleList.forEach((i, index) => {
-        this.$set(
-            i,
-            'c',
-            this.forArrayValue(
-            [
-                'rgba(255,255,255,0.2)',
-                'rgba(255,255,255,0.4)',
-                'rgba(255,255,255,0.6)'
-            ],
-            index
-            )
-        )
-        })
     },
     methods: {
+        getData() {
+        this.loading = true;
+        this.$http
+          .get(
+            "/actual/base/videoMonitoring/page?page=1&limit=10")
+          .then(({ data: { data } }) => {
+            this.list = data.list.splice(0,4)
+            this.loading = false;
+          });
+      },
+        videoPlay(code) {
+            console.log(code);
             
+        this.showDialogVideo = true;
+        this.monitorCode = code
+      },
         forArrayValue(array, sort) {
             return array[sort % array.length]
         },
@@ -247,14 +81,14 @@ export default {
             this.$emit("close", false);
             this.item = {};
         },
-        // handelClickNavigator(navigator) {
+        handleVideoClose(val){
-        //     this.$emit('handelClickNavigator', navigator)
+            this.showDialogVideo = val
-        // }
+        }
     },
     mounted() {
-    console.log('showDialog:', this.showDialog);  // 输出 showDialog 的值
+        console.log('showDialog:', this.showDialog);  // 输出 showDialog 的值
-    console.log('type:', this.type);  // 输出 type 的值
+        console.log('type:', this.type);  // 输出 type 的值
-  }
+    }
 };
 </script>
 <style lang="scss" scoped src="@/assets/scss/dataBoard/popup-info.scss"></style>
@@ -369,77 +203,78 @@ section {
 }
 
 
-    .m-jdjs-js{
+.m-jdjs-js {
-        margin: 10px 16px;
+    margin: 10px 16px;
-        display: grid;
+    display: grid;
-        grid-template-columns: repeat(4, 1fr); /* 每行 2 个元素，1fr 是均分空间 */
+    grid-template-columns: repeat(4, 1fr);
-        gap: 10px; /* 设置每个元素之间的间距 */
+    /* 每行 2 个元素，1fr 是均分空间 */
-        video {
+    gap: 10px;
-                width: 210px;
-                height: 120px;
-                .video-right {
-        // width: 400px;
-        // height: 350px;
-        position: relative;
-        background: #000;
-        .prism-big-play-btn {
-          position: absolute;
-          transform: translate(-50%, -50%);
-          left: 50%;
-          top: 50%;
-          width: 32px;
-          height: 32px;
-          background: url("../image/vidio.png") no-repeat;
-          background-size: contain;
-          cursor: pointer;
-          .outter {
-            border: 7px solid rgba(255, 255, 255, 0.51);
-            width: 32px;
-            height: 32px;
-            border-radius: 100%;
-            position: absolute;
-            box-sizing: border-box;
-            top: 0;
-            left: 0;
-          }
-          .outter:hover {
-            content: "";
-            width: 80px;
-            height: 80px;
-            position: absolute;
-            left: 50%;
-            top: 50%;
-            margin-left: -40px;
-            margin-top: -40px;
-            border-radius: 50%;
-            //a1为经过@keyframes 规则建立的动画名称，可本身定义web
-            // a2 为动画时常 ，例如：1s   2s   可自行规定浏览器
-            // a3 为css自带的动画效果，有以下几个：
-            // 类名称+持续时间+（变化方式,延迟时间，重复次数（infinite循环），重复方式，开始结束的状态）
-            animation: warn 1s ease-out 0s infinite;
-          }
-          // 在warn方法里,用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。
-          // 0% 是动画的开始，100% 是动画的完成，建议使用百分比，会更加详细：
-          @keyframes warn {
-            0% {
-              // transform: scale表示缩放，值表示倍数，可以指定X/Y轴
-              transform: scale(0.5);
-              opacity: 1;
-            }
 
-            30% {
+    /* 设置每个元素之间的间距 */
-              opacity: 1;
-            }
   
-            100% {
-              transform: scale(1.4);
-              opacity: 0;
-            }
-          }
-        }
-      } 
-            }
-    }
 
+        .video-right {
+            position: relative;
+            background: #000;
 
+            .prism-big-play-btn {
+                position: absolute;
+                transform: translate(-50%, -50%);
+                left: 50%;
+                top: 50%;
+                width: 32px;
+                height: 32px;
+                background: url("../image/vidio.png") no-repeat;
+                background-size: contain;
+                cursor: pointer;
+
+                .outter {
+                    border: 7px solid rgba(255, 255, 255, 0.51);
+                    width: 32px;
+                    height: 32px;
+                    border-radius: 100%;
+                    position: absolute;
+                    box-sizing: border-box;
+                    top: 0;
+                    left: 0;
+                }
+
+                .outter:hover {
+                    content: "";
+                    width: 80px;
+                    height: 80px;
+                    position: absolute;
+                    left: 50%;
+                    top: 50%;
+                    margin-left: -40px;
+                    margin-top: -40px;
+                    border-radius: 50%;
+                    //a1为经过@keyframes 规则建立的动画名称，可本身定义web
+                    // a2 为动画时常 ，例如：1s   2s   可自行规定浏览器
+                    // a3 为css自带的动画效果，有以下几个：
+                    // 类名称+持续时间+（变化方式,延迟时间，重复次数（infinite循环），重复方式，开始结束的状态）
+                    animation: warn 1s ease-out 0s infinite;
+                }
+
+                // 在warn方法里,用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。
+                // 0% 是动画的开始，100% 是动画的完成，建议使用百分比，会更加详细：
+                @keyframes warn {
+                    0% {
+                        // transform: scale表示缩放，值表示倍数，可以指定X/Y轴
+                        transform: scale(0.5);
+                        opacity: 1;
+                    }
+
+                    30% {
+                        opacity: 1;
+                    }
+
+                    100% {
+                        transform: scale(1.4);
+                        opacity: 0;
+                    }
+                }
+            }
+    }
+}
 </style>