移动端下监听用户屏幕旋转状态

背景

最近在写一个在线课程观看的功能，产品给出的需求是用户无法拖动进度条进行快进播放，
拿到需求的第一时间是去查文档看是否有相关api可以禁止， 然无功而返。

方案选择

最终图方便，在界面上进行简单处理，通过一个透明遮罩对用户的操作进行屏蔽。起初用户不开启全屏是可以实现的，然而当用户全屏播放时，就无法屏蔽用户的操作了

解决

监听用户是否旋转屏幕

   function orientationChange() { 
            switch(window.orientation) { 
            　　case 0:  
                    console.log("肖像模式 0,screen-width: " + screen.width + "; screen-height:" + screen.height); 
                    break; 
            　　case -90:  
                    console.log("左旋 -90,screen-width: " + screen.width + "; screen-height:" + screen.height); 
                    break; 
            　　case 90:    
                    console.log("右旋 90,screen-width: " + screen.width + "; screen-height:" + screen.height); 
                    break; 
            　　case 180:    
                    console.log("风景模式 180,screen-width: " + screen.width + "; screen-height:" + screen.height); 
                　　break; 
        }};
        // 添加事件监听 
        addEventListener('load', function(){ 
            orientationChange(); 
            window.onorientationchange = orientationChange; 
        });