Fatal编程技术网
  • javascript/
  • Javascript 当视频全屏显示时，增加自定义控件上的z索引

Javascript 当视频全屏显示时，增加自定义控件上的z索引

javascript css html video

Javascript 当视频全屏显示时，增加自定义控件上的z索引,javascript,css,html,video,Javascript,Css,Html,Video,我正在用javascript、CSS和HTML编写一个触摸屏视频亭。由于zer00ne的一篇文章，我有一些代码运行得非常好。我在页面上有4个视频，带有用于播放和全屏的自定义控件。当我全屏显示一个视频时，我仍然可以看到它后面其他视频的自定义控件。我不知道为什么，但我可以看出这些值可能与此有关： video::-webkit-media-controls-enclosure { display:none !important; } .vidBar1 { z-index: 2147483647; }

我正在用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索引在全屏上增加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>


电视亭
.vidFrame1{位置：绝对；顶部：10%；宽度：640px；高度：自动；最小高度：180px；轮廓：1px红色虚线；}
.vidFrame2{位置：绝对；顶部：10%；左侧：50%；宽度：640px；高度：自动；最小高度：180px；轮廓：1px红色虚线；}
.vidFrame3{位置：绝对；顶部：50%；左侧：50%；宽度：640px；高度：自动；最小高度：180px；轮廓：1px红色虚线；}
.vidFrame4{位置：绝对；顶部：50%；宽度：640px；高度：自动；最小高度：180px；轮廓：1px红色虚线；}
.vidBar1{位置：绝对；底部：0；右侧：0；左侧：0；高度：40px；宽度：99%；z索引：2；}
.vidBar2{位置：绝对；底部：0；右侧：0；左侧：0；高度：40px；宽度：99%；z索引：2；}
.vidBar3{位置：绝对；底部：0；右侧：0；左侧：0；高度：40px；宽度：99%；z索引：2；}
.vidBar4{位置：绝对；底部：0；右侧：0；左侧：0；高度：40px；宽度：99%；z索引：2；}
#全屏1{位置：绝对；底部：0；右侧：0；宽度：36px；高度：36px；轮廓：无；边框：1px实心透明；边框半径：6px；显示：块；光标：指针；z索引：3；}
#全屏2{位置：绝对；底部：0；右侧：0；宽度：36px；高度：36px；轮廓：无；边框：1px实心透明；边框半径：6px；显示：块；光标：指针；z索引：3；}
#全屏3{位置：绝对；底部：0；右侧：0；宽度：36px；高度：36px；轮廓：无；边框：1px实心透明；边框半径：6px；显示：块；光标：指针；z索引：3；}
#全屏4{位置：绝对；底部：0；右侧：0；宽度：36px；高度：36px；轮廓：无；边框：1px实心透明；边框半径：6px；显示：块；光标：指针；z索引：3；}
#全屏1：悬停{边框：1px凹槽#0ef；}
#全屏2：悬停{边框：1px凹槽#0ef；}
#全屏3：悬停{边框：1px凹槽#0ef；}
#全屏4：悬停{边框：1px凹槽#0ef；}
.on1、.off1{背景：url（'https://glpro.s3.amazonaws.com/lib/bx/toggle.png“）不重复；宽度：36px；高度：36px；}
.on2、.off2{背景：url（'https://glpro.s3.amazonaws.com/lib/bx/toggle.png“）不重复；宽度：36px；高度：36px；}
.on3、.off3{背景：url（'https://glpro.s3.amazonaws.com/lib/bx/toggle.png“）不重复；宽度：36px；高度：36px；}
.on4、.off4{背景：url（'https://glpro.s3.amazonaws.com/lib/bx/toggle.png“）不重复；宽度：36px；高度：36px；}
.off1{背景位置：0}
.off2{背景位置：0}
.off3{背景位置：0}
.off4{背景位置：0}
.on1{背景位置：-1px-50px}
.on2{背景位置：-1px-50px}
.on3{背景位置：-1px-50px}
.on4{背景位置：-1px-50px}
#playPause1{位置：绝对；底部：0；左侧：0；宽度：36px；高度：36px；背景：无；字体大小：36px；颜色：#0ff；线条高度：1；边框：1px实心透明；显示：块；光标：指针；轮廓：无；z索引：3；}
#playPause2{位置：绝对；底部：0；左侧：0；宽度：36px；高度：36px；背景：无；字体大小：36px；颜色：#0ff；线条高度：1；边框：1px实心透明；显示：块；光标：指针；轮廓：无；z索引：3；}
#playPause3{位置：绝对；底部：0；左侧：0；宽度：36px；高度：36px；背景：无；字体大小：36px；颜色：0ff；线条高度：1；边框：1px实心透明；显示：块；光标：指针；轮廓：无；z索引：3；}
#playPause4{位置：绝对；底部：0；左侧：0；宽度：36px；高度：36px；背景：无；字体大小：36px；颜色：#0ff；线条高度：1；边框：1px实心透明；显示：块；光标：指针；轮廓：无；z索引：3；}
#playPause1.play1:在{content:'\25b6'；}之前
#playPause1.pause1:在{content:'\275a\275a'；}之前
#playPause2.play2:在{content:'\25b6'；}之前
#pause2.pause2:在{content:'\275a\275a'；}之前
#playPause3.play3:在{content:'\25b6'；}之前
#pause3.pause3:在{content:'\275a\275a'；}之前
#playPause4.play4:在{content:'\25b6'；}之前
#pause4.pause4:在{content:'\275a\275a'；}之前
.vid1{位置：绝对；顶部：0；左侧：0；右侧：0；底部：0；宽度：100%；高度：自动；显示：块；z索引：1；轮廓：1px点蓝色；}
.vid2{位置：绝对；顶部：0；左侧：0；右侧：0；底部：0；宽度：100%；高度：自动；显示：块；z索引：1；轮廓：1px点蓝色；}
.vid3{位置：绝对；顶部：0；左侧：0；右侧：0；底部：0；宽度：100%；高度：自动；显示：块；z索引：1；轮廓：1px点蓝色；}
.vid4{位置：绝对；顶部：0；左侧：0；右侧：0；底部：0；宽度：100%；高度：自动；显示：块；z索引：1；轮廓：1px点蓝色；}
/* 
全屏伪类：
https://developer.mozilla.org/en-US/docs/Web/CSS/:fullscreen 
*/
.vidBar1:-moz全屏{位置：固定；}
.vidBar1:-w

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



  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');