H5视频进入全屏状态时,手机横屏旋转

2023-09-13  本文已影响0人  喜欢走弯路的人

H5视频进入全屏状态时,手机横屏旋转,VUE3写法:

    onMounted(()=>{

        let video = document.getElementById(props.videoId);

        video.addEventListener('fullscreenchange', (e) => {

             if (methods.checkIsFullScreen()) {

              console.log("进入全屏");

             methods.lockOrientation('landscape') // landscape:表示横屏

             } else {

               console.log("退出全屏");

               methods.lockOrientation('portrait') // portrait:表示竖屏

         }

      });

    })

const methods={

     checkIsFullScreen() { //判断是否进入全屏

             var isFullScreen = document.fullscreen || document.mozFullScreen || document.webkitIsFullScreen;

             return isFullScreen == undefined ? false : isFullScreen;

    },

     lockOrientation(orientation) {

             if (typeof plus !== 'undefined' && typeof plus.screen !== 'undefined') {

                     plus.screen.lockOrientation(orientation) //手机横屏竖屏旋转

                }

        }

}

onMounted methods
上一篇 下一篇

猜你喜欢

热点阅读