39
|
|
require('videojs-playlist')
|
|
40
|
40
|
require('video.js/dist/lang/zh-CN.js')
|
|
41
|
41
|
require('video.js/dist/video-js.min.css')
|
|
42
|
42
|
|
|
43
|
43
|
export default {
|
|
44
|
|
components: { ReplayDialog, VideoPlayer, RtmpVideo },
|
|
|
44
|
components: { ReplayDialog, RtmpVideo },
|
|
45
|
45
|
filters: {
|
|
46
|
46
|
handleText (value) {
|
|
47
|
47
|
if (!value) return ''
|
|
|
@ -53,36 +53,9 @@ export default {
|
|
53
|
53
|
},
|
|
54
|
54
|
data () {
|
|
55
|
55
|
return {
|
|
56
|
|
videoOptions: {
|
|
57
|
|
autoplay: true, // 如果true,浏览器准备好时开始回放。
|
|
58
|
|
muted: true, // 默认情况下将会消除任何音频。
|
|
59
|
|
loop: false, // 导致视频一结束就重新开始。
|
|
60
|
|
preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
|
|
61
|
|
language: 'zh-CN',
|
|
62
|
|
aspectRatio: '13:10', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
|
|
63
|
|
// fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
|
|
64
|
|
// 是否流体自适应容器宽高
|
|
65
|
|
fluid: true,
|
|
66
|
|
// // 设置视频播放器的显示宽度（以像素为单位）
|
|
67
|
|
// width: '100px',
|
|
68
|
|
// // 设置视频播放器的显示高度（以像素为单位）
|
|
69
|
|
// height: '300px',
|
|
70
|
|
sources: [{
|
|
71
|
|
withCredentials: false,
|
|
72
|
|
type: 'application/x-mpegURL', // 这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
|
|
73
|
|
src: 'http://10.19.90.34:1080/live/1.m3u8' // url地址
|
|
74
|
|
}],
|
|
75
|
|
flash: { hls: { withCredentials: false } },
|
|
76
|
|
html5: { hls: { withCredentials: false } },
|
|
77
|
|
notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
|
|
78
|
|
controlBar: {
|
|
79
|
|
timeDivider: false,
|
|
80
|
|
// durationDisplay: true,
|
|
81
|
|
remainingTimeDisplay: false,
|
|
82
|
|
fullscreenToggle: true, // 全屏按钮,
|
|
83
|
|
pictureInPictureToggle: false
|
|
84
|
|
}
|
|
85
|
|
},
|
|
|
56
|
viewLayoutSpan: 3,
|
|
|
57
|
events: ['fullscreenchange'],
|
|
|
58
|
videoOptions: [],
|
|
86
|
59
|
videoCurrent: 1, // 大门分页数据
|
|
87
|
60
|
videoPageSize: 10, // 大门分页数据
|
|
88
|
61
|
videoTotal: 0, // 大门分页总数
|
|
|
@ -105,16 +78,60 @@ export default {
|
|
105
|
78
|
// endDay: '2020-12-19 20:14:00'
|
|
106
|
79
|
}
|
|
107
|
80
|
},
|
|
|
81
|
computed: {
|
|
|
82
|
player() {
|
|
|
83
|
return this.$refs.videoPlayer1.player
|
|
|
84
|
}
|
|
|
85
|
},
|
|
108
|
86
|
mounted () {
|
|
109
|
87
|
this.getWindFiledList() // 获取风场列表
|
|
110
|
88
|
},
|
|
111
|
89
|
methods: {
|
|
112
|
|
getVideoPlayList (item) {
|
|
113
|
|
return [{
|
|
114
|
|
fileId: item.videoUrl,
|
|
115
|
|
fileType: 'rtmp/flv',
|
|
116
|
|
id: item.resourceToolId
|
|
117
|
|
}]
|
|
|
90
|
// 修改视频组件控制栏的元素以及样式
|
|
|
91
|
async createMyButton () {
|
|
|
92
|
this.$nextTick(() => {
|
|
|
93
|
const bars = document.querySelectorAll('.vjs-control-bar')
|
|
|
94
|
let time = document.getElementsByClassName('vjs-current-time vjs-time-control vjs-control')
|
|
|
95
|
let start = document.getElementsByClassName('vjs-play-control vjs-control vjs-button')
|
|
|
96
|
let volume = document.getElementsByClassName('vjs-volume-panel vjs-control vjs-volume-panel-horizontal')
|
|
|
97
|
let text = document.getElementsByClassName('vjs-live-control vjs-control')
|
|
|
98
|
time.forEach(item => {
|
|
|
99
|
item.remove()
|
|
|
100
|
})
|
|
|
101
|
start.forEach(item => {
|
|
|
102
|
item.remove()
|
|
|
103
|
})
|
|
|
104
|
volume.forEach(item => {
|
|
|
105
|
item.remove()
|
|
|
106
|
})
|
|
|
107
|
text.forEach(item => {
|
|
|
108
|
item.remove()
|
|
|
109
|
})
|
|
|
110
|
bars.forEach((item, index) => {
|
|
|
111
|
let txt = document.createElement('span')
|
|
|
112
|
txt.innerHTML = '集控室（人脸识别）'
|
|
|
113
|
txt.style.marginLeft = '12px'
|
|
|
114
|
let btn = document.createElement('button')
|
|
|
115
|
btn.style.color = 'white'
|
|
|
116
|
btn.style.cursor = 'pointer'
|
|
|
117
|
btn.style.marginLeft = 'auto'
|
|
|
118
|
btn.className = 'aidicon aidicon-image-outline'
|
|
|
119
|
btn.setAttribute('resourceToolId', item.value)
|
|
|
120
|
btn.setAttribute('title', '识别记录')
|
|
|
121
|
btn.addEventListener('click', this.goDistinguishRecord)
|
|
|
122
|
let btn1 = document.createElement('button')
|
|
|
123
|
btn1.style.color = 'white'
|
|
|
124
|
btn1.style.cursor = 'pointer'
|
|
|
125
|
btn1.className = 'aidicon aidicon-piechart-outline'
|
|
|
126
|
btn1.setAttribute('title', '视频回放')
|
|
|
127
|
btn1.addEventListener('click', () => {
|
|
|
128
|
this.handleReview(this.videoList[index].id)
|
|
|
129
|
})
|
|
|
130
|
item.appendChild(txt)
|
|
|
131
|
item.appendChild(btn)
|
|
|
132
|
item.appendChild(btn1)
|
|
|
133
|
})
|
|
|
134
|
})
|
|
118
|
135
|
},
|
|
119
|
136
|
// 获取场景列表
|
|
120
|
137
|
getSceneList () {
|
|
|
@ -124,6 +141,19 @@ export default {
|
|
124
|
141
|
if (element.id === this.gateFieldData) {
|
|
125
|
142
|
sysapi.getMonitorScene(this.organizationList[index].id).then((resp) => {
|
|
126
|
143
|
this.sceneList = resp.data.data || []
|
|
|
144
|
if (resp.data.data[0].monitorViewLayout === '1X1') {
|
|
|
145
|
this.viewLayoutSpan = 10
|
|
|
146
|
this.videoPageSize = 1
|
|
|
147
|
} else if (resp.data.data[0].monitorViewLayout === '2X2') {
|
|
|
148
|
this.viewLayoutSpan = 6
|
|
|
149
|
this.videoPageSize = 4
|
|
|
150
|
} else if (resp.data.data[0].monitorViewLayout === '3X3') {
|
|
|
151
|
this.viewLayoutSpan = 4
|
|
|
152
|
this.videoPageSize = 9
|
|
|
153
|
} else if (resp.data.data[0].monitorViewLayout === '4X4') {
|
|
|
154
|
this.viewLayoutSpan = 3
|
|
|
155
|
this.videoPageSize = 16
|
|
|
156
|
}
|
|
127
|
157
|
this.tabClick(this.sceneList[0].monitorSceneId)
|
|
128
|
158
|
})
|
|
129
|
159
|
}
|
|
|
@ -170,19 +200,56 @@ export default {
|
|
170
|
200
|
console.log(err)
|
|
171
|
201
|
})
|
|
172
|
202
|
},
|
|
|
203
|
handlefullscreenchange(val) {
|
|
|
204
|
// 因为我是又封装了一个组件，打印val会有相应所需的属性，全屏状态为：isFullscreen_
|
|
|
205
|
val.isFullscreen_ = !val.isFullscreen_
|
|
|
206
|
// this.$emit('fullscreenchange', val)
|
|
|
207
|
},
|
|
173
|
208
|
// 获得风场大门数据
|
|
174
|
209
|
getVideoSurveillanceData () {
|
|
175
|
210
|
var id = this.tabId
|
|
176
|
211
|
this.paramsObj.page = this.videoCurrent
|
|
177
|
|
sysapi.getVideoSurveillanceDataForPage({ params: { monitorSceneId: id, pageNumber: this.videoCurrent, pageSize: this.videoPageSize} })
|
|
178
|
|
.then(res => {
|
|
179
|
|
debugger
|
|
180
|
|
this.videoList = res.data.data.data
|
|
181
|
|
this.videoTotal = res.data.data.total
|
|
|
212
|
sysapi.getVideoSurveillanceData({ params: { monitorSceneId: id } }).then(res => {
|
|
|
213
|
this.videoList = res.data.data
|
|
|
214
|
for (let i in res.data.data) {
|
|
|
215
|
let obj = {
|
|
|
216
|
autoplay: true, // 如果true,浏览器准备好时开始回放。
|
|
|
217
|
muted: true, // 默认情况下将会消除任何音频。
|
|
|
218
|
loop: false, // 导致视频一结束就重新开始。
|
|
|
219
|
preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
|
|
|
220
|
language: 'zh-CN',
|
|
|
221
|
aspectRatio: '13:10', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
|
|
|
222
|
// fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
|
|
|
223
|
// 是否流体自适应容器宽高
|
|
|
224
|
fluid: true,
|
|
|
225
|
// // 设置视频播放器的显示宽度（以像素为单位）
|
|
|
226
|
// width: '100px',
|
|
|
227
|
// // 设置视频播放器的显示高度（以像素为单位）
|
|
|
228
|
// height: '300px',
|
|
|
229
|
sources: [{
|
|
|
230
|
withCredentials: false,
|
|
|
231
|
type: 'application/x-mpegURL', // 这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
|
|
|
232
|
src: res.data.data[i].videoUrl // url地址
|
|
|
233
|
}],
|
|
|
234
|
flash: { hls: { withCredentials: false } },
|
|
|
235
|
html5: { hls: { withCredentials: false } },
|
|
|
236
|
notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
|
|
|
237
|
controlBar: {
|
|
|
238
|
timeDivider: false,
|
|
|
239
|
durationDisplay: false,
|
|
|
240
|
remainingTimeDisplay: false,
|
|
|
241
|
fullscreenToggle: true, // 全屏按钮,
|
|
|
242
|
pictureInPictureToggle: false
|
|
|
243
|
}
|
|
|
244
|
}
|
|
|
245
|
this.videoOptions.push(obj)
|
|
|
246
|
}
|
|
|
247
|
this.createMyButton()
|
|
182
|
248
|
})
|
|
183
|
249
|
},
|
|
184
|
250
|
// 进入识别记录界面
|
|
185
|
|
goDistinguishRecord (id) {
|
|
|
251
|
goDistinguishRecord (e) {
|
|
|
252
|
var id = e.target.getAttribute('resourceToolId')
|
|
186
|
253
|
this.$router.push({ path: '/videoSurveillance/distinguishRecord', query: { videoId: id } })
|
|
187
|
254
|
},
|
|
188
|
255
|
// 风场大门分页
|
|
|
@ -247,37 +314,43 @@ export default {
|
|
247
|
314
|
}
|
|
248
|
315
|
}
|
|
249
|
316
|
}
|
|
250
|
|
.pager {
|
|
|
317
|
.pager {
|
|
251
|
318
|
margin-right: auto;
|
|
252
|
319
|
margin: 21px 0px 24px 0;
|
|
253
|
320
|
float: right;
|
|
254
|
321
|
}
|
|
255
|
|
.btn-primary,
|
|
256
|
|
.radio-group-button .form-radio:checked,
|
|
257
|
|
.radio-group-button .form-radio[checked] {
|
|
258
|
|
color: #0089d4;
|
|
259
|
|
background-color: #fff;
|
|
260
|
|
border: 1px solid #0089d4;
|
|
261
|
|
}
|
|
262
|
|
.btn-secondary,
|
|
263
|
|
.radio-group-button .form-radio,
|
|
264
|
|
.checkbox-group--button .form-checkbox .form-checkbox__inner,
|
|
265
|
|
.btn-dashed-secondary,
|
|
266
|
|
.btn-outline-secondary {
|
|
267
|
|
background: none;
|
|
268
|
|
}
|
|
269
|
|
.video-js .vjs-control:focus, .video-js .vjs-control:focus:before, .video-js .vjs-control:hover:before{
|
|
270
|
|
color:#0089d4;
|
|
271
|
|
text-shadow: none;
|
|
272
|
|
}
|
|
273
|
|
.vjs-control-bar{
|
|
274
|
|
justify-content: flex-end;
|
|
275
|
|
}
|
|
276
|
|
.video-js .vjs-control{
|
|
|
322
|
.vjs-custom-skin > .video-js .vjs-control-bar .vjs-fullscreen-control{
|
|
|
323
|
height:38px !important;
|
|
|
324
|
}
|
|
|
325
|
.video-js .vjs-control{
|
|
277
|
326
|
cursor: pointer;
|
|
|
327
|
width: 28px;
|
|
|
328
|
margin-right:12px;
|
|
278
|
329
|
}
|
|
279
|
|
.video-js .vjs-fullscreen-control{
|
|
280
|
|
order:2;
|
|
|
330
|
.vjs-control-bar{
|
|
|
331
|
display: flex;
|
|
|
332
|
justify-content: center;
|
|
|
333
|
align-items: center;
|
|
|
334
|
}
|
|
|
335
|
.video-js button{
|
|
|
336
|
font-size:16px;
|
|
|
337
|
}
|
|
|
338
|
.aidicon-image-outline:hover{
|
|
|
339
|
color: #0089d4 !important;
|
|
|
340
|
}
|
|
|
341
|
.aidicon-piechart-outline:hover{
|
|
|
342
|
color: #0089d4 !important;
|
|
|
343
|
}
|
|
|
344
|
.vjs-icon-placeholder:hover{
|
|
|
345
|
color: #0089d4 !important;
|
|
|
346
|
}.vjs-icon-placeholder{
|
|
|
347
|
font-size: 13px;
|
|
|
348
|
display: flex;
|
|
|
349
|
justify-content: center;
|
|
|
350
|
align-items: center;
|
|
|
351
|
}
|
|
|
352
|
.vjs-tech {
|
|
|
353
|
pointer-events: none;
|
|
281
|
354
|
}
|
|
282
|
355
|
}
|
|
283
|
356
|
</style>
|