2023年4月22日 修改播放标题

This commit is contained in:
bai 2023-04-22 15:54:58 +08:00
parent 1eb83893d1
commit fff7d41efa
1 changed files with 24 additions and 10 deletions

View File

@ -36,9 +36,9 @@
<!-- </a-col> --> <!-- </a-col> -->
<!-- </a-row> --> <!-- </a-row> -->
<div> <div>
<a-card :title="mainVideoCardBoxTitle" class="videoCardMain">
<video id="mainVideo" v-bind="videoOption" style="width:100%" @click.prevent.stop></video>
<video id="mainVideo" v-bind="videoOption" style="width:100%" @click.prevent.stop></video> </a-card>
</div> </div>
<div style="display: flex;flex-direction: row;flex-wrap: nowrap;overflow-x: scroll;"> <div style="display: flex;flex-direction: row;flex-wrap: nowrap;overflow-x: scroll;">
<div v-for="(item,index) of calcOtherVideo()" class="videoMax"> <div v-for="(item,index) of calcOtherVideo()" class="videoMax">
@ -95,6 +95,7 @@ const _document = window.document;
const leftList = <any>ref([]); const leftList = <any>ref([]);
const currentItem = <any>ref({}); const currentItem = <any>ref({});
const topWidth = <any>ref('0'); const topWidth = <any>ref('0');
const mainVideoCardBoxTitle = <any>ref('');
const videoOption = reactive({ const videoOption = reactive({
// width: '800', // // width: '800', //
@ -180,12 +181,12 @@ function playerVideo(item){
console.log(`🚀 ~ file: index.vue:148 ~ playerVideo ~ x:`, x); console.log(`🚀 ~ file: index.vue:148 ~ playerVideo ~ x:`, x);
console.log(`🚀 ----------------------------------------------🚀`); console.log(`🚀 ----------------------------------------------🚀`);
// x.connectFn('rtsp://admin:admin@10.250.116.235:8554/live','external') // x.connectFn('rtsp://admin:admin@10.250.116.235:8554/live','external')
// if(Number(Number(Math.random()).toFixed(1))*10 >= 5){ if(Number(Number(Math.random()).toFixed(1))*10 >= 5){
// x.connectFn('rtsp://127.0.0.1:8554/video','external'); x.connectFn('rtsp://127.0.0.1:8554/video','external');
// }else{ }else{
// x.connectFn(`rtsp://${x.ip}/live`,'external') x.connectFn(`rtsp://${x.ip}/live`,'external')
// } }
// return; return;
if(x.changshang == '奥威亚'){ if(x.changshang == '奥威亚'){
x.connectFn(`rtsp://${x.ip}/stream/0?config.login=web`,'external') x.connectFn(`rtsp://${x.ip}/stream/0?config.login=web`,'external')
}else if(x.changshang == '卓智'){ }else if(x.changshang == '卓智'){
@ -217,8 +218,14 @@ function switchVideoToMain(){
console.log(`🚀 ------------------------------------------------------------------------------------🚀`); console.log(`🚀 ------------------------------------------------------------------------------------🚀`);
nextTick(() => { nextTick(() => {
let firstBox = <HTMLVideoElement> document.querySelector('.videoMax');
let titleBox = <HTMLVideoElement> firstBox?.querySelector('.ant-card-head-title');
let title = titleBox?.textContent;
mainVideoCardBoxTitle.value = title;
let mainVideo = <HTMLVideoElement> document.querySelector('#mainVideo'); let mainVideo = <HTMLVideoElement> document.querySelector('#mainVideo');
let firstVideo = <HTMLVideoElement> document.querySelector('.videoMax video'); let firstVideo = <HTMLVideoElement> firstBox.querySelector('video');
mainVideo.srcObject = firstVideo.srcObject mainVideo.srcObject = firstVideo.srcObject
mainVideo.play(); mainVideo.play();
}); });
@ -227,6 +234,13 @@ function switchVideoToMain(){
function bVideoClick(e){ function bVideoClick(e){
let mainVideo = <HTMLVideoElement> document.querySelector('#mainVideo'); let mainVideo = <HTMLVideoElement> document.querySelector('#mainVideo');
let currentVideo = <HTMLVideoElement> e.srcElement; let currentVideo = <HTMLVideoElement> e.srcElement;
let title = currentVideo?.parentElement?.parentElement?.querySelector('.ant-card-head-title')?.textContent
mainVideoCardBoxTitle.value = title;
console.log(`🚀 --------------------------------------------------------------------🚀`);
console.log(`🚀 ~ file: index.vue:238 ~ bVideoClick ~ currentVideo:`, currentVideo);
console.log(`🚀 --------------------------------------------------------------------🚀`);
mainVideo.srcObject = currentVideo.srcObject mainVideo.srcObject = currentVideo.srcObject
mainVideo.play(); mainVideo.play();
} }