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>

效果

js实现页面视频全屏播放相关推荐

html5仿抖音全屏播放,仿抖音视频全屏播放滑动切换
1 前言随着移动技术的快速迭代,数据流量费用的快速下降,视频.直播正成为全民的媒体盛宴,我司必然也不会缺席此次盛宴,这里讲述的是通过h5实现仿抖音视频全屏播放&滑动切换的效果,供我司直播鉴定 ...
手机移动端视频全屏播放（兼容Android与iOS）
在做移动端项目时,做个视频播放是不可避免的,大部分情况下都是点击一个按钮,视频全屏播放,下面将对这个情况进行分析与记录. html: <video height="100%" ...
IOS 解决视频全屏播放问题
解决ios视频全屏播放,让ios视频行内播放问题在ios视频播放之后会默认跳出行内进行全屏播放,如果想让它行内播放怎么做呢?很简单,通过一行标签就可以解决了 <video src=" ...
如何禁止视频在手机移动端页面中全屏播放
最近公司的项目中出了需要在局部播放视频的需求,我们都知道HTML5中有一个专门的标签video用来嵌入视频.不过,这个video标签有很多的属性可能很多同学并不是很熟悉,下面我们来认识一下: 在网页里 ...
移动端页面中阻止视频全屏播放
最近公司的项目中出了需要在局部播放视频的需求,我们都知道HTML5中有一个专门的标签video用来嵌入视频.不过,这个video标签有很多的属性可能很多同学并不是很熟悉,下面我们来认识一下: 在网页里 ...
uniapp开发公众号视频全屏播放退出以后层级过高
uniapp开发微信公众号视频播放 **问题描述:** 在使用uniapp自带的原生视频标签,遇到点击视频播放以后.在点另外的一个弹出层,发现弹出层被video标签覆盖. ![有时候官网给的tips没 ...
【制作ppt的软件】Focusky教程 | 视频全屏播放
(Focusky动画演示大师简称为"FS软件")首先,要使路径比例跟电脑的显示屏比例一致,才能保证帧里的内容能够全屏播放. 故在设计内容前,可根据电脑显示屏的比例来选择合适的显示比 ...
HTML视频全屏播放背景
全屏的视频播放用作背景.  <!DOCTYPE html> <html> <head><meta charse ...
js设置背景视频全屏显示
原理很简单,获取浏览器窗口尺寸对video标签进行设置,下边代码为react项目中视频背景, window.onresize = () => {const windowWidth = docum ...
微信小程序——video视频全屏播放
object-fit 属性 <video src="../demo.mp4" object-fit="cover"></video>

js实现页面视频全屏播放

js实现页面视频全屏播放

js实现页面视频全屏播放相关推荐

最新文章

热门文章