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>
效果