js实现页面视频全屏播放

js实现页面视频全屏播放

html

js

<script type="text/javascript">
   			
   			function requestFullScreen(element) {
 if (element.requestFullscreen) {
  element.requestFullscreen()
 } else if (element.mozRequestFullScreen) {
  element.mozRequestFullScreen()
 } else if (element.msRequestFullscreen) {
  element.msRequestFullscreen()
 } else if (element.webkitRequestFullscreen) {
  element.webkitRequestFullScreen()
 }
}

function exitFull() {
 if (document.exitFullscreen) {
  document.exitFullscreen()
 } else if (document.msExitFullscreen) {
  document.msExitFullscreen()
 } else if (document.mozCancelFullScreen) {
  document.mozCancelFullScreen()
 } else if (document.webkitExitFullscreen) {
  document.webkitExitFullscreen()
 }
}

//判断是否全屏
function IsFull() {
    var fullscreenElement =
        document.fullscreenElement
        || document.mozFullscreenElement
        || document.webkitFullscreenElement;
    var fullscreenEnabled =
        document.fullscreenEnabled
        || document.mozFullscreenEnabled
        || document.webkitFullscreenEnabled;
    if (fullscreenElement == null)
    {
        return false;
    } else {
        return true;
    }
}
document.addEventListener("fullscreenchange", function (event) {
  console.log("fullscreenchange", event);
   if (IsFull()) {
  	console.log('进入全屏')
  	$("#closescreen").show();
	$("#openscreen").hide();
 } else {
  console.log('退出全屏')
 	 $("#closescreen").hide();
	$("#openscreen").show();
 }
});
document.addEventListener("mozfullscreenchange", function (event) {
  console.log("mozfullscreenchange ", event);
    if (IsFull()) {
  	console.log('进入全屏')
  	$("#closescreen").show();
	$("#openscreen").hide();
 } else {
  console.log('退出全屏')
 	 $("#closescreen").hide();
	$("#openscreen").show();
 }
});
document.addEventListener("webkitfullscreenchange", function (event) {
  console.log("webkitfullscreenchange", event);
   if (IsFull()) {
  	console.log('进入全屏')
  	$("#closescreen").show();
	$("#openscreen").hide();
 } else {
  console.log('退出全屏')
 	 $("#closescreen").hide();
	$("#openscreen").show();
 }
});
document.addEventListener("msfullscreenchange", function (event) {
  console.log("msfullscreenchange", event);
    if (IsFull()) {
  	console.log('进入全屏')
  	$("#closescreen").show();
	$("#openscreen").hide();
 } else {
  console.log('退出全屏')
 	 $("#closescreen").hide();
	$("#openscreen").show();
 }
});
   			function clickScreen(){
   			var ele = document.getElementById("bodyhtml");   //bodyhtml:是body标签的id
   			//$("#signprogress").css("width","100%").css("padding-left","30px").css("padding-right","30px");
   			//$("#screens").css("width","70%");
   			//$("#choosev").css("right","10%");
   			//$("#choosevideo").css("right","7%").css("bottom","10%").css("top","0%").css("left","0%"); 
   			requestFullScreen(ele);
   			$("#openscreen").hide();
   			$("#closescreen").show();
   		}
   		
   		function closeScreen(){
   			//$("#signprogress").css("width","49.5%").css("padding-left","5px").css("padding-right","5px");
			//$("#screens").css("width","55%");
			//$("#choosev").css("right","38%");
			//$("#choosevideo").css("right","0%").css("bottom","0%").css("top","50%").css("left","54%");; 
			exitFull(); 
   			$("#closescreen").hide();
   			$("#openscreen").show();
   		}
   		
   </script>

效果