时间戳

首页 > 解决方案 > 当视频元素全屏时，自定义控件会被阻止为全屏视频

javascript - 当视频元素全屏时，自定义控件会被阻止为全屏视频

问题描述

好的，我有一个带有自定义控件的视频元素，但是我不知道为什么当我通过双击使视频全屏时，我制作的自定义控件被挡在了视频后面，我给了视频 z-index还有控制，但控制面板总是在全屏视频后面，这就是代码。

"use strict"
const videoEvents = ['click', 'dblclick', 'mouseenter', 'mousedown', 'mousemove', 'change'];
const videoEventDistributer = document.querySelector('.videoPlayerContainer');
const mainVideo = document.querySelector('.mainVideo');
const videoPlayerControlerContainer = document.querySelector('.videoPlayerControlerContainer');
const btnFullscreen = document.querySelector('.btnFullscreen');
const btnExitFullscreen = document.querySelector('.btnExitFullscreen');
let turnOnController = false;
const fullscreenManager = () => {
  if (document.fullscreenElement !== mainVideo) {
    mainVideo.requestFullscreen();
    btnFullscreen.classList.remove('active');
    btnExitFullscreen.classList.add('active');
    videoEventDistributer.style.setProperty('width', '100vw');
    videoEventDistributer.style.setProperty('height', '100vh');
    videoPlayerControlerContainer.style.setProperty('top', 'calc(100vh - 40px)');
  }
  if (document.fullscreenElement === mainVideo) {
    document.exitFullscreen();
    btnExitFullscreen.classList.remove('active');
    btnFullscreen.classList.add('active');
    videoEventDistributer.style.setProperty('width', '80vh');
    videoEventDistributer.style.setProperty('height', 'calc(45vh + 40px)');
    videoPlayerControlerContainer.style.setProperty('top', '45vh');

  }
}

//
videoEvents.forEach(videoEvent => {

  videoEventDistributer.addEventListener(videoEvent, event => {

    if (event.type === 'click') {

      if (event.target === mainVideo) {
        if (mainVideo.paused) {
          mainVideo.play();
        } else {
          mainVideo.pause();
        }

      }

    }

    if (event.type === 'dblclick') {
      fullscreenManager();

    }


    if (event.type === 'mouseeneter') {


    }

    if (event.type === 'mousemove') {


    }

    if (event.type === 'mousedown') {

    }

    if (event.type === 'change') {

    }



  });
});
body {
  background: steelblue;
}

.videoPlayerContainer {
  position: fixed;
  width: 80vh;
  height: calc(45vh + 40px);
  background: red;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.mainVideo {
  width: 100%;
  height: calc(100% - 40px);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 50;
}

.videoPlayerControlerContainer {
  height: 40px;
  width: 100%;
  background: green;
  transform: translateY(0);
  position: absolute;
  top: 45vh;
  left: 0;
  z-index: 100;
  transition: transform .3s;
  display: grid;
  place-items: center;
  gap: 25px;
  grid-template-columns: 10% 50% 20% 1fr;
}

.videoPlayerControlerContainer.active {
  transform: translateY(-100%);
  transition: transform .3s;
}

.btnPause,
.btnPlay {
  height: 25px;
  width: auto;
  display: none;
}

.btnPause.active,
.btnPlay.active {
  display: block;
}

.progressBar {
  width: 100%;
}

.audioBar {
  width: 80%;
}

.btnFullscreen,
.btnExitFullscreen {
  height: 25px;
  width: auto;
  display: none;
}

.btnFullscreen.active,
.btnExitFullscreen.active {
  display: block;
}
<body>
  <div class="videoPlayerContainer">
    <video class="mainVideo" src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4"></video>
    <div class="videoPlayerControlerContainer">
      <img src="pause.svg" alt="" class="btnPause active">
      <img src="play.svg" alt="" class="btnPlay">
      <input class="progressBar" type="range" name="" id="">
      <input class="audioBar" type="range" name="" id="">
      <img class="btnFullscreen active" src="goFullScreen.svg" alt="">
      <img class="btnExitFullscreen" src="exitFullScreen.svg" alt="">
    </div>
  </div>
</body>

我希望能够将我的控制器放在全屏视频的前面，目前当视频全屏时它可以很好地调整大小但它在视频后面，期待您的提示和评论！

标签： javascriptcss

解决方案

您可以查看这篇文章Hiding Native HTML5 Video Controls in Full-Screen Mode。在这篇文章中，他们清楚地讨论了这个问题。您可以使用此代码全屏隐藏本机控件 

video::-webkit-media-controls { display:none !important; }

我使用您的代码，但不幸的是无法显示您的自定义控件。也许你能找到一些东西

推荐阅读