Делаю видеоплеер и в полноэкранном режиме почему-то не видит div с моими контролами?

Question

[wolfach]

Всем привет! Делаю свой плеер и вот такая темка, что мой див с controls при включении полноэкранного режима отсутствует и я вот не могу понять почему. Буду рад, если кто поможет разобраться. Предоставляю код ниже:

<div id="vplayer" class="videoplayer">

      <video id="video"><source src="{{asset($videos[0]->video)}}" type="video/mp4"></video>
      <div id="play-screen" class="play-screen"><img src="/images/ScreenPlay.svg" alt=""></div>

    <div id="videoControls" class="videoplayer__controls">
      <button class="vp-play" style="margin-left: 20px;">
        <img id="vp-play-img" src="/images/vplay2.svg" style="" alt="">
      </button>
      <button class="vp-skip" style="margin-left: 20px;">
        <img src="/images/vskip.svg" style="" alt="">
      </button>
      <button class="vp-volume" style="margin-left: 20px;">
        <img src="/images/vvolume.svg" alt="">
      </button>
      <input style="margin-left: 10px;" class="volumeRange" min="0" max="100" value="100" type="range" id="volumeRange">
      <button class="vp-fullscreen" style="margin-left: 860px; position: absolute;">
        <img id="vp-fullscreen-img" src="/images/fullscreen.svg" alt="">
      </button>
    </div>
  </div>

.videoplayer__controls{
      visibility: hidden;
      position: absolute;
      width: 900px;
      display: flex;
      align-items: center;
      background-color: #3f2264;
      margin-top: 460px;
      border-bottom-left-radius: 3px;
      border-bottom-right-radius: 3px;
      height: 45px;
    }
    .videoplayer{
      width: 900px;
      height: 500px;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 10px;
    }
    .videoplayer video{
      border-radius: 10px;
      background-color: #5a318d;
      width: 900px;
      height: 500px;
    }
    .videoplayer__controls button{
      border: 0px;
    }
    input[type=range]{
      -webkit-appearance: none;
      height: 3px;
      background: linear-gradient(to right, #9776BF 0%, #9776BF 100%);
    }
    input[type=range]::-webkit-slider-thumb{
      -webkit-appearance: none;
      background: #9776BF;
      background-color: #9776BF;
      color: #9776BF;
      width: 10px;
      height: 10px;
      cursor: pointer;
      border-radius: 20px;
    }

    input[type=range]::-moz-range-thumb{
      -webkit-appearance: none;
      background: #9776BF;
      background-color: #9776BF;
      color: #9776BF;
    }

    input[type=range]::-ms-thumb{
      -webkit-appearance: none;
      background: #9776BF;
      background-color: #9776BF;
      color: #9776BF;
    }
    .vp-volume:hover +.volumeRange, .volumeRange:hover{
      visibility: visible;
    }
    .volumeRange{
      visibility: hidden;
    }
    .play-screen{
      position: absolute;
      cursor: pointer;
    }
    video::-webkit-media-controls {
      display:none;
    }

var volumeRange = document.getElementById("volumeRange");

volumeRange.oninput = function() {
    var value = (volumeRange.value - volumeRange.min) / (volumeRange.max - volumeRange.min) * 100;
    volumeRange.style.background = 'linear-gradient(to right, #9776BF 0%, #9776BF ' + value + '%, #ffffff ' + value + '%, #ffffff 100%)';
};

const slider = document.getElementById('volumeRange');
const video = document.getElementById('video');

slider.addEventListener('input', function() {
  video.volume = slider.value / 100;
});

document.addEventListener('DOMContentLoaded', function() {
            var playIcon = document.getElementById('play-screen');
            var video = document.getElementById('video');
            var videoControls = document.getElementById("videoControls");

            playIcon.addEventListener('click', function() {
              if (video.paused) {
                video.style.display = 'block';
                playIcon.style.display = 'none';
                videoControls.style.visibility = "visible";
                video.play();
              }
            });
        });

var playButton = document.getElementById('vp-play-img');

function playPause() {
    if (video.paused) {
        video.play();
        playButton.src = '/images/vpause.svg';
    } else {
        video.pause();
        playButton.src = '/images/vplay.svg';
    }
}

video.onplay = function() {
    playButton.src = '/images/vpause.svg';
}

video.onpause = function() {
    playButton.src = '/images/vplay.svg';
}

playButton.addEventListener('click', playPause);


var fullscreenButton = document.getElementById('vp-fullscreen-img');

fullscreenButton.addEventListener('click', function() {
    if (video.webkitRequestFullscreen) {
        if (!document.fullscreenElement) {
            video.webkitRequestFullscreen();
        } else {
            document.webkitExitFullscreen();
        }
    } else if (video.mozRequestFullScreen) {
        if (!document.fullscreenElement) {
            video.mozRequestFullScreen();
        } else {
            document.mozCancelFullScreen();
        }
    } else {
        alert('Your browser does not support fullscreen mode');
    }
});

const videoElement = document.getElementById("video");
const videoControls = document.getElementById("videoControls");

videoElement.addEventListener("fullscreenchange", function() {
  if (document.fullscreenElement === videoElement) {
    videoControls.style.visibility = "visible";
  } else {
    videoControls.style.visibility = "hidden";
  }
});

Answer 1

[Aetae]

Ну потому что во весь экран ты разворачиваешь само video, а надо videoplayer целиком: при фулсскрине на элементе ничего кроме этого элемента и его содержимого как бы не существует.

P.S. Ты пытаешься вызывать префиксные webkit и moz requestFullscreen, а чистый по стандарту requestFullscreen даже не пробуешь. Не надо так.

Answer 2

[Артём Дайнов]

Проблема в том, когда вы используете fullscreen, вызывается проигрыватель браузера, который используется по умолчанию. Внутри этого проигрывателя вы не можете ничего изменить. Вам даётся только стандартный ползунок, кнопка паузы пуска, отключения и включения громкости, ползунок громкости и кнопка выхода из полноэкранного режима.
В этой ситуации вы не можете выводить какие либо div на передний план.
Чтобы избавиться от этой проблемы, вы можете сделать свой кастомный проигрыватель на весь экран. Такая реализация используется в youtube.
1. Создаёте проигрыватель.
2. Кнопку Fullscreen.
3. Когда пользователь нажимает fullscreen, при помощи js вам нужно растянуть проигрыватель по вертикали и горизонтали на весь экран.

Видел другую реализацию.
1. Создаём div с id=miniplayer. в него помещаем video Рядом создаём dialog id='fullplayer' Когда пользователь нажимает fullscreen, с помощью js открываем dialog и переносим video из div в dialog и растягиваем на весь экран.
Так можно получить эфект полноэкранного режима.
Когда нужно выйти из этого режима, нужно сделать всё тоже самое, только в обратном порядке.