video标签视频全屏时显示自己的div

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 条评论

[/0o0] [..^v^..] [0_0] [T.T] [=3-❤] [❤.❤] [^v^] [-.0] [!- -] [=x=] [→_→] [><] 更多 »
昵称
  1. Google Chrome 67 Google Chrome 67 Windows 7 Windows 7

    [0_0]