xioayue
/
btgym
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

视频播放1

lite
‘daijinzheng@xingtongworld.com’ 2 years ago
parent
4d1a2317f7
commit
e25f20114c
11 changed files with 965 additions and 231 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 364
      package-lock.json
  2. 8
      package.json
  3. 83
      src/components/btgym/HlsVideo.vue
  4. 10
      src/main.js
  5. 248
      src/views/ty/index.vue
  6. 63
      src/views/ty/index10.vue
  7. 252
      src/views/ty/index5.vue
  8. 2
      src/views/ty/index7.vue
  9. 65
      src/views/ty/index8.vue
  10. 91
      src/views/ty/index9.vue
  11. 10
      vue.config.js

364
package-lock.json
View File

@ -3494,6 +3494,11 @@
"resolved": "https://registry.npmjs.org/@types/zrender/-/zrender-4.0.0.tgz",
"integrity": "sha512-s89GOIeKFiod2KSqHkfd2rzx+T2DVu7ihZCBEBnhFrzvQPUmzvDSBot9Fi1DfMQm9Odg+rTqoMGC38RvrwJK2w=="
},
"@videojs-player/vue": {
"version": "1.0.0",
"resolved": "https://registry.npmmirror.com/@videojs-player/vue/-/vue-1.0.0.tgz",
"integrity": "sha512-WonTezRfKu3fYdQLt/ta+nuKH6gMZUv8l40Jke/j4Lae7IqeO/+lLAmBnh3ni88bwR+vkFXIlZ2Ci7VKInIYJg=="
},
"@videojs/http-streaming": {
"version": "3.0.2",
"resolved": "https://registry.npmmirror.com/@videojs/http-streaming/-/http-streaming-3.0.2.tgz",
@ -4682,6 +4687,27 @@
"@babel/helper-define-polyfill-provider": "^0.4.0"
}
},
"babel-runtime": {
"version": "6.26.0",
"resolved": "https://registry.npmmirror.com/babel-runtime/-/babel-runtime-6.26.0.tgz",
"integrity": "sha512-ITKNuq2wKlW1fJg9sSW52eepoYgZBggvOAHC0u/CYu/qxQ9EVzThCgR69BnSXLHjy2f7SY5zaQ4yt7H9ZVxY2g==",
"requires": {
"core-js": "^2.4.0",
"regenerator-runtime": "^0.11.0"
},
"dependencies": {
"core-js": {
"version": "2.6.12",
"resolved": "https://registry.npmmirror.com/core-js/-/core-js-2.6.12.tgz",
"integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ=="
},
"regenerator-runtime": {
"version": "0.11.1",
"resolved": "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
"integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="
}
}
},
"balanced-match": {
"version": "1.0.0",
"resolved": "https://registry.npm.taobao.org/balanced-match/download/balanced-match-1.0.0.tgz",
@ -6763,6 +6789,11 @@
"is-symbol": "^1.0.2"
}
},
"es5-shim": {
"version": "4.6.7",
"resolved": "https://registry.npmmirror.com/es5-shim/-/es5-shim-4.6.7.tgz",
"integrity": "sha512-jg21/dmlrNQI7JyyA2w7n+yifSxBng0ZralnSfVZjoCawgNTCnS+yBCyVM9DL5itm7SUnDGgv7hcq2XCZX4iRQ=="
},
"es6-promise": {
"version": "4.2.8",
"resolved": "https://registry.npmmirror.com/es6-promise/-/es6-promise-4.2.8.tgz",
@ -10900,6 +10931,11 @@
"safe-buffer": "^5.1.1"
}
},
"parse-headers": {
"version": "2.0.5",
"resolved": "https://registry.npmmirror.com/parse-headers/-/parse-headers-2.0.5.tgz",
"integrity": "sha512-ft3iAoLOB/MlwbNXgzy43SWGP6sQki2jQvAyBg/zDFAgr9bfNWZIUj42Kw2eJIl8kEi4PbgE6U1Zau/HwI75HA=="
},
"parse-json": {
"version": "5.0.0",
"resolved": "https://registry.npm.taobao.org/parse-json/download/parse-json-5.0.0.tgz",
@ -13483,6 +13519,11 @@
"integrity": "sha1-6xXRKIJ/vuKEFUnhcfRe0zisfjU=",
"dev": true
},
"tsml": {
"version": "1.0.1",
"resolved": "https://registry.npmmirror.com/tsml/-/tsml-1.0.1.tgz",
"integrity": "sha512-3KmepnH9SUsoOVtg013CRrL7c+AK7ECaquAsJdvu4288EDJuraqBlP4PDXT/rLEJ9YDn4jqLAzRJsnFPx+V6lg=="
},
"tty-browserify": {
"version": "0.0.0",
"resolved": "https://registry.npm.taobao.org/tty-browserify/download/tty-browserify-0.0.0.tgz",
@ -13897,6 +13938,152 @@
}
}
},
"videojs-contrib-hls": {
"version": "5.15.0",
"resolved": "https://registry.npmmirror.com/videojs-contrib-hls/-/videojs-contrib-hls-5.15.0.tgz",
"integrity": "sha512-18zbMYZ0XRBKTPEayA9bFTWWrqhT9b4G8+zf0czJLD7Epe5PcK1I/3dflTHQeQ5rwlWir+/XnFU3sMg/B2MMcw==",
"requires": {
"aes-decrypter": "1.0.3",
"global": "^4.3.0",
"m3u8-parser": "2.1.0",
"mux.js": "4.3.2",
"url-toolkit": "^2.1.3",
"video.js": "^5.19.1 || ^6.2.0",
"videojs-contrib-media-sources": "4.7.2",
"webwackify": "0.1.6"
},
"dependencies": {
"aes-decrypter": {
"version": "1.0.3",
"resolved": "https://registry.npmmirror.com/aes-decrypter/-/aes-decrypter-1.0.3.tgz",
"integrity": "sha512-rsx8pfx7wJsn+ziYbpJ8XA5c93hKAtBCrfydxJqJCMT+qfjipd/B5wC2xHtBcoxyvlqJcpeAo3K55t0lXOn9yQ==",
"requires": {
"pkcs7": "^0.2.3"
}
},
"m3u8-parser": {
"version": "2.1.0",
"resolved": "https://registry.npmmirror.com/m3u8-parser/-/m3u8-parser-2.1.0.tgz",
"integrity": "sha512-WbEpQ2FUaNGbJ0YanSeyj9D9ruu4FUvz+ZvebIzI2bSME+PUwcPXO1kKXZkjcPUAFruDikoOI5fWQNIA6JCCOQ=="
},
"mux.js": {
"version": "4.3.2",
"resolved": "https://registry.npmmirror.com/mux.js/-/mux.js-4.3.2.tgz",
"integrity": "sha512-g0q6DPdvb3yYcoK7ElBGobdSSrhY/RjPt19U7uUc733aqvc5bCS/aCvL9z+448y+IoCZnYDwyZfQBBXMSmGOaQ=="
},
"pkcs7": {
"version": "0.2.3",
"resolved": "https://registry.npmmirror.com/pkcs7/-/pkcs7-0.2.3.tgz",
"integrity": "sha512-kJRwmADEQUg+qJyRgWLtpEL9q9cFjZschejTEK3GRjKvnsU9G5WWoe/wKqRgbBoqWdVSeTUKP6vIA3Y72M3rWA=="
},
"process": {
"version": "0.5.2",
"resolved": "https://registry.npmmirror.com/process/-/process-0.5.2.tgz",
"integrity": "sha512-oNpcutj+nYX2FjdEW7PGltWhXulAnFlM0My/k48L90hARCOJtvBbQXc/6itV2jDvU5xAAtonP+r6wmQgCcbAUA=="
},
"video.js": {
"version": "6.13.0",
"resolved": "https://registry.npmmirror.com/video.js/-/video.js-6.13.0.tgz",
"integrity": "sha512-36/JR/GhPQSZj0o+GNbhcEYv/b0SkV9SQsjlodAnzMQYN0TA7VhmqrKPYMCi1NGRYu7S9W3OaFCFoUxkYfSVlg==",
"requires": {
"babel-runtime": "^6.9.2",
"global": "4.3.2",
"safe-json-parse": "4.0.0",
"tsml": "1.0.1",
"videojs-font": "2.1.0",
"videojs-ie8": "1.1.2",
"videojs-vtt.js": "0.12.6",
"xhr": "2.4.0"
},
"dependencies": {
"global": {
"version": "4.3.2",
"resolved": "https://registry.npmmirror.com/global/-/global-4.3.2.tgz",
"integrity": "sha512-/4AybdwIDU4HkCUbJkZdWpe4P6vuw/CUtu+0I1YlLIPe7OlUO7KNJ+q/rO70CW2/NW6Jc6I62++Hzsf5Alu6rQ==",
"requires": {
"min-document": "^2.19.0",
"process": "~0.5.1"
}
}
}
},
"videojs-font": {
"version": "2.1.0",
"resolved": "https://registry.npmmirror.com/videojs-font/-/videojs-font-2.1.0.tgz",
"integrity": "sha512-zFqWpLrXf1q8NtYx5qtZhMC6SLUFScDmR6j+UGPogobxR21lvXShhnzcNNMdOxJUuFLiToJ/BPpFUQwX4xhpvA=="
},
"videojs-vtt.js": {
"version": "0.12.6",
"resolved": "https://registry.npmmirror.com/videojs-vtt.js/-/videojs-vtt.js-0.12.6.tgz",
"integrity": "sha512-XFXeGBQiljnElMhwCcZst0RDbZn2n8LU7ZScXryd3a00OaZsHAjdZu/7/RdSr7Z1jHphd45FnOvOQkGK4YrWCQ==",
"requires": {
"global": "^4.3.1"
}
}
}
},
"videojs-contrib-media-sources": {
"version": "4.7.2",
"resolved": "https://registry.npmmirror.com/videojs-contrib-media-sources/-/videojs-contrib-media-sources-4.7.2.tgz",
"integrity": "sha512-e6iCHWBFuV05EGo7v+pS9iepObXnJ9joms467gzi8ZjpKVb3ifha9M0Ja24Rd8JfvYpzjltsgDVtGFDvIg4hQQ==",
"requires": {
"global": "^4.3.0",
"mux.js": "4.3.2",
"video.js": "^5.17.0 || ^6.2.0",
"webwackify": "0.1.6"
},
"dependencies": {
"mux.js": {
"version": "4.3.2",
"resolved": "https://registry.npmmirror.com/mux.js/-/mux.js-4.3.2.tgz",
"integrity": "sha512-g0q6DPdvb3yYcoK7ElBGobdSSrhY/RjPt19U7uUc733aqvc5bCS/aCvL9z+448y+IoCZnYDwyZfQBBXMSmGOaQ=="
},
"process": {
"version": "0.5.2",
"resolved": "https://registry.npmmirror.com/process/-/process-0.5.2.tgz",
"integrity": "sha512-oNpcutj+nYX2FjdEW7PGltWhXulAnFlM0My/k48L90hARCOJtvBbQXc/6itV2jDvU5xAAtonP+r6wmQgCcbAUA=="
},
"video.js": {
"version": "6.13.0",
"resolved": "https://registry.npmmirror.com/video.js/-/video.js-6.13.0.tgz",
"integrity": "sha512-36/JR/GhPQSZj0o+GNbhcEYv/b0SkV9SQsjlodAnzMQYN0TA7VhmqrKPYMCi1NGRYu7S9W3OaFCFoUxkYfSVlg==",
"requires": {
"babel-runtime": "^6.9.2",
"global": "4.3.2",
"safe-json-parse": "4.0.0",
"tsml": "1.0.1",
"videojs-font": "2.1.0",
"videojs-ie8": "1.1.2",
"videojs-vtt.js": "0.12.6",
"xhr": "2.4.0"
},
"dependencies": {
"global": {
"version": "4.3.2",
"resolved": "https://registry.npmmirror.com/global/-/global-4.3.2.tgz",
"integrity": "sha512-/4AybdwIDU4HkCUbJkZdWpe4P6vuw/CUtu+0I1YlLIPe7OlUO7KNJ+q/rO70CW2/NW6Jc6I62++Hzsf5Alu6rQ==",
"requires": {
"min-document": "^2.19.0",
"process": "~0.5.1"
}
}
}
},
"videojs-font": {
"version": "2.1.0",
"resolved": "https://registry.npmmirror.com/videojs-font/-/videojs-font-2.1.0.tgz",
"integrity": "sha512-zFqWpLrXf1q8NtYx5qtZhMC6SLUFScDmR6j+UGPogobxR21lvXShhnzcNNMdOxJUuFLiToJ/BPpFUQwX4xhpvA=="
},
"videojs-vtt.js": {
"version": "0.12.6",
"resolved": "https://registry.npmmirror.com/videojs-vtt.js/-/videojs-vtt.js-0.12.6.tgz",
"integrity": "sha512-XFXeGBQiljnElMhwCcZst0RDbZn2n8LU7ZScXryd3a00OaZsHAjdZu/7/RdSr7Z1jHphd45FnOvOQkGK4YrWCQ==",
"requires": {
"global": "^4.3.1"
}
}
}
},
"videojs-contrib-quality-levels": {
"version": "3.0.0",
"resolved": "https://registry.npmmirror.com/videojs-contrib-quality-levels/-/videojs-contrib-quality-levels-3.0.0.tgz",
@ -13905,11 +14092,145 @@
"global": "^4.4.0"
}
},
"videojs-flash": {
"version": "2.2.1",
"resolved": "https://registry.npmmirror.com/videojs-flash/-/videojs-flash-2.2.1.tgz",
"integrity": "sha512-mHu6TD12EKkxMvr8tg4AcfV/DuVLff427nneoZom3N9Dd2bv0sJOWwdLPQH1v5BCuAuXAVuAOba56ovTl+G3tQ==",
"requires": {
"global": "^4.4.0",
"video.js": "^6 || ^7",
"videojs-swf": "5.4.2"
},
"dependencies": {
"@babel/runtime": {
"version": "7.22.6",
"resolved": "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.22.6.tgz",
"integrity": "sha512-wDb5pWm4WDdF6LFUde3Jl8WzPA+3ZbxYqkC6xAXuD3irdEHN1k0NfTRrJD8ZD378SJ61miMLCqIOXYhd8x+AJQ==",
"requires": {
"regenerator-runtime": "^0.13.11"
}
},
"@videojs/http-streaming": {
"version": "2.16.2",
"resolved": "https://registry.npmmirror.com/@videojs/http-streaming/-/http-streaming-2.16.2.tgz",
"integrity": "sha512-etPTUdCFu7gUWc+1XcbiPr+lrhOcBu3rV5OL1M+3PDW89zskScAkkcdqYzP4pFodBPye/ydamQoTDScOnElw5A==",
"requires": {
"@babel/runtime": "^7.12.5",
"@videojs/vhs-utils": "3.0.5",
"aes-decrypter": "3.1.3",
"global": "^4.4.0",
"m3u8-parser": "4.8.0",
"mpd-parser": "^0.22.1",
"mux.js": "6.0.1",
"video.js": "^6 || ^7"
}
},
"@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"
}
},
"aes-decrypter": {
"version": "3.1.3",
"resolved": "https://registry.npmmirror.com/aes-decrypter/-/aes-decrypter-3.1.3.tgz",
"integrity": "sha512-VkG9g4BbhMBy+N5/XodDeV6F02chEk9IpgRTq/0bS80y4dzy79VH2Gtms02VXomf3HmyRe3yyJYkJ990ns+d6A==",
"requires": {
"@babel/runtime": "^7.12.5",
"@videojs/vhs-utils": "^3.0.5",
"global": "^4.4.0",
"pkcs7": "^1.0.4"
}
},
"m3u8-parser": {
"version": "4.8.0",
"resolved": "https://registry.npmmirror.com/m3u8-parser/-/m3u8-parser-4.8.0.tgz",
"integrity": "sha512-UqA2a/Pw3liR6Df3gwxrqghCP17OpPlQj6RBPLYygf/ZSQ4MoSgvdvhvt35qV+3NaaA0FSZx93Ix+2brT1U7cA==",
"requires": {
"@babel/runtime": "^7.12.5",
"@videojs/vhs-utils": "^3.0.5",
"global": "^4.4.0"
}
},
"mpd-parser": {
"version": "0.22.1",
"resolved": "https://registry.npmmirror.com/mpd-parser/-/mpd-parser-0.22.1.tgz",
"integrity": "sha512-fwBebvpyPUU8bOzvhX0VQZgSohncbgYwUyJJoTSNpmy7ccD2ryiCvM7oRkn/xQH5cv73/xU7rJSNCLjdGFor0Q==",
"requires": {
"@babel/runtime": "^7.12.5",
"@videojs/vhs-utils": "^3.0.5",
"@xmldom/xmldom": "^0.8.3",
"global": "^4.4.0"
}
},
"mux.js": {
"version": "6.0.1",
"resolved": "https://registry.npmmirror.com/mux.js/-/mux.js-6.0.1.tgz",
"integrity": "sha512-22CHb59rH8pWGcPGW5Og7JngJ9s+z4XuSlYvnxhLuc58cA1WqGDQPzuG8I+sPm1/p0CdgpzVTaKW408k5DNn8w==",
"requires": {
"@babel/runtime": "^7.11.2",
"global": "^4.4.0"
}
},
"regenerator-runtime": {
"version": "0.13.11",
"resolved": "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
"integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
},
"video.js": {
"version": "7.21.4",
"resolved": "https://registry.npmmirror.com/video.js/-/video.js-7.21.4.tgz",
"integrity": "sha512-R5e57M/5uqxQMQpFpybNbd8GtiRwFJPqkHjrhv0QTJ2tqnesbjETbck5kU5dhFr1FevsJRFhjBG4hAnvRGnXbw==",
"requires": {
"@babel/runtime": "^7.12.5",
"@videojs/http-streaming": "2.16.2",
"@videojs/vhs-utils": "^3.0.4",
"@videojs/xhr": "2.6.0",
"aes-decrypter": "3.1.3",
"global": "^4.4.0",
"keycode": "^2.2.0",
"m3u8-parser": "4.8.0",
"mpd-parser": "0.22.1",
"mux.js": "6.0.1",
"safe-json-parse": "4.0.0",
"videojs-font": "3.2.0",
"videojs-vtt.js": "^0.15.4"
}
},
"videojs-font": {
"version": "3.2.0",
"resolved": "https://registry.npmmirror.com/videojs-font/-/videojs-font-3.2.0.tgz",
"integrity": "sha512-g8vHMKK2/JGorSfqAZQUmYYNnXmfec4MLhwtEFS+mMs2IDY398GLysy6BH6K+aS1KMNu/xWZ8Sue/X/mdQPliA=="
}
}
},
"videojs-flvjs-es6": {
"version": "1.0.1",
"resolved": "https://registry.npmmirror.com/videojs-flvjs-es6/-/videojs-flvjs-es6-1.0.1.tgz",
"integrity": "sha512-wAI5ff2tZVW+uftTLyPmS38F4SHmMlxqBFOgXEBqMs2X0N4uIVQK0iCCv5XACXH+oc+mP70D23mJmT8KsoHx0g=="
},
"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-ie8": {
"version": "1.1.2",
"resolved": "https://registry.npmmirror.com/videojs-ie8/-/videojs-ie8-1.1.2.tgz",
"integrity": "sha512-0Zb2T4MLkpfZbeGMK/Z93b8Lrepr+rLFoHgQV1CoDeFqXvH7b+Vsd/VHoILGxQrgCSHFQ7mAODR6oyMjuiD4/g==",
"requires": {
"es5-shim": "^4.5.1"
}
},
"videojs-swf": {
"version": "5.4.2",
"resolved": "https://registry.npmmirror.com/videojs-swf/-/videojs-swf-5.4.2.tgz",
"integrity": "sha512-FGg+Csioa8/A/EacvFefBdb9Z0rSiMlheHDunZnN3xXfUF43jvjawcWFQnZvrv1Cs1nE1LBrHyUZjF7j2mKOLw=="
},
"videojs-vtt.js": {
"version": "0.15.4",
"resolved": "https://registry.npmmirror.com/videojs-vtt.js/-/videojs-vtt.js-0.15.4.tgz",
@ -14029,6 +14350,14 @@
"integrity": "sha1-HuO8mhbsv1EYvjNLsV+cRvgvWCU=",
"dev": true
},
"vue-video-player": {
"version": "6.0.0",
"resolved": "https://registry.npmmirror.com/vue-video-player/-/vue-video-player-6.0.0.tgz",
"integrity": "sha512-WP47OtefsjMEReRCIKIL3tRRgH/PyNm8ELjsbYgr/WWrYAj5Ih9Adzkzp+ylYOI/v57jJ4O7O4XkbXBCmsTqNw==",
"requires": {
"@videojs-player/vue": "1.x"
}
},
"vuex": {
"version": "3.1.3",
"resolved": "https://registry.npm.taobao.org/vuex/download/vuex-3.1.3.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvuex%2Fdownload%2Fvuex-3.1.3.tgz",
@ -14410,6 +14739,11 @@
"integrity": "sha1-XS/yKXcAPsaHpLhwc9+7rBRszyk=",
"dev": true
},
"webwackify": {
"version": "0.1.6",
"resolved": "https://registry.npmmirror.com/webwackify/-/webwackify-0.1.6.tgz",
"integrity": "sha512-pGcw1T3HpNnM/UTRQqqRkkkzythSLts05mB+7Gr00B+0VbL0m39dFL5g20rSIEUt9Wrpw+/8k+snxRlUFHhcqA=="
},
"webworkify-webpack": {
"version": "2.1.5",
"resolved": "https://registry.npmmirror.com/webworkify-webpack/-/webworkify-webpack-2.1.5.tgz",
@ -14524,11 +14858,37 @@
"async-limiter": "~1.0.0"
}
},
"xhr": {
"version": "2.4.0",
"resolved": "https://registry.npmmirror.com/xhr/-/xhr-2.4.0.tgz",
"integrity": "sha512-TUbBsdAuJbX8olk9hsDwGK8P1ri1XlV+PdEWkYw+HQQbpkiBR8PLgD1F3kQDPBs9l4Px34hP9rCYAZOCCAENbw==",
"requires": {
"global": "~4.3.0",
"is-function": "^1.0.1",
"parse-headers": "^2.0.0",
"xtend": "^4.0.0"
},
"dependencies": {
"global": {
"version": "4.3.2",
"resolved": "https://registry.npmmirror.com/global/-/global-4.3.2.tgz",
"integrity": "sha512-/4AybdwIDU4HkCUbJkZdWpe4P6vuw/CUtu+0I1YlLIPe7OlUO7KNJ+q/rO70CW2/NW6Jc6I62++Hzsf5Alu6rQ==",
"requires": {
"min-document": "^2.19.0",
"process": "~0.5.1"
}
},
"process": {
"version": "0.5.2",
"resolved": "https://registry.npmmirror.com/process/-/process-0.5.2.tgz",
"integrity": "sha512-oNpcutj+nYX2FjdEW7PGltWhXulAnFlM0My/k48L90hARCOJtvBbQXc/6itV2jDvU5xAAtonP+r6wmQgCcbAUA=="
}
}
},
"xtend": {
"version": "4.0.2",
"resolved": "https://registry.npm.taobao.org/xtend/download/xtend-4.0.2.tgz",
"integrity": "sha1-u3J3n1+kZRhrH0OPZ0+jR/2121Q=",
"dev": true
"integrity": "sha1-u3J3n1+kZRhrH0OPZ0+jR/2121Q="
},
"y18n": {
"version": "4.0.0",

8
package.json
View File

@ -21,9 +21,13 @@
"less-loader": "4.1.0",
"v-scale-screen": "^1.0.2",
"video.js": "^8.3.0",
"videojs-contrib-hls": "^5.15.0",
"videojs-flash": "^2.2.1",
"videojs-flvjs-es6": "^1.0.1",
"vue": "^2.6.11",
"vue-awesome": "^4.0.2",
"vue-router": "^3.1.5",
"vue-video-player": "^6.0.0",
"vuex": "^3.1.2",
"web-control": "^1.0.2"
},
@ -50,7 +54,9 @@
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
"rules": {
"no-unused-vars": "off"
}
},
"browserslist": [
"> 1%",

83
src/components/btgym/HlsVideo.vue
View File

@ -0,0 +1,83 @@
<template>
<video ref="videoPlayer" class="video-js vjs-default-skin vjs-big-play-centered"
style="width: 100%;height: 100%"></video>
</template>
<script>
import videojs from "video.js";
import "video.js/dist/video-js.css";
import "videojs-flvjs-es6";
import "videojs-flash";
export default {
props: {
videoUrl: {
type: String,
default: ""
}
},
data() {
return {
videoPlayer: null
};
},
mounted() {
this.handelVideoUrl();
},
methods: {
handelVideoUrl() {
let options = {
muted: true,
controls: true,//进度条
autoplay: false,//自动播放
loop: true,//是否循环
languages: {
"zh-CN": require("video.js/dist/lang/zh-CN.json")
},
language: "zh-CN",
preload: "auto"
};
const url = this.videoUrl.replace(/\s+/g, "");
if (url.indexOf("rtmp") > -1) {
//rtmp格式视频
options = {
...options,
techOrder: ["html5", "flash"],// 兼容顺序
sources: [{ src: this.videoUrl, type: "rtmp/flv" }]
};
} else if (url.lastIndexOf(".") > -1) {
if (url.substring(url.lastIndexOf(".") + 1) === "flv") {
//flv格式视频
options = {
...options,
techOrder: ["html5", "flvjs"],// 兼容顺序
flvjs: {
mediaDataSource: {
isLive: false,
cors: true,
withCredentials: false
}
},
sources: [{ src: this.videoUrl, type: "video/x-flv" }]
};
} else {
//其他格式视频
options = {
...options,
sources: [{ src: this.videoUrl, type: "video/mp4" }]
};
}
}
this.videoPlayer = videojs(this.$refs.videoPlayer, {
...options
});
}
},
destroyed() {
if (this.videoPlayer) {
this.videoPlayer.dispose();
}
}
};
</script>

10
src/main.js
View File

@ -5,7 +5,17 @@ import store from './store';
import dataV from '@jiaminghi/data-view';
import VScaleScreen from 'v-scale-screen';
// import VideoPlayer from 'vue-video-player'
// import 'video.js/dist/video-js.css'
// import 'videojs-flash'
// Vue.use(VideoPlayer)
// import axios from 'axios'
import Video from 'video.js';
import 'video.js/dist/video-js.css';
Vue.prototype.$video = Video; // 在原型上注册以便在任何地方都可以使用
import 'videojs-flash'; // 要播放rtmp流, 就必须引入这哥们
Vue.use(VScaleScreen);
Vue.use(dataV);

248
src/views/ty/index.vue
View File

@ -1,247 +1,41 @@
<template>
<v-scale-screen width="1920" height="1080">
<div id="ty">
<div class="main">
<div class="center">
<!-- <el-button @click="begin"></el-button> -->
<video id="playWnd" autoplay></video>
<!--v-resize="DomResize" 是用来播放器窗口自适应的，如果不需要可以不添加，下面会介绍到-->
</div>
</div>
</div>
</v-scale-screen>
<div class='instance'>
<video id='video' class="video-js vjs-default-skin vjs-big-play-centered" />
</div>
</template>
<script>
// import flvjs from "flv.js";
// import '@/utils/h5player.min.js'
import $ from "jquery";//我这里jquery就是用npm下载的。----npm i jquery -S
import { WebControl } from 'web-control';
// 引入api
// import * as homeApi from '@/api/home'
export default {
data() {
return {
initCount: 0,
pubKey: '',
oWebControl2: '',
//变量名随便命名的，不太会命名
nowPlayVideoUrl: 'rtmp://live.hkstv.hk.lxdns.com/live/hks1'
}
},
created() {
// this.$nextTick 将回调延迟到下次DOM更新循环之后执行。在修改数据之后立即使用它，然后等待DOM更新
this.$nextTick(() => {
this.initPlugin();
this.getVideoFun('05edddc148b141c5930301af43154942')
});
mounted() {
this.initVideoPlayer()
},
methods: {
// 创建播放实例
initPlugin() {
let _that = this;
var oWebControl = new WebControl({
szPluginContainer: 'playWnd', // 指定容器id
iServicePortStart: 15900, // 指定起止端口号，建议使用该值
iServicePortEnd: 15909,
szClassId: '23BF3B0A-2C56-4D97-9C03-0CB103AA8F11', // 用于IE10使用ActiveX的clsid
cbConnectSuccess() {
console.log('创建WebControl实例成功');
oWebControl.JS_StartService('window', {
// WebControl实例创建成功后需要启动服务
dllPath: './VideoPluginConnect.dll', // 值"./VideoPluginConnect.dll"写死
})
.then(
() => {
// // 启动插件服务成功
oWebControl.JS_SetWindowControlCallback({
// 设置消息回调
cbIntegrationCallBack: _that.cbIntegrationCallBack,
});
oWebControl.JS_CreateWnd('playWnd').then(() => {
//JS_CreateWnd创建视频播放窗口，宽高可设定
_that.init(); // 创建播放实例成功后初始化
console.log('111111111111');
});
},
() => {
// 启动插件服务失败
}
)
.catch((err) => {
console.log(err);
});
},
cbConnectError() {
// 创建WebControl实例失败
console.log('xxx');
oWebControl = null;
$('#playWnd').html('插件未启动，正在尝试启动，请稍候...');
window.WebControl.JS_WakeUp('VideoWebPlugin://'); // 程序未启动时执行error函数，采用wakeup来启动程序
this.initCount++;
if (this.initCount < 3) {
setTimeout(function () {
this.initPlugin();
}, 3000);
} else {
$('#playWnd').html('插件启动失败，请检查插件是否安装！');
}
},
cbConnectClose() {
// 异常断开：bNormalClose = false
// JS_Disconnect正常断开：bNormalClose = true
console.log('cbConnectClose');
oWebControl = null;
},
});
this.oWebControl2 = oWebControl;
},
//初始化
init() {
let _that = this;
this.getPubKey(function () {
// 请自行修改以下变量值
var appkey = "29940726"; //综合安防管理平台提供的appkey，必填
var secret = 'SkTCnQdFbNW4Z2suNj8P'; //综合安防管理平台提供的secret，必填
var ip = "192.168.66.13"; //综合安防管理平台IP地址，必填
var playMode = 0; //初始播放模式：0-预览，1-回放
var port = 554; //综合安防管理平台端口，若启用HTTPS协议，默认443
var snapDir = ""; //抓图存储路径
var videoDir = "D:\\VideoDir"; //紧急录像或录像剪辑存储路径
var layout = "1x1"; //playMode指定模式的布局
var enableHTTPS = 1; //是否启用HTTPS协议与综合安防管理平台交互，这里总是填1
var encryptedFields = "secret"; //加密字段，默认加密领域为secret
var showToolbar = 0; //是否显示工具栏，0-不显示，非0-显示
var showSmart = 1; //是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示
var buttonIDs = "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769"; //自定义工具条按钮
// 请自行修改以上变量值
_that.oWebControl2.JS_RequestInterface({
funcName: "init",
argument: JSON.stringify({
appkey: appkey, //API网关提供的appkey
secret: secret, //API网关提供的secret
ip: ip, //API网关IP地址
playMode: playMode, //播放模式（决定显示预览还是回放界面）
port: port, //端口
snapDir: snapDir, //抓图存储路径
videoDir: videoDir, //紧急录像或录像剪辑存储路径
layout: layout, //布局
enableHTTPS: enableHTTPS, //是否启用HTTPS协议
encryptedFields: encryptedFields, //加密字段
showToolbar: showToolbar, //是否显示工具栏
showSmart: showSmart, //是否显示智能信息
buttonIDs: buttonIDs, //自定义工具条按钮
}),
})
.then((res) => {
let width = document.querySelector("#playWnd").offsetWidth;
let height = document.querySelector("#playWnd").offsetHeight;
_that.oWebControl2.JS_Resize(width, height); // 初始化后resize一次，能和盒子大小一致。
console.log('22222222222');
console.log(res);
});
});
},
// 设置窗口控制回调
setCallbacks() {
this.oWebControl.JS_SetWindowControlCallback({
cbIntegrationCallBack: this.cbIntegrationCallBack,
});
},
// 推送消息
cbIntegrationCallBack(oData) {
//操作抓图录像时可以打印信息
console.log(oData);
},
//获取公钥
getPubKey(callback) {
this.oWebControl2.JS_RequestInterface({
funcName: "getRSAPubKey",
argument: JSON.stringify({
keyLength: 1024,
}),
initVideoPlayer() {
// 第一个选中的要播放的video标签, 记得是video标签,
const currentInstance = this.$video(document.querySelector('video'), {
autoplay: true, // 是否自动播放
controls: true, // 是否显示控件
})
.then((oData) => {
console.log(oData);
if (oData.responseMsg.data) {
this.pubKey = oData.responseMsg.data;
callback();
}
});
},
//RSA加密
// setEncrypt(value) {
// var encrypt = new encrypt();
// encrypt.setPublicKey(this.pubKey);
// console.log(encrypt.encrypt(value));
// return encrypt.encrypt(value);
// },
//视频预览功能
getVideoFun(Code) {
let _that = this;
//因为我这里有很多监控点编号需要来回切换，所以用参数传递进来
var cameraIndexCode = Code; //获取输入的监控点编号值，必填
var streamMode = 0; //主子码流标识：0-主码流，1-子码流
var transMode = 1; //传输协议：0-UDP，1-TCP
var gpuMode = 1; //是否启用GPU硬解，0-不启用，1-启用
var wndId = -1; //播放窗口序号（在2x2以上布局下可指定播放窗口）
cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, "");
cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, "");
console.log('44444444444');
console.log(cameraIndexCode);
console.log( _that.oWebControl2);
console.log( _that.oWebControl2.JS_RequestInterface);
_that.oWebControl2.JS_RequestInterface({
funcName: "startPreview",
argument: JSON.stringify({
cameraIndexCode: cameraIndexCode, //监控点编号
streamMode: streamMode, //主子码流标识
transMode: transMode, //传输协议
gpuMode: gpuMode, //是否开启GPU硬解
wndId: wndId, //可指定播放窗口
}),
currentInstance.src({
src: this.nowPlayVideoUrl,
type: 'rtmp/flv', // 这个type值必写, 告诉videojs这是一个rtmp流视频
})
.then((res) => {
console.log(res, "res");
console.log('3333333333');
}).catch((err) => {
console.log(err);
});
},
//停止全部预览
stopVideoFun() {
this.oWebControl2.JS_RequestInterface({
funcName: "stopAllPreview",
});
},
// 销毁播放窗口---这个很重要，因为插件所生成的播放窗口不受html控制，
// 我是弹窗形式展示的播放，即使我关闭弹窗播放器也会一直存在，无法销毁，
// 甚至路由跳转都无法销毁，所以我看了指南找到了销毁窗口方法。
destroyVideoDiv() {
this.oWebControl2.JS_DestroyWnd()
.then((data) => {
console.log("销毁窗口成功");
console.log(data);
})
.catch((err) => {
console.log("销毁窗口失败");
console.log(err);
});
},
// 抓图按钮---播放器有工具栏，不需要另外写抓图方法了，所以这个可有可无。
zhuaPicFun() {
this.oWebControl2.JS_RequestInterface({
funcName: "snapShot",
argument: {
name: "D:\test.jpg", // 窗口布局
},
});
},
}
},
}
}
}
</script>
<style>
.demo-video {

63
src/views/ty/index10.vue
View File

@ -0,0 +1,63 @@
<template>
<video-player class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true"
:options="playerOptions"></video-player>
</template>
<script>
// import flvjs from "flv.js";
// import videojs from "video.js";
// import "video.js/dist/video-js.css";
// import "videojs-flash";
// 引入api
import * as homeApi from '@/api/home'
export default {
data() {
return {
playerOptions: {
playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
autoplay: false, //如果true,浏览器准备好时开始回放。
muted: false, // 默认情况下将会消除任何音频。
loop: false, // 导致视频一结束就重新开始。
preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
language: 'zh-CN',
aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
techOrder: ['flash', 'html5'], // 兼容顺序
flash: {
hls: { withCredentials: false },
swf: 'static/video-js.swf' // 引入静态文件swf
},
html5: { hls: { withCredentials: false } },
sources: [{ // 流配置，数组形式，会根据兼容顺序自动切换
type: 'rtmp/hls',
src: 'rtmp://192.168.66.13:1935/live/openUrl/1OSHzLa'
}],
poster: "", //你的封面地址
// width: document.documentElement.clientWidth,
notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
controlBar: {
timeDivider: true,
durationDisplay: true,
remainingTimeDisplay: false,
fullscreenToggle: true //全屏按钮
}
}
}
},
mounted() {
},
methods: {
}
}
</script>
<style>
.demo-video {
max-width: 880px;
max-height: 660px;
/* background-image: url(../../../src/utils/h5player.min.js); */
}
</style>

252
src/views/ty/index5.vue
View File

@ -0,0 +1,252 @@
<template>
<v-scale-screen width="1920" height="1080">
<div id="ty">
<div class="main">
<div class="center">
<!-- <el-button @click="begin"></el-button> -->
<video id="playWnd" autoplay></video>
<!--v-resize="DomResize" 是用来播放器窗口自适应的，如果不需要可以不添加，下面会介绍到-->
</div>
</div>
</div>
</v-scale-screen>
</template>
<script>
// import flvjs from "flv.js";
// import '@/utils/h5player.min.js'
import $ from "jquery";//我这里jquery就是用npm下载的。----npm i jquery -S
import { WebControl } from 'web-control';
export default {
data() {
return {
initCount: 0,
pubKey: '',
oWebControl2: '',
//变量名随便命名的，不太会命名
}
},
created() {
// this.$nextTick 将回调延迟到下次DOM更新循环之后执行。在修改数据之后立即使用它，然后等待DOM更新
this.$nextTick(() => {
this.initPlugin();
this.getVideoFun('05edddc148b141c5930301af43154942')
});
},
methods: {
// 创建播放实例
initPlugin() {
let _that = this;
var oWebControl = new WebControl({
szPluginContainer: 'playWnd', // 指定容器id
iServicePortStart: 15900, // 指定起止端口号，建议使用该值
iServicePortEnd: 15909,
szClassId: '23BF3B0A-2C56-4D97-9C03-0CB103AA8F11', // 用于IE10使用ActiveX的clsid
cbConnectSuccess() {
console.log('创建WebControl实例成功');
oWebControl.JS_StartService('window', {
// WebControl实例创建成功后需要启动服务
dllPath: './VideoPluginConnect.dll', // 值"./VideoPluginConnect.dll"写死
})
.then(
() => {
// // 启动插件服务成功
oWebControl.JS_SetWindowControlCallback({
// 设置消息回调
cbIntegrationCallBack: _that.cbIntegrationCallBack,
});
oWebControl.JS_CreateWnd('playWnd').then(() => {
//JS_CreateWnd创建视频播放窗口，宽高可设定
_that.init(); // 创建播放实例成功后初始化
console.log('111111111111');
});
},
() => {
// 启动插件服务失败
}
)
.catch((err) => {
console.log(err);
});
},
cbConnectError() {
// 创建WebControl实例失败
console.log('xxx');
oWebControl = null;
$('#playWnd').html('插件未启动，正在尝试启动，请稍候...');
window.WebControl.JS_WakeUp('VideoWebPlugin://'); // 程序未启动时执行error函数，采用wakeup来启动程序
this.initCount++;
if (this.initCount < 3) {
setTimeout(function () {
this.initPlugin();
}, 3000);
} else {
$('#playWnd').html('插件启动失败，请检查插件是否安装！');
}
},
cbConnectClose() {
// 异常断开：bNormalClose = false
// JS_Disconnect正常断开：bNormalClose = true
console.log('cbConnectClose');
oWebControl = null;
},
});
this.oWebControl2 = oWebControl;
},
//初始化
init() {
let _that = this;
this.getPubKey(function () {
// 请自行修改以下变量值
var appkey = "29940726"; //综合安防管理平台提供的appkey，必填
var secret = 'SkTCnQdFbNW4Z2suNj8P'; //综合安防管理平台提供的secret，必填
var ip = "192.168.66.13"; //综合安防管理平台IP地址，必填
var playMode = 0; //初始播放模式：0-预览，1-回放
var port = 554; //综合安防管理平台端口，若启用HTTPS协议，默认443
var snapDir = ""; //抓图存储路径
var videoDir = "D:\\VideoDir"; //紧急录像或录像剪辑存储路径
var layout = "1x1"; //playMode指定模式的布局
var enableHTTPS = 1; //是否启用HTTPS协议与综合安防管理平台交互，这里总是填1
var encryptedFields = "secret"; //加密字段，默认加密领域为secret
var showToolbar = 0; //是否显示工具栏，0-不显示，非0-显示
var showSmart = 1; //是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示
var buttonIDs = "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769"; //自定义工具条按钮
// 请自行修改以上变量值
_that.oWebControl2.JS_RequestInterface({
funcName: "init",
argument: JSON.stringify({
appkey: appkey, //API网关提供的appkey
secret: secret, //API网关提供的secret
ip: ip, //API网关IP地址
playMode: playMode, //播放模式（决定显示预览还是回放界面）
port: port, //端口
snapDir: snapDir, //抓图存储路径
videoDir: videoDir, //紧急录像或录像剪辑存储路径
layout: layout, //布局
enableHTTPS: enableHTTPS, //是否启用HTTPS协议
encryptedFields: encryptedFields, //加密字段
showToolbar: showToolbar, //是否显示工具栏
showSmart: showSmart, //是否显示智能信息
buttonIDs: buttonIDs, //自定义工具条按钮
}),
})
.then((res) => {
let width = document.querySelector("#playWnd").offsetWidth;
let height = document.querySelector("#playWnd").offsetHeight;
_that.oWebControl2.JS_Resize(width, height); // 初始化后resize一次，能和盒子大小一致。
console.log('22222222222');
console.log(res);
});
});
},
// 设置窗口控制回调
setCallbacks() {
this.oWebControl.JS_SetWindowControlCallback({
cbIntegrationCallBack: this.cbIntegrationCallBack,
});
},
// 推送消息
cbIntegrationCallBack(oData) {
//操作抓图录像时可以打印信息
console.log(oData);
},
//获取公钥
getPubKey(callback) {
this.oWebControl2.JS_RequestInterface({
funcName: "getRSAPubKey",
argument: JSON.stringify({
keyLength: 1024,
}),
})
.then((oData) => {
console.log(oData);
if (oData.responseMsg.data) {
this.pubKey = oData.responseMsg.data;
callback();
}
});
},
//RSA加密
// setEncrypt(value) {
// var encrypt = new encrypt();
// encrypt.setPublicKey(this.pubKey);
// console.log(encrypt.encrypt(value));
// return encrypt.encrypt(value);
// },
//视频预览功能
getVideoFun(Code) {
let _that = this;
//因为我这里有很多监控点编号需要来回切换，所以用参数传递进来
var cameraIndexCode = Code; //获取输入的监控点编号值，必填
var streamMode = 0; //主子码流标识：0-主码流，1-子码流
var transMode = 1; //传输协议：0-UDP，1-TCP
var gpuMode = 1; //是否启用GPU硬解，0-不启用，1-启用
var wndId = -1; //播放窗口序号（在2x2以上布局下可指定播放窗口）
cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, "");
cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, "");
console.log('44444444444');
console.log(cameraIndexCode);
console.log( _that.oWebControl2);
console.log( _that.oWebControl2.JS_RequestInterface);
_that.oWebControl2.JS_RequestInterface({
funcName: "startPreview",
argument: JSON.stringify({
cameraIndexCode: cameraIndexCode, //监控点编号
streamMode: streamMode, //主子码流标识
transMode: transMode, //传输协议
gpuMode: gpuMode, //是否开启GPU硬解
wndId: wndId, //可指定播放窗口
}),
})
.then((res) => {
console.log(res, "res");
console.log('3333333333');
}).catch((err) => {
console.log(err);
});
},
//停止全部预览
stopVideoFun() {
this.oWebControl2.JS_RequestInterface({
funcName: "stopAllPreview",
});
},
// 销毁播放窗口---这个很重要，因为插件所生成的播放窗口不受html控制，
// 我是弹窗形式展示的播放，即使我关闭弹窗播放器也会一直存在，无法销毁，
// 甚至路由跳转都无法销毁，所以我看了指南找到了销毁窗口方法。
destroyVideoDiv() {
this.oWebControl2.JS_DestroyWnd()
.then((data) => {
console.log("销毁窗口成功");
console.log(data);
})
.catch((err) => {
console.log("销毁窗口失败");
console.log(err);
});
},
// 抓图按钮---播放器有工具栏，不需要另外写抓图方法了，所以这个可有可无。
zhuaPicFun() {
this.oWebControl2.JS_RequestInterface({
funcName: "snapShot",
argument: {
name: "D:\test.jpg", // 窗口布局
},
});
},
}
}
</script>
<style>
.demo-video {
max-width: 880px;
max-height: 660px;
/* background-image: url(../../../src/utils/h5player.min.js); */
}
</style>

2
src/views/ty/index1.vue → src/views/ty/index7.vue
View File

@ -184,7 +184,7 @@ export default {
this.player = flvjs.createPlayer({
type: "flv",
isLive: true,
url: `https://dxsnvr.com:2443/live/ch1443_0_1.flv`
url: `rtmp://58.200.131.2:1935/livetv/hunantv`
});
this.player.attachMediaElement(video);
try {

65
src/views/ty/index8.vue
View File

@ -0,0 +1,65 @@
<template>
<v-scale-screen width="1920" height="1080">
<div id="ty">
<div class="main">
<div class="center">
<hls-video :videoUrl="currentFileUrl" class="videoBox"
style="height: 370px"></hls-video>
</div>
</div>
</div>
</v-scale-screen>
</template>
<script>
// import flvjs from "flv.js";
import HlsVideo from "../../components/btgym/HlsVideo.vue";
// 引入api
import * as homeApi from '@/api/home'
export default {
components: { HlsVideo },
data() {
return {
currentFileUrl: "rtmp://192.168.66.13:1935/live/openUrl/1OSHzLa", //当前视频地址
}
},
mounted() {
},
methods: {
getVideo() {
let that = this
console.log(that);
homeApi.allGetVideo().then(res => {
// get allTimeData
const tmpdata = res.data.returnData
console.log(tmpdata);
// this.day_num = tmpdata.day.noRepeatInNum
// this.week_num_num = tmpdata.week.noRepeatInNum
// this.mon_num = tmpdata.month.noRepeatInNum
// this.year_num = tmpdata.year.noRepeatInNum
// let btdata = new Array();
// let bvdata = new Array();
// tmpdata.foreach(function(item,index){
// console.log(item);
// console.log(index);
// });
});
},
}
}
</script>
<style>
.demo-video {
max-width: 880px;
max-height: 660px;
/* background-image: url(../../../src/utils/h5player.min.js); */
}
</style>

91
src/views/ty/index9.vue
View File

@ -0,0 +1,91 @@
<template>
<v-scale-screen width="1920" height="1080">
<div id="ty">
<div class="main">
<div class="center">
<video id="my-player" class="video-js vjs-default-skin vjs-big-play-centered vjs-fluid" preload="auto"
autoplay style="width: 1200px;height: 640px;" controls data-setup="{}"></video>
</div>
</div>
</div>
</v-scale-screen>
</template>
<script>
// import flvjs from "flv.js";
import videojs from "video.js";
import "video.js/dist/video-js.css";
import "videojs-flash";
// 引入api
import * as homeApi from '@/api/home'
export default {
data() {
return {
}
},
mounted() {
this.playVideo()
},
methods: {
playVideo() {
console.log('22222222222');
var videoPlayer = videojs(
"my-player",
{
sources: [
{
src: "rtmp://192.168.66.13:1935/live/openUrl/1OSHzLa",
type: "rtmp/flv"
}
],
muted: true,
controls: true,
autoplay: true,
loop: true,
techOrder: ["html5", "flash"],
width: "1200",
height: "640"
},
function () {
this.play();
console.log('111111111111');
}
);
},
getVideo() {
let that = this
console.log(that);
homeApi.allGetVideo().then(res => {
// get allTimeData
const tmpdata = res.data.returnData
console.log(tmpdata);
// this.day_num = tmpdata.day.noRepeatInNum
// this.week_num_num = tmpdata.week.noRepeatInNum
// this.mon_num = tmpdata.month.noRepeatInNum
// this.year_num = tmpdata.year.noRepeatInNum
// let btdata = new Array();
// let bvdata = new Array();
// tmpdata.foreach(function(item,index){
// console.log(item);
// console.log(index);
// });
});
},
}
}
</script>
<style>
.demo-video {
max-width: 880px;
max-height: 660px;
/* background-image: url(../../../src/utils/h5player.min.js); */
}
</style>

10
vue.config.js
View File

@ -5,9 +5,19 @@ const resolve = dir => {
module.exports = {
// open: true,
publicPath: './',
lintOnSave: false,
chainWebpack: config => {
config.resolve.alias
.set('_c', resolve('src/components')) // key,value自行定义，比如.set('@@', resolve('src/components'))
const rootModulesPath = path.resolve('node_modules');
if (config.resolve.modules.store.has(rootModulesPath)) {
config.resolve.modules.store.delete(rootModulesPath);
}
if (config.resolve.modules.store.has('node_modules')) {
config.resolve.modules.store.delete('node_modules');
}
config.resolve.modules.store.add(rootModulesPath);
config.resolve.modules.store.add('node_modules');
},
// Proxy:{
// '/':{

Write Preview
Loading…
Cancel
Save