Commit b27126278f124ed3379de0f5cf9b4e67f3b6f9f9
1 parent
29b360e4
pref: camera manage split scrren has exist scrollbar
Showing
1 changed file
with
15 additions
and
6 deletions
| @@ -27,8 +27,8 @@ | @@ -27,8 +27,8 @@ | ||
| 27 | }); | 27 | }); |
| 28 | 28 | ||
| 29 | const options = reactive({ | 29 | const options = reactive({ |
| 30 | - width: '800px', | ||
| 31 | - height: '450px', | 30 | + width: '200px', |
| 31 | + height: '200px', | ||
| 32 | color: '#409eff', | 32 | color: '#409eff', |
| 33 | muted: false, //静音 | 33 | muted: false, //静音 |
| 34 | webFullScreen: false, | 34 | webFullScreen: false, |
| @@ -39,9 +39,7 @@ | @@ -39,9 +39,7 @@ | ||
| 39 | ligthOff: false, //关灯模式 | 39 | ligthOff: false, //关灯模式 |
| 40 | volume: 0.3, //默认音量大小 | 40 | volume: 0.3, //默认音量大小 |
| 41 | control: true, //是否显示控制器 | 41 | control: true, //是否显示控制器 |
| 42 | - title: '', //视频名称 | ||
| 43 | type: 'm3u8', | 42 | type: 'm3u8', |
| 44 | - src: '', //视频源 | ||
| 45 | controlBtns: [ | 43 | controlBtns: [ |
| 46 | 'audioTrack', | 44 | 'audioTrack', |
| 47 | 'quality', | 45 | 'quality', |
| @@ -74,6 +72,7 @@ | @@ -74,6 +72,7 @@ | ||
| 74 | organizationId: unref(organizationId)!, | 72 | organizationId: unref(organizationId)!, |
| 75 | }); | 73 | }); |
| 76 | cameraList.value = items; | 74 | cameraList.value = items; |
| 75 | + console.log({ url: cameraList.value.map((item) => item.videoUrl) }); | ||
| 77 | } catch (error) { | 76 | } catch (error) { |
| 78 | } finally { | 77 | } finally { |
| 79 | loading.value = false; | 78 | loading.value = false; |
| @@ -168,8 +167,13 @@ | @@ -168,8 +167,13 @@ | ||
| 168 | :span="getColLayout" | 167 | :span="getColLayout" |
| 169 | > | 168 | > |
| 170 | <div class="box-border w-full h-full p-3"> | 169 | <div class="box-border w-full h-full p-3"> |
| 171 | - <div class="bg-yellow-50 w-full h-full overflow-hidden"> | ||
| 172 | - <VideoPlay v-bind="options" :src="item.videoUrl" /> | 170 | + <div class="bg-yellow-50 w-full h-full overflow-hidden relative"> |
| 171 | + <VideoPlay v-bind="options" :src="item.videoUrl" :title="item.name" /> | ||
| 172 | + <div | ||
| 173 | + class="absolute hidden top-0 left-0 z-50 bg-gray-200 text-lg w-full h-full flex justify-center items-center" | ||
| 174 | + > | ||
| 175 | + <span>视频名称</span> | ||
| 176 | + </div> | ||
| 173 | </div> | 177 | </div> |
| 174 | </div> | 178 | </div> |
| 175 | </Col> | 179 | </Col> |
| @@ -203,4 +207,9 @@ | @@ -203,4 +207,9 @@ | ||
| 203 | .split-screen-mode:deep(.ant-tabs-tab-active) { | 207 | .split-screen-mode:deep(.ant-tabs-tab-active) { |
| 204 | border-bottom: 1px solid #eee; | 208 | border-bottom: 1px solid #eee; |
| 205 | } | 209 | } |
| 210 | + | ||
| 211 | + .split-screen-mode:deep(video) { | ||
| 212 | + position: absolute; | ||
| 213 | + height: calc(100%) !important; | ||
| 214 | + } | ||
| 206 | </style> | 215 | </style> |