Отображение своего видео контроллера (custom controls) в полноэкранном режиме (in fullscreen mode)

82
05 июля 2021, 04:30

Возник вопрос по поводу событий и свойств при работе с video элементом, а именно, при создании своего контроллера остановился на моменте с fullscreen режимом и всём, что его связывает (отображение, события и свойства). При входе в полноэкранный режим, не отображается свой контроллер. Поискав в интернете, нашёл, что это дело рук shadow DOM (отображение вшитых controls).

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

Помогли с отключением дефолтного controls, но

z-index: 2147483647 !important;

никак не помог отобразить собственный контроллер выше видео. Скорее всего, какие-то другие стили shadow DOM перекрывают его (или ответ лежит на поверхности и я его не вижу), но не поможете разобраться в чём дело? А то, я так и сижу, ломая голову, над этим несколько дней. Так же, хотелось бы узнать все события и свойства video элемента, связанные с входом и выходом из полноэкранного режима. Во многих крупных источниках о них ничего и описываются только стандартные свойства. Нашёл:

webkitDisplayingFullscreen - возвращает true/false в зависимости от того, находится ли видео в полноэкранном режиме.
webkitExitFullscreen() - Выход из полноэкранного режима. Браузер говрит, что устаревшее. Есть ли замена ?
requestFullscreen() - вход в полноэкранный режим. На всё остальное ругается, что устаревшее (webkitEnterFullscreen и его аналоги в других браузерах)
fullscreenchange - событие, срабатывающее при смене режима
fullscreenElement - так и не понял как с ним работать.

Может, поделитесь дельными статьями по этому? Приложу код своего контроллера, мб поможет.

var player = document.querySelector('.player'); 
var video = player.querySelector('.video'); 
 
var play_pause_button = player.querySelector('#play-pause-button'); 
var fullscreen_windowed_button = player.querySelector('#fullscreen-windowed-button'); 
var settings_button = player.querySelector('#settings-button'); 
var volume_button = player.querySelector('#volume-button'); 
 
var play_button_image = play_pause_button.querySelector('#togglePlay-image'); 
var pause_button_image = play_pause_button.querySelector('#togglePause-image'); 
var expand_button_image = fullscreen_windowed_button.querySelector('#expand-arrows-image'); 
var minimize_button_image = fullscreen_windowed_button.querySelector('#minimize-arrows-image'); 
var higher_volume_image = volume_button.querySelector('#higher-volume-image'); 
var below_volume_image = volume_button.querySelector('#below-volume-image'); 
var none_volume_image = volume_button.querySelector('#none-volume-image'); 
 
var progressbar_filled = player.querySelector('.progressbar-filled'); 
 
// var volume_value = video.volume; 
 
var slider_volume = player.querySelector('.player-slider-volume'); 
 
 
function togglePlayPause() //function play/pause video 
{ 
  var togglePlayPause = video.paused ? 'play' : 'pause'; 
  video[togglePlayPause](); 
} 
 
function toggleFullscreenWindowed() //function deployment/cancel fullscreen 
{ 
  var toggleFullscreenWindowed = video.webkitDisplayingFullscreen ? (expand_button_image.style.display = 'block', minimize_button_image.style.display = 'none', video.webkitExitFullscreen()) : (expand_button_image.style.display = 'none', minimize_button_image.style.display = 'block', video.requestFullscreen()); 
} 
 
function togglePlayPauseUpdate() //function button image change play/pause 
{ 
  var image = this.paused ? (pause_button_image.style.display = 'none', play_button_image.style.display = 'block') : (play_button_image.style.display = 'none', pause_button_image.style.display = 'block'); 
 
  // play_pause_button.innerhtml = image; 
  // play_pause_button.textContent = image; 
} 
 
function progressbarUpdate() //function update progressbar video 
{ 
  var percentProgressbar = (video.currentTime / video.duration) * 100; 
  progressbar_filled.style.width = percentProgressbar + "%"; 
} 
 
function toggleplaybackRate() { 
  video.playbackRate = '3'; 
} 
 
function toggleVolumeMuteUnmuteUpdate() { 
  var volume_value = slider_volume.value; 
  console.log(volume_value); 
  // video.muted != 0 ? (volume_value == '0' ? (video.muted = 0, slider_volume.value = '0.5', volume_value = '0.5') : (video.muted = 0, slider_volume.value = volume_value)) : (video.muted = 1, slider_volume.value = 0); 
  // 
  video.muted == 1 ? (volume_value == '0' ? (video.muted = 0, volume_value = '0.5', video.volume = '0.5', slider_volume.value = '0.5') : (video.muted = 0, video.volume = volume_value, slider_volume.value = volume_value)) : (video.muted = 1, slider_volume.value = '0'); 
 
  switch (true) { 
    case (video.muted == '0'): 
      higher_volume_image.style.display = 'block'; 
      below_volume_image.style.display = 'none'; 
      none_volume_image.style.display = 'none'; 
      break; 
    case (video.muted == '1'): 
      higher_volume_image.style.display = 'none'; 
      below_volume_image.style.display = 'none'; 
      none_volume_image.style.display = 'block'; 
      break; 
  } 
 
  // var value = volume_value; 
  // alert(value); 
  // var volume = video.volume == '0' ? volume_value : '0'; 
  // video.volume = volume; 
  // slider_volume.value = volume; 
} 
 
function toggleVolumeUpdate() { 
  video[this.name] = this.value; 
 
  switch (true) { 
    case (video.volume == '0'): 
      higher_volume_image.style.display = 'none'; 
      below_volume_image.style.display = 'none'; 
      none_volume_image.style.display = 'block'; 
      video.muted = 1; 
      break; 
    case (video.volume > '0' && video.volume < '0.5'): 
      higher_volume_image.style.display = 'none'; 
      below_volume_image.style.display = 'block'; 
      none_volume_image.style.display = 'none'; 
      video.muted = 0; 
      break; 
    case (video.volume >= '0.5'): 
      higher_volume_image.style.display = 'block'; 
      below_volume_image.style.display = 'none'; 
      none_volume_image.style.display = 'none'; 
      video.muted = 0; 
      break; 
  } 
} 
 
function detectKeypress(e) { 
  if (e.keyCode == 32) { 
    togglePlayPause(); 
  } 
  if (e.keyCode == 27) { 
    if (video.webkitDisplayingFullscreen == 'true') { 
      video.webkitExitFullscreen(); 
      expand_button_image.style.display = 'block'; 
      minimize_button_image.style.display = 'none'; 
    } 
  } 
} 
 
video.addEventListener('click', togglePlayPause); //onclick on a video 
video.addEventListener('play', togglePlayPauseUpdate); //if video playing 
video.addEventListener('pause', togglePlayPauseUpdate); //if video paused 
volume_button.addEventListener('click', toggleVolumeMuteUnmuteUpdate); 
play_pause_button.addEventListener('click', togglePlayPause); //onclick on a button play/pause 
/*button change rate*/ 
settings_button.addEventListener('click', toggleplaybackRate); //onclick on a button playbackRate 
fullscreen_windowed_button.addEventListener('click', toggleFullscreenWindowed); //onclick on a button fullscreen/windowed 
video.addEventListener('timeupdate', progressbarUpdate); //if time video update(currentTime) 
// video.addEventListener('timeupdate', toggleVolumeUpdate); 
window.addEventListener('keydown', detectKeypress); 
 
slider_volume.addEventListener('change', toggleVolumeUpdate); 
slider_volume.addEventListener('mousemove', toggleVolumeUpdate);
body { 
  margin: 0px; 
  padding: 0px; 
} 
 
.container { 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  height: 100vh; 
} 
 
.player { 
  width: 100%; 
  max-width: 1000px; 
  position: relative; 
  overflow: hidden; 
} 
 
.video { 
  width: 100%; 
  z-index: 1 !important; 
  /* display: contents; */ 
} 
 
.player-controls { 
  /* display: flex; */ 
  position: absolute !important; 
  z-index: 2147483647 !important; 
  bottom: 0; 
  -webkit-box-sizing: border-box !important; 
  box-sizing: border-box !important; 
  width: 100% !important; 
  /* flex-wrap: wrap; */ 
  background: rgba(0, 0, 0, 0); 
  /* transform: translateY(100%) translateY(-4px); */ 
  -moz-transform: translateY(100%) translateY(-4px); 
  !important; 
  -ms-transform: translateY(100%) translateY(-4px); 
  !important; 
  -webkit-transform: translateY(100%) translateY(-4px); 
  !important; 
  transition: all .2s; 
} 
 
.player:hover .player-controls { 
  /* padding-left: 10px; 
  padding-right: 10px; */ 
  transform: translateY(0); 
} 
 
.buttons #play-pause-button, 
#fullscreen-windowed-button, 
#settings-button, 
#volume-button { 
  padding: 10px; 
  border: 0; 
  width: 40px; 
  height: 40px; 
  background: none; 
  overflow: hidden; 
  white-space: nowrap; 
  outline: none; 
  cursor: pointer; 
} 
 
#fullscreen-windowed-button, 
#settings-button { 
  /* position: absolute; */ 
  float: right; 
} 
 
#togglePlay-image, 
#togglePause-image, 
#settings-image, 
#volume-image { 
  width: 20px; 
  height: 20px; 
} 
 
#settings-button:hover { 
  transition: 2s; 
  transform: rotate(45%); 
} 
 
.button-content { 
  transition: fill .2s; 
  fill: rgba(255, 255, 255, 0.8); 
} 
 
.button-content-stroke { 
  transition: stroke .2s; 
  stroke: rgba(255, 255, 255, 0.8); 
  stroke-width: 3; 
  stroke-linecap: round; 
  fill: none; 
} 
 
button:hover .button-content { 
  fill: rgba(255, 255, 255, 1); 
} 
 
button:hover .button-content-stroke { 
  stroke: rgba(255, 255, 255, 1); 
} 
 
.video-progressbar { 
  top: 0; 
  left: 0; 
  width: 100%; 
  background-color: rgba(142, 64, 0, 0.2); 
} 
 
.progressbar-filled { 
  height: 4px; 
  background-color: orangered; 
  transition: height .1s; 
  /* padding-top: 3px; */ 
} 
 
.video-progressbar:hover .progressbar-filled { 
  height: 6px; 
} 
 
video::-webkit-media-controls { 
  display: none !important; 
} 
 
video::-webkit-media-controls-enclosure { 
  display: none !important; 
}
<div class="container"> 
  <div class="content"> 
    <div class="player"> 
      <video class="video" src="https://player.vimeo.com/external/194837908.sd.mp4?s=c350076905b78c67f74d7ee39fdb4fef01d12420&profile_id=164"></video> 
      <div class="player-controls"> 
        <div class="video-progressbar"> 
          <div class="progressbar-filled"></div> 
        </div> 
        <div class="buttons"> 
          <button id="play-pause-button"> 
                <svg id="togglePlay-image" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 41.999 41.999"> 
                  <path class="button-content" d="M36.068,20.176l-29-20C6.761-0.035,6.363-0.057,6.035,0.114C5.706,0.287,5.5,0.627,5.5,0.999v40 
                  	c0,0.372,0.206,0.713,0.535,0.886c0.146,0.076,0.306,0.114,0.465,0.114c0.199,0,0.397-0.06,0.568-0.177l29-20 
                  	c0.271-0.187,0.432-0.494,0.432-0.823S36.338,20.363,36.068,20.176z"/> 
                </svg> 
                <svg id="togglePause-image" style="display:none;" xmlns="http://www.w3.org/2000/svg" viewBox="-45 0 327 327"> 
                  <path class="button-content" d="m158 0h71c4.417969 0 8 3.582031 8 8v311c0 4.417969-3.582031 8-8 8h-71c-4.417969 0-8-3.582031-8-8v-311c0-4.417969 3.582031-8 8-8zm0 0"/> 
                  <path class="button-content" d="m8 0h71c4.417969 0 8 3.582031 8 8v311c0 4.417969-3.582031 8-8 8h-71c-4.417969 0-8-3.582031-8-8v-311c0-4.417969 3.582031-8 8-8zm0 0"/> 
                </svg> 
              </button> 
          <button id="fullscreen-windowed-button"> 
                <svg id="expand-arrows-image" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16"> 
                  <path class="button-content" d="M5.3 6.7l1.4-1.4-3-3 1.3-1.3h-4v4l1.3-1.3z"></path> 
                  <path class="button-content" d="M6.7 10.7l-1.4-1.4-3 3-1.3-1.3v4h4l-1.3-1.3z"></path> 
                  <path class="button-content" d="M10.7 9.3l-1.4 1.4 3 3-1.3 1.3h4v-4l-1.3 1.3z"></path> 
                  <path class="button-content" d="M11 1l1.3 1.3-3 3 1.4 1.4 3-3 1.3 1.3v-4z"></path> 
                </svg> 
                <svg id="minimize-arrows-image" style="display:none;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16"> 
                  <path class="button-content" d="M2.4,1L1,2.4l3,3L2.7,6.7h4v-4L5.4,4L2.4,1z"/> 
                  <path class="button-content" d="M1,13.6L2.4,15l3-3l1.3,1.3v-4h-4L4,10.6L1,13.6z"/> 
                  <path class="button-content" d="M13.6,15l1.4-1.4l-3-3l1.3-1.3h-4v4l1.3-1.3L13.6,15z"/> 
                  <path class="button-content" d="M13.3,6.7L12,5.4l3-3L13.6,1l-3,3L9.3,2.7v4H13.3z"/> 
                </svg> 
              </button> 
          <button id="settings-button"> 
                <svg id="settings-image" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512"> 
                	<path class="button-content" d="M500.6,211.4L441.9,197c-3.5-11.1-8.1-21.9-13.6-32.2c8.8-14.6,27.3-45.6,27.3-45.6c3.5-5.9,2.6-13.5-2.3-18.3L411,58.4 
                		c-4.9-4.9-12.4-5.8-18.3-2.3c-0.4,0.2-30.8,18.5-45.6,27.4c-10.3-5.4-21-9.9-32.1-13.4c-4.4-18-14.5-58.7-14.5-58.7 
                		C298.9,4.7,292.9,0,286,0h-60c-6.9,0-12.9,4.7-14.6,11.4c-4.1,16.8-11,44.8-14.5,58.7c-11.8,3.7-23.1,8.6-34,14.5 
                		c-6.4-3.9-16-9.6-24.9-14.9l-22.5-13.5c-5.9-3.5-13.5-2.6-18.3,2.3l-42.4,42.4c-4.9,4.9-5.8,12.4-2.3,18.3 
                		c0.2,0.3,17.8,29.6,29.3,48.9c-4.7,9.3-8.7,19-11.8,28.9c-20,5-58.2,14.4-58.7,14.5C4.7,213.1,0,219.1,0,226v60 
                		c0,6.9,4.7,12.9,11.4,14.6c0.4,0.1,38.4,9.4,58.7,14.4c3.6,11.3,8.2,22.3,13.8,32.8l-26.2,43.7c-3.5,5.9-2.6,13.5,2.3,18.3 
                		l42.4,42.4c4.9,4.9,12.4,5.8,18.3,2.3c0.4-0.2,29.5-17.7,43.7-26.2c10.4,5.5,21.3,10.1,32.5,13.7l14.4,58.7 
                		c1.6,6.7,7.7,11.4,14.6,11.4h60c6.9,0,12.9-4.7,14.6-11.4l14.4-58.7c11.5-3.7,22.7-8.4,33.3-14.1c14.4,8.7,44.4,26.7,44.4,26.7 
                		c5.9,3.5,13.5,2.6,18.3-2.3l42.4-42.4c4.9-4.9,5.8-12.4,2.3-18.3c0,0-18.3-30.5-27-44.9c5.3-10.1,9.7-20.6,13.2-31.5 
                		c17.8-4.4,58.2-14.3,58.7-14.4c6.7-1.6,11.4-7.7,11.4-14.6v-60C512,219.1,507.3,213.1,500.6,211.4z M256,343c-48,0-87-39-87-87 
                		s39-87,87-87s87,39,87,87S304,343,256,343z"/> 
                </svg> 
              </button> 
          <button id="volume-button"> 
                <svg style="display:none;" id="volume-image"  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 60 60"> 
                	<path class="button-content" d="M26.9,7.4c-0.6,0-1.1,0.2-1.6,0.4c0,0-0.1,0.1-0.1,0.1L11.6,19.4H1c-0.6,0-1,0.4-1,1v19c0,0.3,0.1,0.5,0.3,0.7 
                		s0.4,0.3,0.7,0.3l10.6,0l13.5,12.4c0,0,0.1,0.1,0.2,0.1c0.5,0.3,1,0.4,1.6,0.4c1.7,0,3.1-1.4,3.1-3.2V10.5 
                		C30,8.8,28.6,7.4,26.9,7.4z"/> 
                	<path class="button-content" d="M52,29.9c0-8.3-5.3-15.8-13.2-18.4c-0.5-0.2-1.1,0.1-1.3,0.6c-0.2,0.5,0.1,1.1,0.6,1.3C45.3,15.7,50,22.4,50,29.9 
                		c0,7.5-4.8,14.1-11.8,16.6c-0.5,0.2-0.8,0.7-0.6,1.3c0.1,0.4,0.5,0.7,0.9,0.7c0.1,0,0.2,0,0.3-0.1C46.7,45.6,52,38.2,52,29.9z"/> 
                	<path class="button-content" d="M44.5,6.4c-0.5-0.2-1.1,0-1.3,0.5c-0.2,0.5,0,1.1,0.5,1.3C52.4,11.9,58,20.4,58,29.9c0,9.8-5.9,18.4-15,21.9 
                		c-0.5,0.2-0.8,0.8-0.6,1.3c0.2,0.4,0.5,0.6,0.9,0.6c0.1,0,0.2,0,0.4-0.1C53.6,49.8,60,40.5,60,29.9C60,19.6,53.9,10.4,44.5,6.4z"/> 
                	<path class="button-content" d="M43,29.9c0-6-4-11.3-9.7-13c-0.5-0.2-1.1,0.2-1.2,0.7c-0.2,0.5,0.2,1.1,0.7,1.2c4.9,1.4,8.3,6,8.3,11s-3.4,9.6-8.3,11 
                		c-0.5,0.2-0.8,0.7-0.7,1.2c0.1,0.4,0.5,0.7,1,0.7c0.1,0,0.2,0,0.3,0C39,41.2,43,35.8,43,29.9z"/> 
                </svg> 
                <svg id="higher-volume-image" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 40 40"> 
                	<path class="button-content" d="M8.2,12.3H0v15.3h8.2L20,40V0L8.2,12.3z"/> 
                	<path class="button-content-stroke" d="M24.1,12c0,0,3.4,3,3.4,8s-3.4,7.8-3.4,7.8"/> 
                	<path class="button-content-stroke" d="M28.2,7c0,0,6.8,4.1,6.8,13s-6.8,12.8-6.8,12.8"/> 
                </svg> 
                <svg id="below-volume-image" style="display:none;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 40 40"> 
                	<path class="button-content" d="M8.2,12.3H0v15.3h8.2L20,40V0L8.2,12.3z"/> 
                	<path class="button-content-stroke" d="M24.1,12c0,0,3.4,3,3.4,8s-3.4,7.8-3.4,7.8"/> 
                </svg> 
                <svg id="none-volume-image" style="display:none;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 40 40"> 
                	<path class="button-content" d="M8.2,12.3H0v15.3h8.2L20,40V0L8.2,12.3z"/> 
                	<line class="button-content-stroke" x1="25.7" y1="14.5" x2="36.6" y2="25.4"/> 
                	<line class="button-content-stroke" x1="36.6" y1="14.5" x2="25.7" y2="25.4"/> 
                </svg> 
              </button> 
          <input type="range" name="volume" class="player-slider-volume" min="0" max="1" step="0.01" value="1"> 
        </div> 
      </div> 
    </div> 
  </div> 
</div>

READ ALSO
Не работают медиа-запросы в CSS3
HTML

Не работают медиа-запросы в CSS3

 119
alert при закрытии модального окна fancybox
HTML

alert при закрытии модального окна fancybox

Доброго времени сутокЕсть HTML в body только это

 102
Как сделать возможность скролить блок с помощью мыши, не используя скроллбар?
HTML

Как сделать возможность скролить блок с помощью мыши, не используя скроллбар?

Всем приветЕсть вот такой блок: скажите пожалуйста, что нужно сделать, чтобы была возможность скролить этот блок при зажатой левой клавиши...

 89
Очередь из входных параметров одной функции [дубликат]
c#

Очередь из входных параметров одной функции [дубликат]

Необходимо создать поток, в котором будет функция и очередь разных параметров и он будет по мере добавления в очередь данных параметров запускать...

 94