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

时间：2017-06-22 23:11:14

标签： javascript html css html5 video

我正在使用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; }

我无论如何都不是程序员，而且我已经挣扎了很多只是为了通过很多＆＃34;借用＆＃34;码。

我想要做的是将上面的值设置为2147483646，然后在每个视频的全屏按钮的事件监听器上，该视频上自定义控件的z-index在全屏上增加1并减少1全屏退出时。简而言之，当1个视频全屏时我不想看到除了那个视频及其自定义控件之外的任何内容。 我甚至不确定这是不是应该＆＃34;应该＆＃34;已经完成但是我希望完成这个项目，因为我只有有限的时间来处理它，这是最后一件不起作用的事情。请在此处查看完整的代码，并提前感谢您：`

 <!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>

`

1 个答案:

答案 0 :(得分：0)

我真的很讨厌这里有大量的重复代码......不过这是你需要做的。您确定的.vidBar类是问题所在。它们的z指数始终高于其他所有指数。在全屏打开视频之前，您还没有注意到它。你想要做的是onl将高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

祝你好运。

相关问题
最新问题