视频窗口
< div class = "relative bg-black" style= "width: 100%; height: 30vh" > < div id= "currentVideo" class = "w100 h100 absolute" > < div class = "absolute flex_r w100" style= "bottom: 0" > < divv- show= "!big" class = "pd-6" @click= "screenClick(1)" style= "background: rgba(0, 0, 0, 0.3)" > < el- icon style= "z-index: 999" > < FullScreen / > < / el- icon> < / div> < divv- show= "big" @click= "screenClick(2)" class = "pd-6 mg-10" style= "background: rgba(0, 0, 0, 0.3)" > < el- icon style= "z-index: 999" > < FullScreen / > < / el- icon> < / div> < / div> < / div> < div v- show= "speekName" class = "absolute green flex_r w100" > { { speekName } } 在说话< / div> < / div>
js
let big = ref ( false ) ; function getDeviceType ( ) { const ua = navigator. userAgent. toLowerCase ( ) ; if ( / android / . test ( ua) ) { return "Android" ; } else if ( / iphone|ipad|ipod / . test ( ua) ) { return "iOS" ; } else { return "Unknown" ; }
} const deviceType = getDeviceType ( ) ;
console. log ( ` 当前设备类型: ${ deviceType} ` ) ; function screenClick ( type ) { if ( deviceType === "Android" ) { screenAndroidClick ( ) ; } else { if ( type == 1 ) { simulateFullscreen ( ) ; } else { exitFullscreen ( ) ; } }
}
function fullScreen ( ) { return ( document. fullscreenElement || document. webkitFullscreenElement || document. msFullscreenElement) ;
}
function screenAndroidClick ( ) { if ( fullScreen ( ) ) { if ( document. exitFullscreen) { document. exitFullscreen ( ) ; } else if ( document. webkitExitFullscreen) { document. webkitExitFullscreen ( ) ; } else if ( document. mozCancelFullScreen) { document. mozCancelFullScreen ( ) ; } else if ( document. msExitFullscreen) { document. msExitFullscreen ( ) ; } big. value = false ; } else { var elem = document. querySelector ( "#currentVideo" ) ; if ( elem. requestFullscreen) { elem. requestFullscreen ( ) ; } else if ( elem. webkitRequestFullscreen) { elem. webkitRequestFullscreen ( ) ; } else if ( elem. mozRequestFullScreen) { elem. mozRequestFullScreen ( ) ; } else if ( elem. msRequestFullscreen) { elem. msRequestFullscreen ( ) ; } big. value = true ; }
}
function simulateFullscreen ( ) { const element = document. getElementById ( "currentVideo" ) ; element. style. position = "fixed" ; element. style. top = 0 ; element. style. left = 0 ; element. style. width = "100vw" ; element. style. height = "100vh" ; element. style. zIndex = 9999 ; element. style. backgroundColor = "#000" ; console. log ( 1111111111 , "ios打" ) ; big. value = true ;
}
function exitFullscreen ( ) { const element = document. getElementById ( "currentVideo" ) ; element. style. position = "" ; element. style. top = "" ; element. style. left = "" ; element. style. width = "" ; element. style. height = "" ; element. style. zIndex = "" ; element. style. backgroundColor = "" ; console. log ( 222222222222 , "ios小啊" ) ; big. value = false ;
}