历史监控页查看视频 video组件引用

package-lock.json

@@ -1073,7 +1073,6 @@
             "version": "7.11.2",
             "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.11.2.tgz",
             "integrity": "sha512-TeWkU52so0mPtDcaCTxNBI/IHiz0pZgr8VEFqXFtZWpYD08ZB6FaSwVAS8MKRQAP3bYKiVjwysOJgMFY28o6Tw==",
-            "dev": true,
             "requires": {
                 "regenerator-runtime": "^0.13.4"
             },
@@ -1081,8 +1080,7 @@
                 "regenerator-runtime": {
                     "version": "0.13.7",
                     "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz",
-                    "integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew==",
-                    "dev": true
+                    "integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew=="
                 }
             }
         },
@@ -1556,6 +1554,52 @@
                 }
             }
         },
+        "@videojs/http-streaming": {
+            "version": "2.2.4",
+            "resolved": "https://registry.npmjs.org/@videojs/http-streaming/-/http-streaming-2.2.4.tgz",
+            "integrity": "sha512-gzT46RpAEegOhMId/zZ6uXCVGDMPOv8qmoTykBuvd6/4lVM3lZ1ZJCq0kytAkisDuDKipy93gP46oZEtonlc/Q==",
+            "requires": {
+                "@babel/runtime": "^7.5.5",
+                "@videojs/vhs-utils": "^2.2.1",
+                "aes-decrypter": "3.1.0",
+                "global": "^4.3.2",
+                "m3u8-parser": "4.5.0",
+                "mpd-parser": "0.14.0",
+                "mux.js": "5.6.7",
+                "video.js": "^6 || ^7"
+            }
+        },
+        "@videojs/vhs-utils": {
+            "version": "2.3.0",
+            "resolved": "https://registry.npmjs.org/@videojs/vhs-utils/-/vhs-utils-2.3.0.tgz",
+            "integrity": "sha512-ThSmm91S7tuIJ757ON50K4y7S/bvKN4+B0tu303gCOxaG57PoP1UvPfMQZ90XGhxwNgngexVojOqbBHhTvXVHQ==",
+            "requires": {
+                "@babel/runtime": "^7.5.5",
+                "global": "^4.3.2",
+                "url-toolkit": "^2.1.6"
+            }
+        },
+        "@videojs/xhr": {
+            "version": "2.5.1",
+            "resolved": "https://registry.npmjs.org/@videojs/xhr/-/xhr-2.5.1.tgz",
+            "integrity": "sha512-wV9nGESHseSK+S9ePEru2+OJZ1jq/ZbbzniGQ4weAmTIepuBMSYPx5zrxxQA0E786T5ykpO8ts+LayV+3/oI2w==",
+            "requires": {
+                "@babel/runtime": "^7.5.5",
+                "global": "~4.4.0",
+                "is-function": "^1.0.1"
+            },
+            "dependencies": {
+                "global": {
+                    "version": "4.4.0",
+                    "resolved": "https://registry.npmjs.org/global/-/global-4.4.0.tgz",
+                    "integrity": "sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==",
+                    "requires": {
+                        "min-document": "^2.19.0",
+                        "process": "^0.11.10"
+                    }
+                }
+            }
+        },
         "@vue/babel-helper-vue-jsx-merge-props": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/@vue/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-1.0.0.tgz",
@@ -2372,6 +2416,17 @@
             "integrity": "sha512-aT6camzM4xEA54YVJYSqxz1kv4IHnQZRtThJJHhUMRExaU5spC7jX5ugSwTaTgJliIgs4VhZOk7htClvQ/LmRA==",
             "dev": true
         },
+        "aes-decrypter": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/aes-decrypter/-/aes-decrypter-3.1.0.tgz",
+            "integrity": "sha512-wL1NFwP2yNrJG4InpXYFhhYe9TfonnDyhyxMq2+K9/qt+SrZzUieOpviN6pkDly7GawTqw5feehk0rn5iYo00g==",
+            "requires": {
+                "@babel/runtime": "^7.5.5",
+                "@videojs/vhs-utils": "^2.2.1",
+                "global": "^4.3.2",
+                "pkcs7": "^1.0.4"
+            }
+        },
         "aggregate-error": {
             "version": "3.0.1",
             "resolved": "https://registry.npmjs.org/aggregate-error/-/aggregate-error-3.0.1.tgz",
@@ -4905,6 +4960,11 @@
                 }
             }
         },
+        "dom-walk": {
+            "version": "0.1.2",
+            "resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.2.tgz",
+            "integrity": "sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w=="
+        },
         "domain-browser": {
             "version": "1.2.0",
             "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz",
@@ -6351,6 +6411,22 @@
             "integrity": "sha1-jFoUlNIGbFcMw7/kSWF1rMTVAqs=",
             "dev": true
         },
+        "global": {
+            "version": "4.3.2",
+            "resolved": "https://registry.npmjs.org/global/-/global-4.3.2.tgz",
+            "integrity": "sha1-52mJJopsdMOJCLEwWxD8DjlOnQ8=",
+            "requires": {
+                "min-document": "^2.19.0",
+                "process": "~0.5.1"
+            },
+            "dependencies": {
+                "process": {
+                    "version": "0.5.2",
+                    "resolved": "https://registry.npmjs.org/process/-/process-0.5.2.tgz",
+                    "integrity": "sha1-FjjYqONML0QKkduVq5rrZ3/Bhc8="
+                }
+            }
+        },
         "globals": {
             "version": "11.12.0",
             "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
@@ -6911,6 +6987,11 @@
             "integrity": "sha1-8w9xbI4r00bHtn0985FVZqfAVgc=",
             "dev": true
         },
+        "individual": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/individual/-/individual-2.0.0.tgz",
+            "integrity": "sha1-gzsJfa0jKU52EXqY+zjg2a1hu5c="
+        },
         "infer-owner": {
             "version": "1.0.4",
             "resolved": "https://registry.npmjs.org/infer-owner/-/infer-owner-1.0.4.tgz",
@@ -7264,6 +7345,11 @@
             "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
             "dev": true
         },
+        "is-function": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/is-function/-/is-function-1.0.2.tgz",
+            "integrity": "sha512-lw7DUp0aWXYg+CBCN+JKkcE0Q2RayZnSvnZBlwgxHBQhqt5pZNVy4Ri7H9GmmXkdu7LUthszM+Tor1u/2iBcpQ=="
+        },
         "is-glob": {
             "version": "4.0.1",
             "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz",
@@ -7599,6 +7685,11 @@
                 "verror": "1.10.0"
             }
         },
+        "keycode": {
+            "version": "2.2.0",
+            "resolved": "https://registry.npmjs.org/keycode/-/keycode-2.2.0.tgz",
+            "integrity": "sha1-PQr1bce4uOXLqNCpfxByBO7CKwQ="
+        },
         "killable": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz",
@@ -7873,6 +7964,16 @@
                 "yallist": "^3.0.2"
             }
         },
+        "m3u8-parser": {
+            "version": "4.5.0",
+            "resolved": "https://registry.npmjs.org/m3u8-parser/-/m3u8-parser-4.5.0.tgz",
+            "integrity": "sha512-RGm/1WVCX3o1bSWbJGmJUu4zTbtJy8lImtgHM4CESFvJRXYztr1j6SW/q9/ghYOrUjgH7radsIar+z1Leln0sA==",
+            "requires": {
+                "@babel/runtime": "^7.5.5",
+                "@videojs/vhs-utils": "^2.2.1",
+                "global": "^4.3.2"
+            }
+        },
         "make-dir": {
             "version": "2.1.0",
             "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
@@ -8152,6 +8253,14 @@
             "integrity": "sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ==",
             "dev": true
         },
+        "min-document": {
+            "version": "2.19.0",
+            "resolved": "https://registry.npmjs.org/min-document/-/min-document-2.19.0.tgz",
+            "integrity": "sha1-e9KC4/WELtKVu3SM3Z8f+iyCRoU=",
+            "requires": {
+                "dom-walk": "^0.1.0"
+            }
+        },
         "mini-css-extract-plugin": {
             "version": "0.9.0",
             "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.9.0.tgz",
@@ -8326,6 +8435,17 @@
                 "run-queue": "^1.0.3"
             }
         },
+        "mpd-parser": {
+            "version": "0.14.0",
+            "resolved": "https://registry.npmjs.org/mpd-parser/-/mpd-parser-0.14.0.tgz",
+            "integrity": "sha512-HqXQS3WLofcnYFcxv5oWdlciddUaEnN3NasXLVQ793mdnZRrinjz2Yk1DsUYPDYOUWf6ZBBqbFhaJT5LiT2ouA==",
+            "requires": {
+                "@babel/runtime": "^7.5.5",
+                "@videojs/vhs-utils": "^2.2.1",
+                "global": "^4.3.2",
+                "xmldom": "^0.1.27"
+            }
+        },
         "ms": {
             "version": "2.0.0",
             "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
@@ -8358,6 +8478,11 @@
             "integrity": "sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==",
             "dev": true
         },
+        "mux.js": {
+            "version": "5.6.7",
+            "resolved": "https://registry.npmjs.org/mux.js/-/mux.js-5.6.7.tgz",
+            "integrity": "sha512-YSr6B8MUgE4S18MptbY2XM+JKGbw9JDkgs7YkuE/T2fpDKjOhZfb/nD6vmsVxvLYOExWNaQn1UGBp6PGsnTtew=="
+        },
         "mz": {
             "version": "2.7.0",
             "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
@@ -9226,6 +9351,14 @@
                 "pinkie": "^2.0.0"
             }
         },
+        "pkcs7": {
+            "version": "1.0.4",
+            "resolved": "https://registry.npmjs.org/pkcs7/-/pkcs7-1.0.4.tgz",
+            "integrity": "sha512-afRERtHn54AlwaF2/+LFszyAANTCggGilmcmILUzEjvs3XgFZT+xE6+QWQcAGmu4xajy+Xtj7acLOPdx5/eXWQ==",
+            "requires": {
+                "@babel/runtime": "^7.5.5"
+            }
+        },
         "pkg-dir": {
             "version": "3.0.0",
             "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-3.0.0.tgz",
@@ -9894,8 +10027,7 @@
         "process": {
             "version": "0.11.10",
             "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
-            "integrity": "sha1-czIwDoQBYb2j5podHZGn1LwW8YI=",
-            "dev": true
+            "integrity": "sha1-czIwDoQBYb2j5podHZGn1LwW8YI="
         },
         "process-nextick-args": {
             "version": "2.0.1",
@@ -10568,6 +10700,14 @@
                 "aproba": "^1.1.1"
             }
         },
+        "rust-result": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/rust-result/-/rust-result-1.0.0.tgz",
+            "integrity": "sha1-NMdbLm3Dn+WHXlveyFteD5FTb3I=",
+            "requires": {
+                "individual": "^2.0.0"
+            }
+        },
         "rxjs": {
             "version": "6.6.2",
             "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.6.2.tgz",
@@ -10583,6 +10723,14 @@
             "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
             "dev": true
         },
+        "safe-json-parse": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/safe-json-parse/-/safe-json-parse-4.0.0.tgz",
+            "integrity": "sha1-fA9XjPzNEtM6ccDgVBPi7KFx6qw=",
+            "requires": {
+                "rust-result": "^1.0.0"
+            }
+        },
         "safe-regex": {
             "version": "1.1.0",
             "resolved": "https://registry.npmjs.org/safe-regex/-/safe-regex-1.1.0.tgz",
@@ -12314,6 +12462,11 @@
                 "requires-port": "^1.0.0"
             }
         },
+        "url-toolkit": {
+            "version": "2.2.1",
+            "resolved": "https://registry.npmjs.org/url-toolkit/-/url-toolkit-2.2.1.tgz",
+            "integrity": "sha512-8+DzgrtDZYZGhHaAop5WGVghMdCfOLGbhcArsJD0qDll71FXa7EeKxi2hilPIscn2nwMz4PRjML32Sz4JTN0Xw=="
+        },
         "use": {
             "version": "3.1.1",
             "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz",
@@ -12421,6 +12574,34 @@
                 "extsprintf": "^1.2.0"
             }
         },
+        "video.js": {
+            "version": "7.10.2",
+            "resolved": "https://registry.npmjs.org/video.js/-/video.js-7.10.2.tgz",
+            "integrity": "sha512-kJTTrqcQn2MhPzWR8zQs6W3HPJWpowO/ZGZcKt2dcJeJdJT0dEDLYtiFdjV37SylCmu66V0flRnV8cipbthveQ==",
+            "requires": {
+                "@babel/runtime": "^7.9.2",
+                "@videojs/http-streaming": "2.2.4",
+                "@videojs/xhr": "2.5.1",
+                "global": "4.3.2",
+                "keycode": "^2.2.0",
+                "safe-json-parse": "4.0.0",
+                "videojs-font": "3.2.0",
+                "videojs-vtt.js": "^0.15.2"
+            }
+        },
+        "videojs-font": {
+            "version": "3.2.0",
+            "resolved": "https://registry.npmjs.org/videojs-font/-/videojs-font-3.2.0.tgz",
+            "integrity": "sha512-g8vHMKK2/JGorSfqAZQUmYYNnXmfec4MLhwtEFS+mMs2IDY398GLysy6BH6K+aS1KMNu/xWZ8Sue/X/mdQPliA=="
+        },
+        "videojs-vtt.js": {
+            "version": "0.15.2",
+            "resolved": "https://registry.npmjs.org/videojs-vtt.js/-/videojs-vtt.js-0.15.2.tgz",
+            "integrity": "sha512-kEo4hNMvu+6KhPvVYPKwESruwhHC3oFis133LwhXHO9U7nRnx0RiJYMiqbgwjgazDEXHR6t8oGJiHM6wq5XlAw==",
+            "requires": {
+                "global": "^4.3.1"
+            }
+        },
         "viewerjs": {
             "version": "1.9.0",
             "resolved": "https://registry.npmjs.org/viewerjs/-/viewerjs-1.9.0.tgz",
@@ -13335,6 +13516,11 @@
                 "async-limiter": "~1.0.0"
             }
         },
+        "xmldom": {
+            "version": "0.1.31",
+            "resolved": "https://registry.npmjs.org/xmldom/-/xmldom-0.1.31.tgz",
+            "integrity": "sha512-yS2uJflVQs6n+CyjHoaBmVSqIDevTAWrzMmjG1Gc7h1qQ7uVozNhEPJAwZXWyGQ/Gafo3fCwrcaokezLPupVyQ=="
+        },
         "xtend": {
             "version": "4.0.2",
             "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",

package.json

@@ -15,6 +15,7 @@
         "path-to-regexp": "^6.2.0",
         "style-loader": "^2.0.0",
         "v-viewer": "^1.5.1",
+        "video.js": "^7.10.2",
         "vue": "^2.6.11",
         "vue-router": "^3.2.0",
         "vuex": "^3.4.0"

src/main.js

@@ -25,8 +25,14 @@ import 'vue-happy-scroll/docs/happy-scroll.css'
 // 图片预览插件 viewer
 import 'viewerjs/dist/viewer.css'
 import viewer from 'v-viewer'
+
 Vue.use(viewer)
 
+import Video from 'video.js'
+import 'video.js/dist/video-js.css'
+
+Vue.prototype.$video = Video
+
 new Vue({
     router,
     store,

src/views/historyMonitoring/index.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="history bg-white">
         <div class="ant-advanced-search-form">
-            <a-form layout="inline" :label-col="labelCol" :wrapper-col="wrapperCol" :form="queryParam">
+            <a-form layout="inline" :form="queryParam">
                 <a-row :gutter="12">
                     <a-col :span="8" style="text-align: left">
                         <a-form-item label="工单号">
@@ -48,7 +48,7 @@
               </span>
           </span>
             <span slot="videoPath1" slot-scope="text">
-              <a-button type="link" v-if="text.videoPath1">
+              <a-button type="link" v-if="text.videoPath1" @click="showModel(text.videoPath1)">
                   查看视频
               </a-button>
               <span v-else>
@@ -56,7 +56,7 @@
               </span>
           </span>
             <span slot="videoPath2" slot-scope="text">
-              <a-button type="link" v-if="text.videoPath2">
+              <a-button type="link" v-if="text.videoPath2" @click="showModel(text.videoPath2)">
                   查看视频
               </a-button>
               <span v-else>
@@ -64,11 +64,17 @@
               </span>
           </span>
         </a-table>
+        <Model
+            :visible.sync="visible"
+            :vid.sync="vid"
+            @close="closeModel"
+        />
     </div>
 </template>
 
 <script>
     import {imgUrl, videoUrl} from "@/api/importExcel";
+    import Model from "./model.vue"
 export default {
     name: "historyMonitoring",
     components: {
@@ -76,8 +82,6 @@ export default {
     },
     data() {
         return {
-            labelCol: {span: 6},
-            wrapperCol: {span: 18},
             queryParam: {},
             pageNum: 1,
             pageSize: 10,
@@ -139,6 +143,8 @@ export default {
                     scopedSlots: {customRender: 'videoPath2'}
                 },
             ],
+            visible: false,
+            vid: ''
         };
     },
     mounted() {
@@ -188,6 +194,7 @@ export default {
             });
         },
         onTimeChange(date, dateString) {
+            this.handleReset()
             console.log(date)
             console.log(date[0].format('X'))
             this.queryParam.startTimestamp = date[0].format('X')
@@ -198,7 +205,18 @@ export default {
             this.queryParam.endTimestamp = ""
             this.time = ""
         },
+        showModel(data) {
+            this.visible = true
+            this.vid = videoUrl + data
         },
+        closeModel(visible, data) {
+            this.visible = visible
+            this.vid = data
+        },
+    },
+    components: {
+        Model
+    }
 };
 </script>
 

src/views/historyMonitoring/model.vue

@@ -0,0 +1,102 @@
+<template>
+    <div v-if="isShow">
+        <a-modal
+            v-model="isShow"
+            @cancel="handleCancel"
+            :footer="null"
+            :maskClosable="false"
+            :bodyStyle="{padding:0}"
+            :centered="true"
+            class="video-model"
+        >
+            <div slot="closeIcon">
+                <div class="video-close">
+                    ╳
+                </div>
+            </div>
+            <div class="test_two_box">
+                <video
+                    id="myVideo"
+                    class="video-js"
+                    :autoplay="true"
+                    controls
+                >
+                    <source
+                        :src="video"
+                        type="video/mp4"
+                    >
+                </video>
+            </div>
+        </a-modal>
+    </div>
+</template>
+<style lang="scss" scoped>
+    .video-model {
+        .across-layout {
+            display: flex;
+        }
+    }
+
+    .ant-btn {
+        white-space: inherit;
+        text-align: left;
+    }
+
+    .video-js {
+        width: 100%;
+        height: 300px;
+    }
+
+    .video-close {
+        position: absolute;
+        right: 10px;
+        top: 10px;
+        color: #ffffff;
+        font-size: 18px;
+        width: 24px;
+        height: 24px;
+        background: rgba(0, 0, 0, 0.5);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 10;
+    }
+</style>
+<script>
+    export default {
+        props: ['visible', 'vid'],
+        watch: {
+            //监听并接收父组件的visible并赋值给isShow（子组件接收父组件props传过来的值时不能起一样的类名，会报重复定义的错）
+            visible: function (newVal) {
+                this.isShow = newVal;  //newVal即是visible
+                // newVal && this.showConfirm(); //newVal存在的话执行showConfirm函数
+            },
+            vid: function (newVal) {
+                console.log(newVal)
+                console.log(1111111)
+                this.video = newVal
+                this.$nextTick(() => {   //this.$nextTick解决不能在表单渲染之前赋值的报错问题
+
+                })
+
+            },
+        },
+        data() {
+            return {
+                isShow: false,
+                confirmLoading: false,
+                video: '',
+            };
+        },
+        mounted() {
+            console.log('mounted执行了')
+        },
+        methods: {
+            handleCancel() {
+                this.$emit('close', false, '')
+            },
+
+        },
+    };
+</script>
+