视频全屏时增加自定义控件的 z-index

【问题标题】：Increase z-index on custom controls when video is fullscreen视频全屏时增加自定义控件的 z-index
【发布时间】：2017-11-26 09:35:22
【问题描述】：

我正在使用 javascript、CSS 和 HTML 编写触摸屏视频亭编码。由于 zer00ne 的帖子，我有一些运行良好的代码。我在页面上有 4 个视频，带有用于播放和全屏的自定义控件。当我全屏播放视频时，我仍然可以看到它后面所有其他视频的自定义控件。我不知道为什么，但我可以看到这些值可能与它有关：

 video::-webkit-media-controls-enclosure { display:none !important; }
.vidBar1 { z-index: 2147483647; }
.vidBar2 { z-index: 2147483647; }
.vidBar3 { z-index: 2147483647; }
.vidBar4 { z-index: 2147483647; }

无论如何，我都不是程序员，我已经通过大量“借来的”代码来实现这一目标。

我想要做的是将上述值设置为 2147483646，然后在每个视频的全屏按钮的事件侦听器上，使该视频上自定义控件的 z-index 在全屏时增加 1 并减少 1当全屏退出时。简而言之，当 1 个视频全屏显示时，除了该视频及其自定义控件之外，我什么都不想看到。 我什至不确定这是否“应该”完成，但我想完成这个项目，因为我剩下的时间有限，这是最后一件不起作用的事情。请在此处查看整个代码，并提前非常感谢您：` 

 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PowerHouse-VideoKiosk</title>
<style>
.vidFrame1 { position: absolute; top: 10%; width: 640px; height: auto; min-height: 180px; outline: 1px dashed red; }
.vidFrame2 { position: absolute; top: 10%; left: 50%; width: 640px; height: auto; min-height: 180px; outline: 1px dashed red; }
.vidFrame3 { position: absolute; top: 50%; left: 50%; width: 640px; height: auto; min-height: 180px; outline: 1px dashed red; }
.vidFrame4 { position: absolute; top: 50%; width: 640px; height: auto; min-height: 180px; outline: 1px dashed red; }

.vidBar1 { position: absolute; bottom: 0; right: 0; left: 0; height: 40px; width: 99%; z-index: 2;}
.vidBar2 { position: absolute; bottom: 0; right: 0; left: 0; height: 40px; width: 99%; z-index: 2;}
.vidBar3 { position: absolute; bottom: 0; right: 0; left: 0; height: 40px; width: 99%; z-index: 2;}
.vidBar4 { position: absolute; bottom: 0; right: 0; left: 0; height: 40px; width: 99%; z-index: 2;}

#fullScreen1 { position: absolute; bottom: 0; right: 0; width: 36px; height: 36px; outline: none; border: 1px solid transparent; border-radius: 6px; display: block; cursor: pointer; z-index: 3;}
#fullScreen2 { position: absolute; bottom: 0; right: 0; width: 36px; height: 36px; outline: none; border: 1px solid transparent; border-radius: 6px; display: block; cursor: pointer; z-index: 3;}
#fullScreen3 { position: absolute; bottom: 0; right: 0; width: 36px; height: 36px; outline: none; border: 1px solid transparent; border-radius: 6px; display: block; cursor: pointer; z-index: 3;}
#fullScreen4 { position: absolute; bottom: 0; right: 0; width: 36px; height: 36px; outline: none; border: 1px solid transparent; border-radius: 6px; display: block; cursor: pointer; z-index: 3;}

#fullScreen1:hover { border: 1px groove #0ef; }
#fullScreen2:hover { border: 1px groove #0ef; }
#fullScreen3:hover { border: 1px groove #0ef; }
#fullScreen4:hover { border: 1px groove #0ef; }

.on1, .off1 { background: url('https://glpro.s3.amazonaws.com/lib/bx/toggle.png') no-repeat; width: 36px; height: 36px; }
.on2, .off2 { background: url('https://glpro.s3.amazonaws.com/lib/bx/toggle.png') no-repeat; width: 36px; height: 36px; }
.on3, .off3 { background: url('https://glpro.s3.amazonaws.com/lib/bx/toggle.png') no-repeat; width: 36px; height: 36px; }
.on4, .off4 { background: url('https://glpro.s3.amazonaws.com/lib/bx/toggle.png') no-repeat; width: 36px; height: 36px; }

.off1 { background-position: 0 0 }
.off2 { background-position: 0 0 }
.off3 { background-position: 0 0 }
.off4 { background-position: 0 0 }

.on1 { background-position: -1px -50px }
.on2 { background-position: -1px -50px }
.on3 { background-position: -1px -50px }
.on4 { background-position: -1px -50px }

#playPause1 { position: absolute; bottom: 0; left: 0; width: 36px; height: 36px; background: none; font-size: 36px; color: #0ff; line-height: 1; border: 1px solid transparent; display: block; cursor: pointer; outline: none; z-index: 3;}
#playPause2 { position: absolute; bottom: 0; left: 0; width: 36px; height: 36px; background: none; font-size: 36px; color: #0ff; line-height: 1; border: 1px solid transparent; display: block; cursor: pointer; outline: none; z-index: 3;}
#playPause3 { position: absolute; bottom: 0; left: 0; width: 36px; height: 36px; background: none; font-size: 36px; color: #0ff; line-height: 1; border: 1px solid transparent; display: block; cursor: pointer; outline: none; z-index: 3;}
#playPause4 { position: absolute; bottom: 0; left: 0; width: 36px; height: 36px; background: none; font-size: 36px; color: #0ff; line-height: 1; border: 1px solid transparent; display: block; cursor: pointer; outline: none; z-index: 3;}

#playPause1.play1:before { content: '\25b6'; }
#playPause1.pause1:before { content: '\275a\275a'; }
#playPause2.play2:before { content: '\25b6'; }
#playPause2.pause2:before { content: '\275a\275a'; }
#playPause3.play3:before { content: '\25b6'; }
#playPause3.pause3:before { content: '\275a\275a'; }
#playPause4.play4:before { content: '\25b6'; }
#playPause4.pause4:before { content: '\275a\275a'; }

.vid1 { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: auto; display: block; z-index: 1; outline: 1px dotted blue; }
.vid2 { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: auto; display: block; z-index: 1; outline: 1px dotted blue; }
.vid3 { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: auto; display: block; z-index: 1; outline: 1px dotted blue; }
.vid4 { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: auto; display: block; z-index: 1; outline: 1px dotted blue; }
/* 
Fullscreen Pseudo-class: 
https://developer.mozilla.org/en-US/docs/Web/CSS/:fullscreen 
*/
.vidBar1:-moz-full-screen { position: fixed; }
.vidBar1:-webkit-full-screen { position: fixed; }
.vidBar1:-ms-fullscreen { position: fixed; }
.vidBar1:fullscreen { position: fixed; }
.vidBar2:-moz-full-screen { position: fixed; }
.vidBar2:-webkit-full-screen { position: fixed; }
.vidBar2:-ms-fullscreen { position: fixed; }
.vidBar2:fullscreen { position: fixed; }
.vidBar3:-moz-full-screen { position: fixed; }
.vidBar3:-webkit-full-screen { position: fixed; }
.vidBar3:-ms-fullscreen { position: fixed; }
.vidBar3:fullscreen { position: fixed; }
.vidBar4:-moz-full-screen { position: fixed; }
.vidBar4:-webkit-full-screen { position: fixed; }
.vidBar4:-ms-fullscreen { position: fixed; }
.vidBar4:fullscreen { position: fixed; }
/* 
Special Shadow DOM Settings to Override Default Controls: 
https://css-tricks.com/custom-controls-in-html5-video-full-screen/ 
*/
video::-webkit-media-controls-enclosure { display:none !important; }
.vidBar1 { z-index: 2147483647; }
.vidBar2 { z-index: 2147483647; }
.vidBar3 { z-index: 2147483647; }
.vidBar4 { z-index: 2147483647; }
</style>
</head>

<body>
<figure class="vidFrame1">
  <video id="vid1" class="vid1" autoplay muted loop src="Bill_Nye_the_Science_Guy_S01E18_Electricity.mp4"></video>
  <figcaption class="vidBar1">
    <button id='playPause1' class="play1" title="Play/Pause Video"></button>
    <button id='fullScreen1' class="on1" title="Enter/Exit Full Screen"></button>
  </figcaption>
</figure>
<figure class="vidFrame2">
  <video id="vid2" class="vid2" autoplay muted loop src="Tesla'sWardenclyffeTowerandLab(3D Model).mp4"></video>
  <figcaption class="vidBar2">
    <button id='playPause2' class="play2" title="Play/Pause Video"></button>
    <button id='fullScreen2' class="on2" title="Enter/Exit Full Screen"></button>
  </figcaption>
</figure>
</figure>
<figure class="vidFrame3">
  <video id="vid3" class="vid3" autoplay muted loop src="IntroductiontoElectricity.mp4"></video>
  <figcaption class="vidBar3">
    <button id='playPause3' class="play3" title="Play/Pause Video"></button>
    <button id='fullScreen3' class="on3" title="Enter/Exit Full Screen"></button>
  </figcaption>
</figure>
<figure class="vidFrame4">
  <video id="vid4" class="vid4" autoplay muted loop src="FirstElectricBulbsbyThomasEdison.mp4"></video>
  <figcaption class="vidBar4">
    <button id='playPause4' class="play4" title="Play/Pause Video"></button>
    <button id='fullScreen4' class="on4" title="Enter/Exit Full Screen"></button>
  </figcaption>
</figure>
<script>

/* 
Toggle Button with classList: 
https://developer.mozilla.org/en-US/docs/Web/API/Element/classList 
*/
var fullBtn1 = document.getElementById('fullScreen1');
var playBtn1 = document.getElementById('playPause1');
var fullBtn2 = document.getElementById('fullScreen2');
var playBtn2 = document.getElementById('playPause2');
var fullBtn3 = document.getElementById('fullScreen3');
var playBtn3 = document.getElementById('playPause3');
var fullBtn4 = document.getElementById('fullScreen4');
var playBtn4 = document.getElementById('playPause4');

playBtn1.addEventListener('click', function(event) {
  var player1 = document.getElementById('vid1');

  if(player1.paused) {
    playBtn1.classList.remove('play1');
    playBtn1.classList.add('pause1');
    player1.play();
  } else {
    playBtn1.classList.add('play1');
    playBtn1.classList.remove('pause1');
    player1.pause();
  }
}, false);
playBtn2.addEventListener('click', function(event) {
  var player2 = document.getElementById('vid2');

  if(player2.paused) {
    playBtn2.classList.remove('play2');
    playBtn2.classList.add('pause2');
    player2.play();
  } else {
    playBtn2.classList.add('play2');
    playBtn2.classList.remove('pause2');
    player2.pause();
  }
}, false);
playBtn3.addEventListener('click', function(event) {
  var player3 = document.getElementById('vid3');

  if(player3.paused) {
    playBtn3.classList.remove('play3');
    playBtn3.classList.add('pause3');
    player3.play();
  } else {
    playBtn3.classList.add('play3');
    playBtn3.classList.remove('pause3');
    player3.pause();
  }
}, false);
playBtn4.addEventListener('click', function(event) {
  var player4 = document.getElementById('vid4');

  if(player4.paused) {
    playBtn4.classList.remove('play4');
    playBtn4.classList.add('pause4');
    player4.play();
  } else {
    playBtn4.classList.add('play4');
    playBtn4.classList.remove('pause4');
    player4.pause();
  }
}, false);

fullBtn1.addEventListener('click', function(event) {
  var tgtEle1 = document.querySelector('.vid1');
  var  onOrOff1 = fullBtn1.classList.contains('on1');

  if (onOrOff1) {
    enterFS(tgtEle1);
    fullBtn1.classList.remove('on1');
    fullBtn1.classList.add('off1');
    vid1.muted = false;
    vid1.currentTime = 0;
  } else {
    exitFS();
    fullBtn1.classList.add('on1');
    fullBtn1.classList.remove('off1');
    vid1.muted = true;
    vid1.currentTime = 0;
  }
}, false);
fullBtn2.addEventListener('click', function(event) {
  var tgtEle2 = document.querySelector('.vid2');
  var  onOrOff2 = fullBtn2.classList.contains('on2');

  if (onOrOff2) {
    enterFS(tgtEle2);
    fullBtn2.classList.remove('on2');
    fullBtn2.classList.add('off2');
    vid2.muted = false;
    vid2.currentTime = 0
  } else {
    exitFS();
    fullBtn2.classList.add('on2');
    fullBtn2.classList.remove('off2');
    vid2.muted = true;
    vid2.currentTime = 0
  }
}, false);
fullBtn3.addEventListener('click', function(event) {
  var tgtEle3 = document.querySelector('.vid3');
  var  onOrOff3 = fullBtn3.classList.contains('on3');

  if (onOrOff3) {
    enterFS(tgtEle3);
    fullBtn3.classList.remove('on3');
    fullBtn3.classList.add('off3');
    vid3.muted = false;
    vid3.currentTime = 0
  } else {
    exitFS();
    fullBtn3.classList.add('on3');
    fullBtn3.classList.remove('off3');
    vid3.muted = true;
    vid3.currentTime = 0
  }
}, false);
fullBtn4.addEventListener('click', function(event) {
  var tgtEle4 = document.querySelector('.vid4');
  var  onOrOff4 = fullBtn4.classList.contains('on4');

  if (onOrOff4) {
    enterFS(tgtEle4);
    fullBtn4.classList.remove('on4');
    fullBtn4.classList.add('off4');
    vid4.muted = false;
    vid4.currentTime = 0
  } else {
    exitFS();
    fullBtn4.classList.add('on4');
    fullBtn4.classList.remove('off4');
    vid4.muted = true;
    vid4.currentTime = 0
  }
}, false);
/*
Fullscreen API:
https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API
*/
function enterFS(element) {
  if (element.requestFullscreen) {
    element.requestFullscreen();
  } else if (element.msRequestFullscreen) {
    element.msRequestFullscreen();
  } else if (element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  } else if (element.webkitRequestFullscreen) {
    element.webkitRequestFullscreen();
        }
}

function exitFS() {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    }
}
</script>
</body>
</html>

`

【问题讨论】：

  • 您应该真正考虑使用 javascript 动态生成视频播放器。您现在的代码非常复杂，如果您使用 javascript 生成播放器，它将非常简短和干净。不是一个真正的答案，但它会让你的代码更容易更新:)
  • 是的，我敢肯定，不幸的是，在我不能再从事这个项目之前，我认为我没有时间这样做。代码不需要更新，它将在其生命周期内按原样运行。我知道它一团糟，随着我继续学习如何实际编码，我计划做你提到的事情。但就像我说的那样，我只有有限的时间来解决这个问题。

标签： javascript css html video


【解决方案1】：

我真的很讨厌这里有大量重复的代码......不过这就是你需要做的。您确定的 .vidBar 类是问题所在。它们的 z-index 总是比其他所有东西高得多。在全屏打开视频之前，您不会注意到它。您要做的只是将高 z-index 应用于打开的视频。所以要做到这一点，我们需要切换一个新类，当它被打开/关闭时，它会被添加然后移除。

.vidBar1.open { z-index: 2147483647; }
.vidBar2.open { z-index: 2147483647; }
.vidBar3.open { z-index: 2147483647; }
.vidBar4.open { z-index: 2147483647; }

在你的 JS 中这样做：

  if (onOrOff1) {
    enterFS(tgtEle1);
    fullBtn1.classList.remove('on1');
    fullBtn1.classList.add('off1');
    fullBtn1.parentElement.classList.add('open');
    vid1.muted = false;
    vid1.currentTime = 0;
  } else {
    exitFS();
    fullBtn1.classList.add('on1');
    fullBtn1.classList.remove('off1');
    fullBtn1.parentElement.classList.remove('open');
    vid1.muted = true;
    vid1.currentTime = 0;
  }

注意，这是新的部分：

fullBtn1.parentElement.classList.add('open');
...
fullBtn1.parentElement.classList.remove('open');

对所有四个都这样做，确保在更新每个类时更新类名。

所以高 z-index 类的目标是视频字幕，它是全屏按钮的父元素。

https://codepen.io/partypete25/pen/gRxPYo?editors=0110

祝你好运。

【讨论】：

  • 效果很好，非常感谢您容忍我的蹩脚代码！我刚刚替换了 .vidBar1 { z-index: 2147483647; } .vidBar2 { z-index: 2147483647; } .vidBar3 { z-index: 2147483647; } .vidBar4 { z-index: 2147483647; } 使用您的代码 .vidBar1.open { z-index: 2147483647; } .vidBar2.open { z-index: 2147483647; } .vidBar3.open { z-index: 2147483647; } .vidBar4.open { z-index: 2147483647;并在 JS 中添加 fullBtnX.parentElement.classList.add('open');和 fullBtnX.parentElement.classList.remove('open');问题已得到妥善解决！！！！再次感谢
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2014-07-16
  • 1970-01-01
  • 2012-04-24
  • 1970-01-01
  • 2019-01-21
  • 1970-01-01
  • 2016-11-03
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode