【前端】视频video标签 全屏功能

不同浏览器要不同的前缀 坑的一匹

//这个函数 就是绑定了按钮的函数
var fullScreenHandler=function(){
	if (isElementFullScreen()){
		exitFullscreen();	 
	}
	else{
		FullScreen();
	}
};
//进入全屏
function FullScreen() {
    var ele = video_class; // 注意 这里要填一个容器 就是你要让他全屏的容器
    if (ele.requestFullscreen) {
        ele.requestFullscreen();
    } else if (ele.mozRequestFullScreen) {
        ele.mozRequestFullScreen();
    } else if (ele.webkitRequestFullScreen) {
        ele.webkitRequestFullScreen();
    }
}
//退出全屏
function exitFullscreen() {
    var de = document; //这里写doc元素 这里不能填刚刚那个全屏的容器
    if (de.exitFullscreen) {
        de.exitFullscreen();
    } else if (de.mozCancelFullScreen) {
        de.mozCancelFullScreen();
    } else if (de.webkitCancelFullScreen) {
        de.webkitCancelFullScreen();
    }
}

function isElementFullScreen() {
  var fullscreenElement =
    document.fullscreenElement ||
    document.msFullscreenElement ||
    document.mozFullScreenElement ||
    document.webkitFullscreenElement; 
//如果没有全屏元素在的话 上面表达式是一个空  
  if (fullscreenElement === null) {
    return false; // 当前没有元素在全屏状态
  } 
  else {
    return true; // 有元素在全屏状态
  }
}