js-控制视频播放的全屏开启或者关闭

最新推荐文章于 2023-06-05 14:42:18 发布

QQ_286115751

最新推荐文章于 2023-06-05 14:42:18 发布

阅读量3.4k

点赞数 1

本文链接：https://blog.csdn.net/qq_35515563/article/details/102504742

版权

js-控制视频播放的全屏开启或者关闭

//進入全屏
 function launchFullscreen(element) 
   {
    //此方法不可以在異步任務中執行，否則火狐無法全屏
     if(element.requestFullscreen) {
       element.requestFullscreen();
     } else if(element.mozRequestFullScreen) {
       element.mozRequestFullScreen();
     } else if(element.msRequestFullscreen){ 
       element.msRequestFullscreen();  
     } else if(element.oRequestFullscreen){
        element.oRequestFullscreen();
    }
    else if(element.webkitRequestFullscreen)
     {
       element.webkitRequestFullScreen();
     }else{
     
        var docHtml  = document.documentElement;
        var docBody  = document.body;
        var videobox  = document.getElementById('videobox');
        var  cssText = 'width:100%;height:100%;overflow:hidden;';
        docHtml.style.cssText = cssText;
        docBody.style.cssText = cssText;
        videobox.style.cssText = cssText+';'+'margin:0px;padding:0px;';
        document.IsFullScreen = true;

      }
   }
//退出全屏
   function exitFullscreen()
   {
       if (document.exitFullscreen) {
         document.exitFullscreen();
       } else if (document.msExitFullscreen) {
         document.msExitFullscreen();
       } else if (document.mozCancelFullScreen) {
         document.mozCancelFullScreen();
       } else if(document.oRequestFullscreen){
            document.oCancelFullScreen();
        }else if (document.webkitExitFullscreen){
         document.webkitExitFullscreen();
       }else{
        var docHtml  = document.documentElement;
        var docBody  = document.body;
        var videobox  = document.getElementById('videobox');
        docHtml.style.cssText = "";
        docBody.style.cssText = "";
        videobox.style.cssText = "";
        document.IsFullScreen = false;
    }
  }

// 点击开启视频
	var Media = document.getElementById('media-play');
	$('.play-btn').click(function(){
		Media.play();
		$('.video-wrap').fadeIn();
        // 开启全屏
		launchFullscreen(document.getElementById('media-play')); 
	});

    // 点击暂停关闭全屏
	$('#media-play').click(function(event) {
		exitFullscreen();
	});