video标签全屏后所以标签都无法在其之上显示了,无论z-index设置成多大。
视频全屏实际上是浏览器对video标签的全屏展示,全屏后video标签处于windows窗口前面,别说dom元素了,甚至可能凌驾于桌面应用程序之上。
我们可以将video上一级的标签全屏,即可显示与video同级的div标签啦~
直接上代码
<!DOCTYPE html>
<html>
<head>
<title>video</title>
<meta charset="utf-8">
</head>
<style type="text/css">
#my-div{
background: rgba(50,50,50,0.8);
position: absolute;
float: left;
left: 50%;
top: 50%;
width: 100px;
height: 100px;
}
</style>
<body>
<div id="player">
<div id="my-div">我的DIV</div>
<video controls autoplay id="video" src="https://qn2.tangguocode.com/cc2d71e870524a8d9322becdb103f312"></video>
</div>
<button onclick="full()">全屏</button>
<script>
function getreqfullscreen (root) {
var root = document.documentElement
return root.requestFullscreen || root.webkitRequestFullscreen || root.mozRequestFullScreen || root.msRequestFullscreen
}
var fullscreen = getreqfullscreen();
function full() {
fullscreen.call(document.getElementById("player"));
}
</script>
</body>
</html>
1 条评论