Как скрыть элементы управления HTML видеоплеера, когда он находится в режиме полноэкранного просмотра?

Как можно добавить кастомные элементы в стандартный плеер?
Изображение к вопросу
Изображение к вопросу
  • 22 января 2024 г. 19:11
Ответы на вопрос 1
Чтобы скрыть элементы управления стандартного HTML видеоплеера когда он находится в полноэкранном режиме, вы можете использовать CSS для скрытия элементов управления, когда видео входит в полноэкранном режиме. Вот пример того, как это можно сделать:

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

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

Обратите внимание, что `-webkit-` префикс работает только для браузеров, которые используют движок WebKit/Blink (например, Chrome и Safari). Для других браузеров вам может потребоваться использовать другие префиксы (например, `-moz-` для Firefox или без префикса).

Чтобы создать полностью кастомизированный видеоплеер, который будет использовать только ваш набор элементов управления и будет скрывать стандартные в режиме полноэкранного просмотра, вам необходимо написать CSS и JavaScript. Ниже приведен базовый пример того, как это можно сделать:

HTML:
```html
<video id="myVideo" width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>
<div id="customControls">
  <button onclick="playPause()">Play/Pause</button>
  <button onclick="toggleFullscreen()">Toggle Fullscreen</button>
  <!-- Другие кастомные элементы управления -->
</div>
```

JavaScript:
```javascript
var myVideo = document.getElementById('myVideo');
var customControls = document.getElementById('customControls');

function playPause() {
  if (myVideo.paused)
    myVideo.play();
  else
    myVideo.pause();
}

function toggleFullscreen() {
  if (myVideo.requestFullscreen) {
    if (document.fullscreenElement) {
      document.exitFullscreen();
    } else {
      myVideo.requestFullscreen();
    }
  }
}

document.addEventListener('fullscreenchange', function () {
  var isFullscreen = !!document.fullscreenElement;
  customControls.style.display = isFullscreen ? 'none' : 'block'; // Скрыть/показать кастомные элементы управления
});
```

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

#customControls {
  /* Стили для вашей панели с элементами управления */
}
```

Этот JavaScript код обрабатывает кнопки play/pause и toggle fullscreen и скрывает/показывает пользовательские элементы управления в зависимости от того, входит ли видео в полноэкранный режим.

Обратите внимание, что для разных браузеров и платформ могут быть разные способы обработки полноэкранного режима и элементов управления им. Могут потребоваться разные обработчики событий и API для различных сценариев и браузеров. Вышеупомянутые примеры приведены для обобщенного случая и могут потребовать дополнительной настройки и тестирования.
Похожие вопросы