Skip to content

X
xxx_phase2_web
Commit deb50e5d authored by 以墨为白's avatar 以墨为白 🎧
Browse files
Options

视频播放组件

parent dc2f0f1b
Hide whitespace changes
Inline Side-by-side
Showing with 646 additions and 393 deletions
package-lock.json
View file @ deb50e5d
......@@ -1615,6 +1615,74 @@
"@types/node": "*"
}
},
"@videojs/http-streaming": {
"version": "3.7.0",
"resolved": "https://registry.npmmirror.com/@videojs/http-streaming/-/http-streaming-3.7.0.tgz",
"integrity": "sha512-5uLFKBL8CvD56dxxJyuxqB5CY0tdoa4SE9KbXakeiAy6iFBUEPvTr2YGLKEWvQ8Lojs1wl+FQndLdv+GO7t9Fw==",
"requires": {
"@babel/runtime": "^7.12.5",
"@videojs/vhs-utils": "4.0.0",
"aes-decrypter": "4.0.1",
"global": "^4.4.0",
"m3u8-parser": "^7.1.0",
"mpd-parser": "^1.2.2",
"mux.js": "7.0.1",
"video.js": "^7 || ^8"
},
"dependencies": {
"m3u8-parser": {
"version": "7.1.0",
"resolved": "https://registry.npmmirror.com/m3u8-parser/-/m3u8-parser-7.1.0.tgz",
"integrity": "sha512-7N+pk79EH4oLKPEYdgRXgAsKDyA/VCo0qCHlUwacttQA0WqsjZQYmNfywMvjlY9MpEBVZEt0jKFd73Kv15EBYQ==",
"requires": {
"@babel/runtime": "^7.12.5",
"@videojs/vhs-utils": "^3.0.5",
"global": "^4.4.0"
},
"dependencies": {
"@videojs/vhs-utils": {
"version": "3.0.5",
"resolved": "https://registry.npmmirror.com/@videojs/vhs-utils/-/vhs-utils-3.0.5.tgz",
"integrity": "sha512-PKVgdo8/GReqdx512F+ombhS+Bzogiofy1LgAj4tN8PfdBx3HSS7V5WfJotKTqtOWGwVfSWsrYN/t09/DSryrw==",
"requires": {
"@babel/runtime": "^7.12.5",
"global": "^4.4.0",
"url-toolkit": "^2.2.1"
}
}
}
},
"mux.js": {
"version": "7.0.1",
"resolved": "https://registry.npmmirror.com/mux.js/-/mux.js-7.0.1.tgz",
"integrity": "sha512-Omz79uHqYpMP1V80JlvEdCiOW1hiw4mBvDh9gaZEpxvB+7WYb2soZSzfuSRrK2Kh9Pm6eugQNrIpY/Bnyhk4hw==",
"requires": {
"@babel/runtime": "^7.11.2",
"global": "^4.4.0"
}
}
}
},
"@videojs/vhs-utils": {
"version": "4.0.0",
"resolved": "https://registry.npmmirror.com/@videojs/vhs-utils/-/vhs-utils-4.0.0.tgz",
"integrity": "sha512-xJp7Yd4jMLwje2vHCUmi8MOUU76nxiwII3z4Eg3Ucb+6rrkFVGosrXlMgGnaLjq724j3wzNElRZ71D/CKrTtxg==",
"requires": {
"@babel/runtime": "^7.12.5",
"global": "^4.4.0",
"url-toolkit": "^2.2.1"
}
},
"@videojs/xhr": {
"version": "2.6.0",
"resolved": "https://registry.npmmirror.com/@videojs/xhr/-/xhr-2.6.0.tgz",
"integrity": "sha512-7J361GiN1tXpm+gd0xz2QWr3xNWBE+rytvo8J3KuggFaLg+U37gZQ2BuPLcnkfGffy2e+ozY70RHC8jt7zjA6Q==",
"requires": {
"@babel/runtime": "^7.5.5",
"global": "~4.4.0",
"is-function": "^1.0.1"
}
},
"@vue/component-compiler-utils": {
"version": "3.2.2",
"resolved": "https://registry.nlark.com/@vue/component-compiler-utils/download/@vue/component-compiler-utils-3.2.2.tgz?cache=0&sync_timestamp=1623744193009&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40vue%2Fcomponent-compiler-utils%2Fdownload%2F%40vue%2Fcomponent-compiler-utils-3.2.2.tgz",
......@@ -1812,6 +1880,11 @@
"integrity": "sha512-gNGTiTrjEVQ0OcVnzsRSqTxaBSr+dmTfm+qJsCDluky8uhdLWep7Gcr62QsAKHTMxjCS/8nEITsmFAhfIx+QSw==",
"dev": true
},
"@xmldom/xmldom": {
"version": "0.8.10",
"resolved": "https://registry.npmmirror.com/@xmldom/xmldom/-/xmldom-0.8.10.tgz",
"integrity": "sha512-2WALfTl4xo2SkGCYRt6rDTFfk9R1czmBvUQy12gK2KuRKIpWEhcbbzy8EZXtz/jkRqHX8bFEc6FC1HjX4TUWYw=="
},
"@xtuc/ieee754": {
"version": "1.2.0",
"resolved": "https://registry.nlark.com/@xtuc/ieee754/download/@xtuc/ieee754-1.2.0.tgz",
......@@ -1872,6 +1945,29 @@
"printj": "~1.1.0"
}
},
"aes-decrypter": {
"version": "4.0.1",
"resolved": "https://registry.npmmirror.com/aes-decrypter/-/aes-decrypter-4.0.1.tgz",
"integrity": "sha512-H1nh/P9VZXUf17AA5NQfJML88CFjVBDuGkp5zDHa7oEhYN9TTpNLJknRY1ie0iSKWlDf6JRnJKaZVDSQdPy6Cg==",
"requires": {
"@babel/runtime": "^7.12.5",
"@videojs/vhs-utils": "^3.0.5",
"global": "^4.4.0",
"pkcs7": "^1.0.4"
},
"dependencies": {
"@videojs/vhs-utils": {
"version": "3.0.5",
"resolved": "https://registry.npmmirror.com/@videojs/vhs-utils/-/vhs-utils-3.0.5.tgz",
"integrity": "sha512-PKVgdo8/GReqdx512F+ombhS+Bzogiofy1LgAj4tN8PfdBx3HSS7V5WfJotKTqtOWGwVfSWsrYN/t09/DSryrw==",
"requires": {
"@babel/runtime": "^7.12.5",
"global": "^4.4.0",
"url-toolkit": "^2.2.1"
}
}
}
},
"ajv": {
"version": "6.12.6",
"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
......@@ -3975,6 +4071,11 @@
"entities": "^2.0.0"
}
},
"dom-walk": {
"version": "0.1.2",
"resolved": "https://registry.npmmirror.com/dom-walk/-/dom-walk-0.1.2.tgz",
"integrity": "sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w=="
},
"domelementtype": {
"version": "2.2.0",
"resolved": "https://registry.nlark.com/domelementtype/download/domelementtype-2.2.0.tgz",
......@@ -4149,6 +4250,11 @@
"integrity": "sha1-5yqwW3QS5iub43w3oJvbYADXBvA=",
"dev": true
},
"es6-promise": {
"version": "4.2.8",
"resolved": "https://registry.npmmirror.com/es6-promise/-/es6-promise-4.2.8.tgz",
"integrity": "sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w=="
},
"escalade": {
"version": "3.1.1",
"resolved": "https://registry.npm.taobao.org/escalade/download/escalade-3.1.1.tgz",
......@@ -4512,6 +4618,15 @@
}
}
},
"flv.js": {
"version": "1.6.2",
"resolved": "https://registry.npmmirror.com/flv.js/-/flv.js-1.6.2.tgz",
"integrity": "sha512-xre4gUbX1MPtgQRKj2pxJENp/RnaHaxYvy3YToVVCrSmAWUu85b9mug6pTXF6zakUjNP2lFWZ1rkSX7gxhB/2A==",
"requires": {
"es6-promise": "^4.2.8",
"webworkify-webpack": "^2.1.5"
}
},
"follow-redirects": {
"version": "1.15.0",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.0.tgz",
......@@ -4721,6 +4836,15 @@
"integrity": "sha1-x1KXCHyFG5pXi9IX3VmpL1n+VG4=",
"dev": true
},
"global": {
"version": "4.4.0",
"resolved": "https://registry.npmmirror.com/global/-/global-4.4.0.tgz",
"integrity": "sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==",
"requires": {
"min-document": "^2.19.0",
"process": "^0.11.10"
}
},
"globals": {
"version": "9.18.0",
"resolved": "https://registry.npm.taobao.org/globals/download/globals-9.18.0.tgz?cache=0&sync_timestamp=1616075441021&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fglobals%2Fdownload%2Fglobals-9.18.0.tgz",
......@@ -5077,6 +5201,11 @@
"repeating": "^2.0.0"
}
},
"individual": {
"version": "2.0.0",
"resolved": "https://registry.npmmirror.com/individual/-/individual-2.0.0.tgz",
"integrity": "sha512-pWt8hBCqJsUWI/HtcfWod7+N9SgAqyPEaF7JQjwzjn5vGrpg6aQ5qeAFQ7dx//UH4J1O+7xqew+gCeeFt6xN/g=="
},
"inflight": {
"version": "1.0.6",
"resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
......@@ -5175,6 +5304,11 @@
"integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
"dev": true
},
"is-function": {
"version": "1.0.2",
"resolved": "https://registry.npmmirror.com/is-function/-/is-function-1.0.2.tgz",
"integrity": "sha512-lw7DUp0aWXYg+CBCN+JKkcE0Q2RayZnSvnZBlwgxHBQhqt5pZNVy4Ri7H9GmmXkdu7LUthszM+Tor1u/2iBcpQ=="
},
"is-glob": {
"version": "4.0.3",
"resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
......@@ -5437,6 +5571,11 @@
"resolved": "https://registry.npm.taobao.org/jszip-utils/download/jszip-utils-0.1.0.tgz",
"integrity": "sha1-jATN7c2ykeg/BV9bJhs6MYjOygs="
},
"keycode": {
"version": "2.2.0",
"resolved": "https://registry.npmmirror.com/keycode/-/keycode-2.2.0.tgz",
"integrity": "sha512-ps3I9jAdNtRpJrbBvQjpzyFbss/skHqzS+eu4RxKLaEAtFqkjZaB6TZMSivPbLxf4K7VI4SjR0P5mRCX5+Q25A=="
},
"kind-of": {
"version": "6.0.3",
"resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
......@@ -5545,6 +5684,28 @@
"yallist": "^2.1.2"
}
},
"m3u8-parser": {
"version": "6.2.0",
"resolved": "https://registry.npmmirror.com/m3u8-parser/-/m3u8-parser-6.2.0.tgz",
"integrity": "sha512-qlC00JTxYOxawcqg+RB8jbyNwL3foY/nCY61kyWP+RCuJE9APLeqB/nSlTjb4Mg0yRmyERgjswpdQxMvkeoDrg==",
"requires": {
"@babel/runtime": "^7.12.5",
"@videojs/vhs-utils": "^3.0.5",
"global": "^4.4.0"
},
"dependencies": {
"@videojs/vhs-utils": {
"version": "3.0.5",
"resolved": "https://registry.npmmirror.com/@videojs/vhs-utils/-/vhs-utils-3.0.5.tgz",
"integrity": "sha512-PKVgdo8/GReqdx512F+ombhS+Bzogiofy1LgAj4tN8PfdBx3HSS7V5WfJotKTqtOWGwVfSWsrYN/t09/DSryrw==",
"requires": {
"@babel/runtime": "^7.12.5",
"global": "^4.4.0",
"url-toolkit": "^2.2.1"
}
}
}
},
"make-dir": {
"version": "1.3.0",
"resolved": "https://registry.npm.taobao.org/make-dir/download/make-dir-1.3.0.tgz",
......@@ -5676,6 +5837,14 @@
"integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
"dev": true
},
"min-document": {
"version": "2.19.0",
"resolved": "https://registry.npmmirror.com/min-document/-/min-document-2.19.0.tgz",
"integrity": "sha512-9Wy1B3m3f66bPPmU5hdA4DR4PB2OfDU/+GS3yAB7IQozE3tqXaVv2zOjgla7MEGSRv95+ILmOuvhLkOK6wJtCQ==",
"requires": {
"dom-walk": "^0.1.0"
}
},
"minimalistic-assert": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
......@@ -5705,6 +5874,29 @@
"minimist": "^1.2.5"
}
},
"mpd-parser": {
"version": "1.2.2",
"resolved": "https://registry.npmmirror.com/mpd-parser/-/mpd-parser-1.2.2.tgz",
"integrity": "sha512-QCfB1koOoZw6E5La1cx+W/Yd0EZlRhHMqMr4TAJez0eRTuPDzPM5FWoiOqjyo37W+ISPLzmfJACSbJFEBjbL4Q==",
"requires": {
"@babel/runtime": "^7.12.5",
"@videojs/vhs-utils": "^3.0.5",
"@xmldom/xmldom": "^0.8.3",
"global": "^4.4.0"
},
"dependencies": {
"@videojs/vhs-utils": {
"version": "3.0.5",
"resolved": "https://registry.npmmirror.com/@videojs/vhs-utils/-/vhs-utils-3.0.5.tgz",
"integrity": "sha512-PKVgdo8/GReqdx512F+ombhS+Bzogiofy1LgAj4tN8PfdBx3HSS7V5WfJotKTqtOWGwVfSWsrYN/t09/DSryrw==",
"requires": {
"@babel/runtime": "^7.12.5",
"global": "^4.4.0",
"url-toolkit": "^2.2.1"
}
}
}
},
"ms": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
......@@ -5721,6 +5913,15 @@
"thunky": "^1.0.2"
}
},
"mux.js": {
"version": "7.0.2",
"resolved": "https://registry.npmmirror.com/mux.js/-/mux.js-7.0.2.tgz",
"integrity": "sha512-CM6+QuyDbc0qW1OfEjkd2+jVKzTXF+z5VOKH0eZxtZtnrG/ilkW/U7l7IXGtBNLASF9sKZMcK1u669cq50Qq0A==",
"requires": {
"@babel/runtime": "^7.11.2",
"global": "^4.4.0"
}
},
"nan": {
"version": "2.14.2",
"resolved": "https://registry.npmjs.org/nan/-/nan-2.14.2.tgz",
......@@ -6248,6 +6449,14 @@
"pinkie": "^2.0.0"
}
},
"pkcs7": {
"version": "1.0.4",
"resolved": "https://registry.npmmirror.com/pkcs7/-/pkcs7-1.0.4.tgz",
"integrity": "sha512-afRERtHn54AlwaF2/+LFszyAANTCggGilmcmILUzEjvs3XgFZT+xE6+QWQcAGmu4xajy+Xtj7acLOPdx5/eXWQ==",
"requires": {
"@babel/runtime": "^7.5.5"
}
},
"pkg-dir": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
......@@ -6360,6 +6569,11 @@
"integrity": "sha1-I4Hts2ifelPWUxkAYPz4ItLzaP8=",
"dev": true
},
"process": {
"version": "0.11.10",
"resolved": "https://registry.npmmirror.com/process/-/process-0.11.10.tgz",
"integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A=="
},
"process-nextick-args": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
......@@ -6847,6 +7061,14 @@
"queue-microtask": "^1.2.2"
}
},
"rust-result": {
"version": "1.0.0",
"resolved": "https://registry.npmmirror.com/rust-result/-/rust-result-1.0.0.tgz",
"integrity": "sha512-6cJzSBU+J/RJCF063onnQf0cDUOHs9uZI1oroSGnHOph+CQTIJ5Pp2hK5kEQq1+7yE/EEWfulSNXAQ2jikPthA==",
"requires": {
"individual": "^2.0.0"
}
},
"rw": {
"version": "1.3.3",
"resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
......@@ -6858,6 +7080,14 @@
"integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
"dev": true
},
"safe-json-parse": {
"version": "4.0.0",
"resolved": "https://registry.npmmirror.com/safe-json-parse/-/safe-json-parse-4.0.0.tgz",
"integrity": "sha512-RjZPPHugjK0TOzFrLZ8inw44s9bKox99/0AZW9o/BEQVrJfhI+fIHMErnPyRa89/yRXUUr93q+tiN6zhoVV4wQ==",
"requires": {
"rust-result": "^1.0.0"
}
},
"safer-buffer": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
......@@ -7720,6 +7950,11 @@
"punycode": "^2.1.0"
}
},
"url-toolkit": {
"version": "2.2.5",
"resolved": "https://registry.npmmirror.com/url-toolkit/-/url-toolkit-2.2.5.tgz",
"integrity": "sha512-mtN6xk+Nac+oyJ/PrI7tzfmomRVNFIWKUbG8jdYFt52hxbiReFAXIjYskvu64/dvuW71IcB7lV8l0HvZMac6Jg=="
},
"util-deprecate": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
......@@ -7784,6 +8019,48 @@
"extsprintf": "^1.2.0"
}
},
"video.js": {
"version": "8.6.1",
"resolved": "https://registry.npmmirror.com/video.js/-/video.js-8.6.1.tgz",
"integrity": "sha512-CNYVJ5WWIZ7bOhbkkfcKqLGoc6WsE3Ft2RfS1lXdQTWk8UiSsPW2Ssk2JzPCA8qnIlUG9os/faCFsYWjyu4JcA==",
"requires": {
"@babel/runtime": "^7.12.5",
"@videojs/http-streaming": "3.7.0",
"@videojs/vhs-utils": "^4.0.0",
"@videojs/xhr": "2.6.0",
"aes-decrypter": "^4.0.1",
"global": "4.4.0",
"keycode": "2.2.0",
"m3u8-parser": "^6.0.0",
"mpd-parser": "^1.0.1",
"mux.js": "^7.0.1",
"safe-json-parse": "4.0.0",
"videojs-contrib-quality-levels": "4.0.0",
"videojs-font": "4.1.0",
"videojs-vtt.js": "0.15.5"
}
},
"videojs-contrib-quality-levels": {
"version": "4.0.0",
"resolved": "https://registry.npmmirror.com/videojs-contrib-quality-levels/-/videojs-contrib-quality-levels-4.0.0.tgz",
"integrity": "sha512-u5rmd8BjLwANp7XwuQ0Q/me34bMe6zg9PQdHfTS7aXgiVRbNTb4djcmfG7aeSrkpZjg+XCLezFNenlJaCjBHKw==",
"requires": {
"global": "^4.4.0"
}
},
"videojs-font": {
"version": "4.1.0",
"resolved": "https://registry.npmmirror.com/videojs-font/-/videojs-font-4.1.0.tgz",
"integrity": "sha512-X1LuPfLZPisPLrANIAKCknZbZu5obVM/ylfd1CN+SsCmPZQ3UMDPcvLTpPBJxcBuTpHQq2MO1QCFt7p8spnZ/w=="
},
"videojs-vtt.js": {
"version": "0.15.5",
"resolved": "https://registry.npmmirror.com/videojs-vtt.js/-/videojs-vtt.js-0.15.5.tgz",
"integrity": "sha512-yZbBxvA7QMYn15Lr/ZfhhLPrNpI/RmCSCqgIff57GC2gIrV5YfyzLfLyZMj0NnZSAz8syB4N0nHXpZg9MyrMOQ==",
"requires": {
"global": "^4.3.1"
}
},
"vue": {
"version": "2.6.14",
"resolved": "https://registry.nlark.com/vue/download/vue-2.6.14.tgz",
......@@ -8171,6 +8448,11 @@
"resolved": "https://registry.npmjs.org/webuploader/-/webuploader-0.1.8.tgz",
"integrity": "sha1-eoTygrTTy791PHmt9ITaTmno6eE="
},
"webworkify-webpack": {
"version": "2.1.5",
"resolved": "https://registry.npmmirror.com/webworkify-webpack/-/webworkify-webpack-2.1.5.tgz",
"integrity": "sha512-2akF8FIyUvbiBBdD+RoHpoTbHMQF2HwjcxfDvgztAX5YwbZNyrtfUMgvfgFVsgDhDPVTlkbb5vyasqDHfIDPQw=="
},
"which": {
"version": "1.3.1",
"resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
......
src/components/common/video_player.vue 0 → 100644
View file @ deb50e5d
<template>
<div>
<video style="height: 100%;width: 100%;" id="my-player" v-if="this.src.endsWith('flv')" preload="auto" muted autoplay controls>
</video>
<video style="height: 100%;width: 100%;" id="my-player" v-if="!this.src.endsWith('flv')" class="video-js" preload="auto" muted autoplay controls>
</video>
</div>
</template>
<script>
import flvjs from "flv.js";
import videozhCN from "video.js/dist/lang/zh-CN.json";
import videojs from "video.js";
import "video.js/dist/video-js.css";
export default {
props: ['src'],
data() {
return {
flvPlayer: null,
mp4Player: null
};
},
mounted() {
if (this.src.endsWith("flv")) {
if (flvjs.isSupported()) {
var videoElement = document.getElementById('my-player');
this.flvPlayer = flvjs.createPlayer({
type: 'flv',
isLive: true,
url: this.src,//flv格式流地址
}, {
enableWorker: false, //不启用分离线程
enableStashBuffer: false, //关闭IO隐藏缓冲区
reuseRedirectedURL: true, //重用301/302重定向url，用于随后的请求，如查找、重新连接等。
autoCleanupSourceBuffer: true //自动清除缓存
});
this.flvPlayer.attachMediaElement(videoElement);
this.flvPlayer.load(); //加载
this.flvPlayer.play();//播放
}
} else {
this.mp4Player = videojs('my-player', {
sources: [{
language: "zh-CN",
src: this.src,
autoplay: true,
playbackRates: [0.5, 1, 1.5, 2] //倍速播放
}]
}, function () {
console.log("videojs播放器初始化成功");
});
videojs.addLanguage("zh-CN", videozhCN);
this.mp4Player.play();
}
},
destroyed() {
this.flvPlayer && this.flvPlayer.unload();
this.flvPlayer && this.flvPlayer.detachMediaElement()
this.flvPlayer && this.flvPlayer.destroy();
this.mp4Player && this.mp4Player.pause()
this.mp4Player && this.mp4Player.dispose();
}
}
</script>
\ No newline at end of file
src/view/flfg/znfx.vue
View file @ deb50e5d
......@@ -113,17 +113,15 @@
{{ item.file.type.toUpperCase() }}
</span>
</div> -->
<div
class="tx-bg"
style="display: flex;justify-content: center;"
:class="[item.imgUrl==undefined?'animate__animated animate__infinite animate__pulse':'']"
>
<span v-if="item.imgUrl==undefined">
<div class="tx-bg" style="display: flex;justify-content: center;"
:class="[item.imgUrl == undefined ? 'animate__animated animate__infinite animate__pulse' : '']">
<span v-if="item.imgUrl == undefined">
{{ item.file.type.toUpperCase() }}
</span>
<div style="width: 60px;height: 60px;" v-else>
<img :src="item.imgUrl==null?'':item.imgUrl" :onerror="errimg" style="background-size: 100% 100%;width: 100%;height: 100%;border-radius: 0px 10px"/>
<img :src="item.imgUrl == null ? '' : item.imgUrl" :onerror="errimg"
style="background-size: 100% 100%;width: 100%;height: 100%;border-radius: 0px 10px" />
</div>
</div>
</div>
......@@ -354,8 +352,9 @@
</el-dialog>
<el-dialog :title="title" :visible.sync="centerDialogVisible_video" center width="800px">
<div style="height: 400px; position: relative">
<video id="video" class="" preload="meta" controls width="100%" object-fit="fill" height="100%"
controlslist="nodownload" :src="video_src" disablePictureInPicture></video>
<!-- <video id="video" class="" preload="meta" controls width="100%" object-fit="fill" height="100%"
controlslist="nodownload" :src="video_src" disablePictureInPicture autoplay muted></video> -->
<VideoPlayer v-if="centerDialogVisible_video" :src="video_src"></VideoPlayer>
</div>
</el-dialog>
......@@ -383,6 +382,7 @@ import { uuid } from "../../util/data_util";
import VanillaTilt from "vanilla-tilt";
import "animate.css";
import { queryDoc, searchFiles } from '../../api/zfclk/wxgl';
import VideoPlayer from "../../components/common/video_player.vue"
export default {
data() {
return {
......@@ -442,6 +442,9 @@ export default {
tab_actives: "-1", //表格切换
};
},
components: {
VideoPlayer
},
props: {
clientDetails: {
type: Object,
......@@ -500,25 +503,25 @@ export default {
queryDoc(pageNum, _this.pageSize, _this.paramData).then((data) => {
setTimeout(() => {
if (data.list.length != 0) {
data.list.forEach(item=>{
//用户判断此格式是否是视频格式
let video_type = false;
//用户判断此格式是否是音频格式
let img_type = false;
arr_video_format().forEach((name) => {
if (name.toUpperCase() == item.file.type.toUpperCase()) {
video_type = true;
}
});
arr_img_format().forEach((name) => {
if (name.toUpperCase() == item.file.type.toUpperCase()) {
img_type = true;
}
});
if(video_type || img_type){
item.imgUrl = 'api/rest/file/viewPicture/DocumentPicture?objectName='+item.file.uuid+'&'+new Date().getTime();
data.list.forEach(item => {
//用户判断此格式是否是视频格式
let video_type = false;
//用户判断此格式是否是音频格式
let img_type = false;
arr_video_format().forEach((name) => {
if (name.toUpperCase() == item.file.type.toUpperCase()) {
video_type = true;
}
});
arr_img_format().forEach((name) => {
if (name.toUpperCase() == item.file.type.toUpperCase()) {
img_type = true;
}
})
});
if (video_type || img_type) {
item.imgUrl = 'api/rest/file/viewPicture/DocumentPicture?objectName=' + item.file.uuid + '&' + new Date().getTime();
}
})
_this.tableData = data.list;
}
_this.total = data.totals;
......@@ -594,16 +597,17 @@ export default {
}
});
if (video_type) {
_this.video_src = `api/rest/file/playVideo/Document?objectName=${row.file.uuid}`
_this.title = "正在播放视频---" + row.name;
_this.centerDialogVisible_video = true;
setTimeout(function () {
// let path_srt = "api/rest/file/download/Document/";
// path_srt = path_srt + row.file.uuid;
// _this.video_src = path_srt;
_this.video_src = `api/rest/file/playVideo/Document?objectName=${row.file.uuid}`
if (document.getElementById("video").currentTime != 0)
document.getElementById("video").currentTime = 0;
}, 500);
// setTimeout(function () {
// // let path_srt = "api/rest/file/download/Document/";
// // path_srt = path_srt + row.file.uuid;
// // _this.video_src = path_srt;
// _this.video_src = `api/rest/file/playVideo/Document?objectName=${row.file.uuid}`
// if (document.getElementById("video").currentTime != 0)
// document.getElementById("video").currentTime = 0;
// }, 500);
} else if (sound_type) {
_this.title_sound = "正在播放音频---" + row.name;
_this.centerDialogVisible_sound = true;
......
src/view/fzjc/znfx.vue
View file @ deb50e5d
......@@ -2,32 +2,15 @@
<div id="znfx">
<div v-show="wjfx_qh">
<div class="top-div">
<el-input
v-model="wd_name"
suffix-icon="el-icon-search"
placeholder="请输入关键字"
></el-input>
<el-input v-model="wd_name" suffix-icon="el-icon-search" placeholder="请输入关键字"></el-input>
<div class="block sjxz">
<el-date-picker
value-format="yyyy-MM-dd HH:mm:ss"
v-model="sc_time"
type="daterange"
range-separator="至"
start-placeholder="上传起始时间"
end-placeholder="上传结束时间"
:default-time="['00:00:00', '23:59:59']"
>
<el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="sc_time" type="daterange" range-separator="至"
start-placeholder="上传起始时间" end-placeholder="上传结束时间" :default-time="['00:00:00', '23:59:59']">
</el-date-picker>
</div>
<div class="toggle-switch">
<el-switch
style="display: block"
v-model="toggle_value"
active-color="#09e8e4"
inactive-color="#409eff"
active-text="全文检索"
inactive-text="列表检索"
>
<el-switch style="display: block" v-model="toggle_value" active-color="#09e8e4" inactive-color="#409eff"
active-text="全文检索" inactive-text="列表检索">
</el-switch>
</div>
<div class="button-discuss" @click="searchs">搜索</div>
......@@ -110,37 +93,29 @@
</div> -->
<div class="card-div">
<template v-for="(item, index) in tableData">
<div
class="cards-div animate__animated bk-xxzp-animation"
:class="[
index % 4 == 0
? 'animate__lightSpeedInLeft'
: index % 4 == 1
<div class="cards-div animate__animated bk-xxzp-animation" :class="[
index % 4 == 0
? 'animate__lightSpeedInLeft'
: index % 4 == 1
? 'animate__zoomIn'
: index % 4 == 2
? 'animate__zoomIn'
: 'animate__lightSpeedInRight',
]"
>
<div
:class="[
'tilts',
tab_actives == index ? 'table-active' : '',
]"
@click="handleView(index, item)"
>
? 'animate__zoomIn'
: 'animate__lightSpeedInRight',
]">
<div :class="[
'tilts',
tab_actives == index ? 'table-active' : '',
]" @click="handleView(index, item)">
<div class="img-div">
<!-- <img class="tx-bg" :src="item.photos" :onerror="errimg" /> -->
<div
class="tx-bg"
style="display: flex;justify-content: center;"
:class="[item.imgUrl==undefined?'animate__animated animate__infinite animate__pulse':'']"
>
<span v-if="item.imgUrl==undefined">
<div class="tx-bg" style="display: flex;justify-content: center;"
:class="[item.imgUrl == undefined ? 'animate__animated animate__infinite animate__pulse' : '']">
<span v-if="item.imgUrl == undefined">
{{ item.file.type.toUpperCase() }}
</span>
<div style="width: 60px;height: 60px;" v-else>
<img :src="item.imgUrl==null?'':item.imgUrl" :onerror="errimg" style="background-size: 100% 100%;width: 100%;height: 100%;border-radius: 0px 10px"/>
<img :src="item.imgUrl == null ? '' : item.imgUrl" :onerror="errimg"
style="background-size: 100% 100%;width: 100%;height: 100%;border-radius: 0px 10px" />
</div>
</div>
</div>
......@@ -160,17 +135,9 @@
</div>
<div class="page-div">
<el-pagination
class="myPagination"
background
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChange"
:page-size="pageSize"
:current-page="current_page"
:total="total"
@current-change="handleCurrentChange_lb"
:page-sizes="[10, 20, 30, 40, 50, 60, 70, 80, 90, 100]"
>
<el-pagination class="myPagination" background layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChange" :page-size="pageSize" :current-page="current_page" :total="total"
@current-change="handleCurrentChange_lb" :page-sizes="[10, 20, 30, 40, 50, 60, 70, 80, 90, 100]">
</el-pagination>
</div>
</div>
......@@ -179,47 +146,24 @@
<div v-if="toggle_value_qw" class="transition-box">
<div class="bottom-content">
<div class="content-title">
<span
>为您提供<span class="new-num" v-text="totals_qw"></span
>条数据</span
>
<span>为您提供<span class="new-num" v-text="totals_qw"></span>条数据</span>
</div>
<div class="content-text">
<div class="content-news" v-for="(item, index) in get_files">
<div class="news-title">
<div class="first-div">
<span
>文档名称：<span
v-text="item.fileInfo.name"
class="span_cl"
></span
></span>
<span>文档名称：<span v-text="item.fileInfo.name" class="span_cl"></span></span>
</div>
<div class="last-div">
<span
>文件原名称：<span
v-text="item.fileInfo.file.name"
class="span_cl"
></span
></span>
<span>文件原名称：<span v-text="item.fileInfo.file.name" class="span_cl"></span></span>
</div>
</div>
<div class="news-content" v-html="item.highLight"></div>
<div class="news-info">
<span class="news-info-from"
>类型：<span
v-text="item.fileInfo.file.type"
></span></span
>&emsp;
<span class="news-info-channel"
>上传时间：<span v-text="item.create_time"></span></span
>&emsp;
<span class="news-info-from">类型：<span v-text="item.fileInfo.file.type"></span></span>&emsp;
<span class="news-info-channel">上传时间：<span v-text="item.create_time"></span></span>&emsp;
<div class="news-info-tool">
<i
class="el-icon-view views"
@click="handleView_qwss(item)"
title="预览"
></i>
<i class="el-icon-view views" @click="handleView_qwss(item)" title="预览"></i>
<!-- &nbsp;
<i
class="el-icon-download"
......@@ -234,17 +178,10 @@
<div class="page-div">
<div class="pagination-div">
<el-pagination
class="myPagination"
background
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChange_qw"
:page-size="pageSize_qw"
:current-page="current_page_qw"
:total="totals_qw"
@current-change="handleCurrentChange_qw"
:page-sizes="[10, 20, 30, 40, 50, 60, 70, 80, 90, 100]"
>
<el-pagination class="myPagination" background layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChange_qw" :page-size="pageSize_qw" :current-page="current_page_qw"
:total="totals_qw" @current-change="handleCurrentChange_qw"
:page-sizes="[10, 20, 30, 40, 50, 60, 70, 80, 90, 100]">
</el-pagination>
</div>
</div>
......@@ -254,50 +191,20 @@
</div>
<div v-show="!wjfx_qh">
<div v-show="tab_jsfx" style="position: relative">
<el-input
style="width: 30%; margin-left: 35%; margin-top: 20%"
v-model="gjc_input"
placeholder="请输入关键词 回车搜索"
suffix-icon="el-icon-search"
@keyup.enter.native="onSubmit"
></el-input>
<el-tooltip
class="item"
effect="light"
content="文件分析"
placement="top-start"
>
<el-button
type="primary"
icon="el-icon-data-line"
size="small"
style="right: 75px; position: absolute"
@click="wjfx_cli()"
circle
></el-button>
<el-input style="width: 30%; margin-left: 35%; margin-top: 20%" v-model="gjc_input" placeholder="请输入关键词 回车搜索"
suffix-icon="el-icon-search" @keyup.enter.native="onSubmit"></el-input>
<el-tooltip class="item" effect="light" content="文件分析" placement="top-start">
<el-button type="primary" icon="el-icon-data-line" size="small" style="right: 75px; position: absolute"
@click="wjfx_cli()" circle></el-button>
</el-tooltip>
<el-tooltip
class="item"
effect="light"
content="智能检索分析"
placement="top-start"
>
<el-button
type="info"
icon="el-icon-data-board"
size="small"
style="right: 35px; position: absolute; pointer-events: none"
circle
></el-button>
<el-tooltip class="item" effect="light" content="智能检索分析" placement="top-start">
<el-button type="info" icon="el-icon-data-board" size="small"
style="right: 35px; position: absolute; pointer-events: none" circle></el-button>
</el-tooltip>
</div>
<div v-show="!tab_jsfx">
<div class="top-div">
<el-input
v-model="znjsfx_name"
suffix-icon="el-icon-search"
placeholder="请输入关键字"
></el-input>
<el-input v-model="znjsfx_name" suffix-icon="el-icon-search" placeholder="请输入关键字"></el-input>
<div class="button-discuss" @click="seach_znjsfx(1)">搜索</div>
<!-- <el-tooltip
class="item"
......@@ -331,12 +238,7 @@
</div>
<div class="bottom-div">
<div class="table-div">
<el-table
:data="tableData_znjsfx"
height="100%"
border
style="width: 100%"
>
<el-table :data="tableData_znjsfx" height="100%" border style="width: 100%">
<el-table-column type="index" label="序号" width="80">
</el-table-column>
<el-table-column prop="name" label="文档名称" width="250">
......@@ -349,75 +251,33 @@
</el-table-column>
<el-table-column prop="file.type" label="文档类型" width="110">
</el-table-column>
<el-table-column
prop="cz"
label="操作"
width="150"
show-overflow-tooltip
>
<el-table-column prop="cz" label="操作" width="150" show-overflow-tooltip>
<template slot-scope="scope">
<i
class="el-icon-view"
@click="handleView(scope.$index, scope.row)"
title="预览"
></i
>&nbsp;
<i class="el-icon-view" @click="handleView(scope.$index, scope.row)" title="预览"></i>&nbsp;
<!-- <i
class="el-icon-download"
@click="handleDownload(scope.$index, scope.row)"
title="下载"
></i
>&nbsp; -->
<i
class="el-icon-edit"
@click="handleEdit(scope.$index, scope.row)"
title="编辑"
></i
>&nbsp;
<i
class="el-icon-delete-solid"
@click="handleDelete(scope.$index, scope.row)"
title="删除"
></i>
<i class="el-icon-edit" @click="handleEdit(scope.$index, scope.row)" title="编辑"></i>&nbsp;
<i class="el-icon-delete-solid" @click="handleDelete(scope.$index, scope.row)" title="删除"></i>
</template>
</el-table-column>
</el-table>
</div>
<div class="page-div">
<el-pagination
class="myPagination"
background
layout="prev, pager, next"
:total="total_znjsfx"
:page-size="pageSize"
:current-page="current_page_znjsfx"
@current-change="seach_znjsfx"
>
<el-pagination class="myPagination" background layout="prev, pager, next" :total="total_znjsfx"
:page-size="pageSize" :current-page="current_page_znjsfx" @current-change="seach_znjsfx">
</el-pagination>
</div>
</div>
</div>
</div>
<el-dialog
title="新增文档"
:visible.sync="centerDialogVisible_add"
width="30%"
center
class="xzwd"
>
<el-form
ref="form"
:model="form_add"
label-width="80px"
style="margin-bottom: 0px"
>
<el-dialog title="新增文档" :visible.sync="centerDialogVisible_add" width="30%" center class="xzwd">
<el-form ref="form" :model="form_add" label-width="80px" style="margin-bottom: 0px">
<el-form-item label="文档名称">
<el-input
v-model="form_add.name"
maxlength="20"
show-word-limit
placeholder="请输入文档名称"
></el-input>
<el-input v-model="form_add.name" maxlength="20" show-word-limit placeholder="请输入文档名称"></el-input>
</el-form-item>
<!-- <el-form-item label="文档类别">
<el-select v-model="form_add.region" placeholder="请选择文档类别">
......@@ -431,39 +291,17 @@
</el-select>
</el-form-item> -->
<el-form-item label="关键词">
<el-input
v-model="form_add.gjc"
show-word-limit
placeholder="请输入关键词，多个关键词使用英文逗号,隔开"
></el-input>
<el-input v-model="form_add.gjc" show-word-limit placeholder="请输入关键词，多个关键词使用英文逗号,隔开"></el-input>
</el-form-item>
<el-form-item label="文档描述">
<el-input
type="textarea"
placeholder="请输入文档描述"
v-model="form_add.ms"
maxlength="100"
show-word-limit
:rows="4"
>
<el-input type="textarea" placeholder="请输入文档描述" v-model="form_add.ms" maxlength="100" show-word-limit :rows="4">
</el-input>
</el-form-item>
<el-form-item label="选择文件" style="margin-bottom: 0px">
<el-upload
class="upload-demo"
ref="upload"
action="uploadUrl"
:file-list="form_add.fileList"
:on-change="handleChange"
:show-file-list="true"
:auto-upload="false"
:multiple="false"
:on-remove="handleRemove"
:accept="format_files"
>
<el-button slot="trigger" size="small" type="primary"
>选取文件</el-button
>
<el-upload class="upload-demo" ref="upload" action="uploadUrl" :file-list="form_add.fileList"
:on-change="handleChange" :show-file-list="true" :auto-upload="false" :multiple="false"
:on-remove="handleRemove" :accept="format_files">
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<div slot="tip" class="el-upload__tip">
允许上传DOC、PPT、JPG、PNG、MP4等等 ,且不超过500M
</div>
......@@ -476,19 +314,10 @@
</span>
</el-dialog>
<el-dialog
title="编辑文档"
:visible.sync="centerDialogVisible_edit"
width="30%"
center
>
<el-dialog title="编辑文档" :visible.sync="centerDialogVisible_edit" width="30%" center>
<el-form ref="form" :model="form_edit" label-width="80px">
<el-form-item label="文档名称">
<el-input
v-model="form_edit.name"
maxlength="20"
show-word-limit
></el-input>
<el-input v-model="form_edit.name" maxlength="20" show-word-limit></el-input>
</el-form-item>
<!-- <el-form-item label="文档类别">
<el-select v-model="form_edit.region" placeholder="请选择文档类别">
......@@ -502,21 +331,11 @@
</el-select>
</el-form-item> -->
<el-form-item label="关键词">
<el-input
v-model="form_edit.gjc"
show-word-limit
placeholder="请输入关键词，多个关键词使用英文逗号,隔开"
></el-input>
<el-input v-model="form_edit.gjc" show-word-limit placeholder="请输入关键词，多个关键词使用英文逗号,隔开"></el-input>
</el-form-item>
<el-form-item label="文档描述">
<el-input
type="textarea"
placeholder="请输入文档描述"
v-model="form_edit.ms"
maxlength="100"
show-word-limit
:rows="4"
>
<el-input type="textarea" placeholder="请输入文档描述" v-model="form_edit.ms" maxlength="100" show-word-limit
:rows="4">
</el-input>
</el-form-item>
</el-form>
......@@ -525,43 +344,16 @@
<el-button type="primary" @click="submit_bj">确 定</el-button>
</span>
</el-dialog>
<el-dialog
:title="title"
:visible.sync="centerDialogVisible_video"
center
width="800px"
>
<el-dialog :title="title" :visible.sync="centerDialogVisible_video" center width="800px">
<div style="height: 400px; position: relative">
<video
id="video"
class=""
preload="meta"
controls
width="100%"
object-fit="fill"
height="100%"
controlslist="nodownload"
:src="video_src"
disablePictureInPicture
autoplay
muted
></video>
<!-- <video id="video" class="" preload="meta" controls width="100%" object-fit="fill" height="100%"
controlslist="nodownload" :src="video_src" disablePictureInPicture autoplay muted></video> -->
<VideoPlayer v-if="centerDialogVisible_video" :src="video_src"></VideoPlayer>
</div>
</el-dialog>
<el-dialog
:title="title_sound"
:visible.sync="centerDialogVisible_sound"
center
width="500px"
>
<audio
controls
id="sound_id"
:src="sound_src"
controlslist="nodownload"
class="audio-class"
></audio>
<el-dialog :title="title_sound" :visible.sync="centerDialogVisible_sound" center width="500px">
<audio controls id="sound_id" :src="sound_src" controlslist="nodownload" class="audio-class"></audio>
</el-dialog>
</div>
</template>
......@@ -584,10 +376,11 @@ import { uuid } from "../../util/data_util";
import VanillaTilt from "vanilla-tilt";
import "animate.css";
import { queryDoc, searchFiles } from '../../api/zfclk/wxgl';
import VideoPlayer from "../../components/common/video_player.vue"
export default {
data() {
return {
errimg:'',
errimg: '',
centerDialogVisible_add: false,
centerDialogVisible_edit: false,
centerDialogVisible_video: false,
......@@ -644,6 +437,9 @@ export default {
tab_actives: "-1", //表格切换
};
},
components: {
VideoPlayer
},
props: {
clientDetails: {
type: Object,
......@@ -700,34 +496,34 @@ export default {
_this.tableData = [];
_this.total = 0;
queryDoc(pageNum, _this.pageSize, _this.paramData).then((data) => {
setTimeout(() => {
if (data.list.length != 0) {
data.list.forEach(item=>{
//用户判断此格式是否是视频格式
let video_type = false;
//用户判断此格式是否是音频格式
let img_type = false;
arr_video_format().forEach((name) => {
if (name.toUpperCase() == item.file.type.toUpperCase()) {
video_type = true;
}
});
arr_img_format().forEach((name) => {
if (name.toUpperCase() == item.file.type.toUpperCase()) {
img_type = true;
}
});
if(video_type || img_type){
item.imgUrl = 'api/rest/file/viewPicture/DocumentPicture?objectName='+item.file.uuid+'&'+new Date().getTime();
setTimeout(() => {
if (data.list.length != 0) {
data.list.forEach(item => {
//用户判断此格式是否是视频格式
let video_type = false;
//用户判断此格式是否是音频格式
let img_type = false;
arr_video_format().forEach((name) => {
if (name.toUpperCase() == item.file.type.toUpperCase()) {
video_type = true;
}
})
_this.tableData = data.list;
}
_this.total = data.totals;
_this.current_page = pageNum;
}, 500);
// endLoading();
})
});
arr_img_format().forEach((name) => {
if (name.toUpperCase() == item.file.type.toUpperCase()) {
img_type = true;
}
});
if (video_type || img_type) {
item.imgUrl = 'api/rest/file/viewPicture/DocumentPicture?objectName=' + item.file.uuid + '&' + new Date().getTime();
}
})
_this.tableData = data.list;
}
_this.total = data.totals;
_this.current_page = pageNum;
}, 500);
// endLoading();
})
.catch((err) => {
this.$message.warning(err.message);
});
......@@ -760,18 +556,18 @@ export default {
_this.get_files = [];
_this.totals_qw = 0;
searchFiles(pageNum, _this.pageSize_qw, paramDatas).then((data) => {
if (data.list.length != 0) {
data.list.forEach((item, index) => {
data.list[index].create_time = new Date(
data.list[index].create_time
).Format("yyyy-MM-dd HH:mm:ss");
});
_this.get_files = data.list;
_this.totals_qw = data.totals;
_this.current_page_qw = pageNum;
}
endLoading();
})
if (data.list.length != 0) {
data.list.forEach((item, index) => {
data.list[index].create_time = new Date(
data.list[index].create_time
).Format("yyyy-MM-dd HH:mm:ss");
});
_this.get_files = data.list;
_this.totals_qw = data.totals;
_this.current_page_qw = pageNum;
}
endLoading();
})
.catch((err) => {
endLoading();
this.$message.warning(err.message);
......@@ -796,16 +592,17 @@ export default {
}
});
if (video_type) {
_this.video_src = `api/rest/file/playVideo/Document?objectName=${row.file.uuid}`
_this.title = "正在播放视频---" + row.name;
_this.centerDialogVisible_video = true;
setTimeout(function () {
// let path_srt = "api/rest/file/download/Document/";
// path_srt = path_srt + row.file.uuid;
// _this.video_src = path_srt;
_this.video_src = `api/rest/file/playVideo/Document?objectName=${row.file.uuid}`
if (document.getElementById("video").currentTime != 0)
document.getElementById("video").currentTime = 0;
}, 500);
// setTimeout(function () {
// // let path_srt = "api/rest/file/download/Document/";
// // path_srt = path_srt + row.file.uuid;
// // _this.video_src = path_srt;
// _this.video_src = `api/rest/file/playVideo/Document?objectName=${row.file.uuid}`
// if (document.getElementById("video").currentTime != 0)
// document.getElementById("video").currentTime = 0;
// }, 500);
} else if (sound_type) {
_this.title_sound = "正在播放音频---" + row.name;
_this.centerDialogVisible_sound = true;
......@@ -869,11 +666,11 @@ export default {
.then(() => {
delete_util(
"api/rest/document/delDoc/" +
ids +
"?folder=" +
_this.type_folder +
"&name=" +
row.file.uuid
ids +
"?folder=" +
_this.type_folder +
"&name=" +
row.file.uuid
)
.then((data) => {
if (data == 1) {
......@@ -1034,9 +831,9 @@ export default {
_this.total_znjsfx = 0;
post(
"api/rest/document/queryDoc?pageNum=" +
pageNum +
"&pageSize=" +
_this.pageSize,
pageNum +
"&pageSize=" +
_this.pageSize,
paramDatas
).then((data) => {
if (data.list.length != 0) {
......@@ -1153,70 +950,89 @@ export default {
overflow: hidden;
background-size: 100% 100%;
color: white;
.el-tabs--card > .el-tabs__header {
.el-tabs--card>.el-tabs__header {
border-bottom: 1px solid #146a80;
}
.el-tabs--card > .el-tabs__header .el-tabs__nav {
.el-tabs--card>.el-tabs__header .el-tabs__nav {
border: 1px solid #146a80;
}
.el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
.el-tabs--card>.el-tabs__header .el-tabs__item.is-active {
border-bottom-color: #3b9cff;
}
.el-tabs__item {
color: #656565;
}
.el-tabs--card > .el-tabs__header .el-tabs__item {
.el-tabs--card>.el-tabs__header .el-tabs__item {
border-left: 1px solid #146a80;
}
.el-tabs__item.is-active {
color: #409eff !important;
}
.el-input__count {
color: #229dbd;
background: #1d2d4600;
}
.el-input__count-inner {
color: #229dbd;
background: #1d2d46;
}
.top-div {
width: 100%;
height: 60px;
.el-button{
.el-button {
float: left;
margin-left: 10px;
margin-top: 3px;
}
.el-input {
float: left;
width: 200px;
margin-right: 30px;
.el-input__inner {
background: none;
color: #ffff;
border: 1px solid #3a5f94c9 !important;
}
}
.el-select {
float: left;
}
.sjxz {
width: 350px;
float: left;
.el-date-editor {
background: none;
span {
color: white;
}
.el-range-input {
color: white;
background: none;
}
}
.el-input__inner {
border: 1px solid #3a5f94c9 !important;
}
}
.button-discuss {
width: 100px;
height: 30px;
......@@ -1231,6 +1047,7 @@ export default {
background-repeat: no-repeat;
background-size: 100% 100%;
}
.button-discuss1 {
width: 100px;
height: 30px;
......@@ -1245,28 +1062,35 @@ export default {
background-repeat: no-repeat;
background-size: 100% 100%;
}
.toggle-switch {
float: left;
margin-top: 10px;
margin-left: 20px;
.el-switch__label.is-active {
color: #409eff !important;
}
.el-switch__label {
display: unset;
color: #5a5a5a;
span {
font-size: 15px;
}
}
}
}
.bottom-div {
width: 100%;
height: calc(100% - 55px);
.table-div {
width: 100%;
height: calc(100% - 50px);
.el-table tr {
background-color: transparent !important;
color: #ffffffc7;
......@@ -1278,13 +1102,13 @@ export default {
background-size: 100% 100%;
}
.el-table th{
.el-table th {
background-color: transparent;
}
tbody tr {
border-bottom: 1px solid #252631;
}
border-bottom: 1px solid #252631;
}
.el-table td {
border-bottom: 1px solid #252631;
......@@ -1329,16 +1153,19 @@ export default {
background-color: unset;
}
}
.card-div {
width: 100%;
height: calc(100% - 50px);
overflow-y: auto;
overflow-x: hidden;
.cards-div {
width: 23%;
height: 160px;
margin: 1%;
float: left;
.tilts {
width: 100%;
height: 100%;
......@@ -1347,9 +1174,11 @@ export default {
cursor: pointer;
transform: perspective(1000px);
}
.tilts:hover {
transform-style: preserve-3d;
background-image: url("../../assets/img/fzjc/new/1.png");
// .span-div {
// .span-div-bg {
// background-image: url("../../assets/img/dfzy/new/5.png");
......@@ -1361,8 +1190,10 @@ export default {
color: transparent;
}
}
.table-active {
background-image: url("../../assets/img/dfzy/new/1.png");
// .span-div {
// .span-div-bg {
// background-image: url("../../assets/img/dfzy/new/5.png");
......@@ -1374,6 +1205,7 @@ export default {
color: transparent;
}
}
.img-div {
width: 70px;
height: 70px;
......@@ -1384,6 +1216,7 @@ export default {
transform: translateZ(20px);
display: flex;
align-items: center;
.tx-bg {
width: 100%;
background-size: 100% 100%;
......@@ -1391,6 +1224,7 @@ export default {
text-align: center;
letter-spacing: 2;
font-weight: 900;
span {
background: linear-gradient(to bottom, #fffe7f, #54ff88);
-webkit-background-clip: text;
......@@ -1398,12 +1232,14 @@ export default {
}
}
}
.text-div {
width: calc(100% - 140px);
height: 54px;
float: left;
margin-top: 40px;
transform: translateZ(20px);
.name-div {
width: 100%;
height: 100%;
......@@ -1411,6 +1247,7 @@ export default {
// background-size: 100% 100%;
// text-align: center;
color: white;
.top-span {
font-size: 13px;
letter-spacing: 1px;
......@@ -1423,10 +1260,12 @@ export default {
overflow: hidden;
}
}
.bottom-span {
text-align: center;
font-size: 12px;
}
.synopsis-div {
color: #ffffff87;
font-size: 15px;
......@@ -1441,6 +1280,7 @@ export default {
word-break: break-all;
white-space: pre-line;
}
.xq-div {
width: calc(100% - 40px);
padding-left: 28px;
......@@ -1449,6 +1289,7 @@ export default {
margin-top: 5px;
float: left;
}
.el-tag {
float: left;
margin-right: 10px;
......@@ -1459,9 +1300,11 @@ export default {
}
}
}
.bottom-content {
width: 100%;
height: calc(100% - 50px);
.content-title {
width: 100%;
height: 40px;
......@@ -1469,18 +1312,22 @@ export default {
padding-left: 20px;
box-sizing: border-box;
background: #263b5d;
.new-num {
color: #09c69c;
}
}
.content-text {
width: 100%;
height: calc(100% - 40px);
padding: 10px;
overflow-y: auto;
box-sizing: border-box;
.content-news {
border-bottom: 1px solid #156677;
.news-title {
width: 100%;
height: 40px;
......@@ -1488,19 +1335,23 @@ export default {
padding-left: 20px;
cursor: pointer;
box-sizing: border-box;
.first-div {
font-size: 18px;
float: left;
}
.last-div {
font-size: 15px;
float: left;
margin-left: 50px;
}
.span_cl {
color: #28d0ff;
}
}
.news-content {
font-size: 18px;
text-indent: 25px;
......@@ -1513,6 +1364,7 @@ export default {
-webkit-line-clamp: 2;
overflow: hidden;
color: #08addb;
em {
color: red;
font-size: 22px;
......@@ -1520,37 +1372,47 @@ export default {
font-weight: 600;
}
}
.news-info {
width: 100%;
height: 30px;
margin-top: 10px;
.news-info-from {
margin-left: 20px;
span {
color: #28d0ff;
}
}
.news-info-channel {
margin-left: 20px;
span {
color: #28d0ff;
}
}
.news-info-time {
margin-left: 20px;
}
.news-info-feeling {
margin-left: 20px;
}
.news-info-tool {
width: 100px;
float: right;
}
.el-icon-download {
color: #1172d8;
cursor: pointer;
font-size: 20px;
}
.views {
color: #00ffff;
font-size: 20px;
......
src/view/sjgl/wxk_public.vue
View file @ deb50e5d
......@@ -271,8 +271,10 @@
<el-dialog :title="title" :visible.sync="centerDialogVisible_video" center width="800px">
<div style="height: 400px; position: relative">
<video id="video" class="" preload="meta" controls width="100%" object-fit="fill" height="100%"
controlslist="nodownload" :src="video_src" disablePictureInPicture muted autoplay></video>
<!-- <video id="video" class="" preload="meta" controls width="100%" object-fit="fill" height="100%"
controlslist="nodownload" :src="video_src" disablePictureInPicture muted autoplay type="video/x-flv"></video> -->
<VideoPlayer v-if="centerDialogVisible_video" :src="video_src"></VideoPlayer>
</div>
</el-dialog>
......@@ -300,7 +302,7 @@ import {
import { uuid } from "../../util/data_util";
import BigfileUpload from "../../components/common/bigfile_upload.vue";
import { fileMd5Sum, getFileMD5Progress } from '../../util/file_md5.js';
import VideoPlayer from "../../components/common/video_player.vue"
export default {
data() {
return {
......@@ -370,7 +372,8 @@ export default {
};
},
components: {
BigfileUpload
BigfileUpload,
VideoPlayer
},
props: {
clientDetails: {
......@@ -516,17 +519,18 @@ export default {
}
});
if (video_type) {
_this.video_src = `api/rest/file/playVideo/Document?objectName=${row.file.uuid}`
_this.title = "正在播放视频---" + row.name;
_this.centerDialogVisible_video = true;
setTimeout(function () {
// let path_srt = "api/rest/file/download/Document/";
// path_srt = path_srt + row.file.uuid;
// _this.video_src = path_srt;
_this.video_src = `api/rest/file/playVideo/Document?objectName=${row.file.uuid}`
if (document.getElementById("video").currentTime != 0)
document.getElementById("video").currentTime = 0;
}, 500);
// setTimeout(function () {
// // let path_srt = "api/rest/file/download/Document/";
// // path_srt = path_srt + row.file.uuid;
// // _this.video_src = path_srt;
// // if (document.getElementById("video").currentTime != 0)
// // document.getElementById("video").currentTime = 0;
// }, 500);
} else if (sound_type) {
_this.title_sound = "正在播放音频---" + row.name;
_this.centerDialogVisible_sound = true;
......
video.html
View file @ deb50e5d
......@@ -7,7 +7,7 @@
<link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video-js.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video.min.js"></script>
<style>
</style>
</head>
......@@ -22,7 +22,7 @@
<script type="text/javascript">
var myPlayer = videojs('my-video', {
sources: [{
src: "http://192.168.168.213:8081/rest/file/playVideo/Document?objectName=wu_1hglhdmhs5u313gdtm816b8166eb2.mp4",
src: "http://192.168.168.213:8081/rest/file/playVideo/Document?objectName=352D6E02-E21E-4A63-96BC-9C2B60BB4DF7.mp4",
autoplay: true,
playbackRates: [0.5, 1, 1.5, 2] //倍速播放
}]
......
video1.html 0 → 100644
View file @ deb50e5d
<!DOCTYPE html>
<html lang="en">
<head>
<title>video</title>
<script src="https://unpkg.com/flv.js/dist/flv.min.js"></script>
</head>
<body>
<div>
<video id="my-player" preload="auto" muted autoplay >
<source src="">
</video>
</div>
</body>
</html>
<script>
// 获取video节点
videoElement = document.getElementById('my-player');
if (flvjs.isSupported()) {
flvPlayer = flvjs.createPlayer({
type: 'flv',
isLive: true,
url: 'http://192.168.168.213:8081/rest/file/playVideo/Document?objectName=B34A2275-17FE-4CBB-8324-F97E5ACD37FB.flv',//flv格式流地址
},{
enableWorker: false, //不启用分离线程
enableStashBuffer: false, //关闭IO隐藏缓冲区
reuseRedirectedURL: true, //重用301/302重定向url，用于随后的请求，如查找、重新连接等。
autoCleanupSourceBuffer: true //自动清除缓存
});
flvPlayer.attachMediaElement(videoElement);
flvPlayer.load(); //加载
flvPlayer.play();//播放
}
</script>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment