Для скрытия элементов управления в HTML видеоплеере в режиме полного экрана можно использовать комбинацию JavaScript и CSS.
HTML видеоплееры обычно имеют элементы управления, такие как кнопки воспроизведения, паузы, перемотки и громкости. Когда плеер находится в режиме полного экрана, эти элементы управления могут быть разумно скрыты для повышения пользовательского опыта и создания более наглядной сцены для просмотра видео.
1. Во-первых, необходимо добавить обработчик событий, который будет отслеживать изменение режима полного экрана. Это можно сделать с помощью события Fullscreenchange. Пример:
document.addEventListener('fullscreenchange', function() {
// Ваш код здесь
});
2. Затем, внутри обработчика событий, вы можете получить ссылку на элемент управления видеоплеером. Для этого можно использовать метод document.getElementById() или document.querySelector(). Пример:
document.addEventListener('fullscreenchange', function() {
var videoControls = document.getElementById('video-controls');
});
3. После получения ссылки на элемент управления видеоплеером, можно применить CSS свойство display со значением none, чтобы скрыть элементы управления в режиме полного экрана. Пример:
document.addEventListener('fullscreenchange', function() {
var videoControls = document.getElementById('video-controls');
if (document.fullscreenElement) {
videoControls.style.display = 'none';
} else {
videoControls.style.display = 'block';
}
});
4. Не забудьте также указать соответствующий идентификатор элемента управления видеоплеером в HTML коде. Пример:
<div id="video-controls"> <!-- Элементы управления видеоплеером --> </div> <video src="video.mp4"></video>
В итоге, когда видеоплеер находится в режиме полного экрана, элементы управления будут скрыты, а когда выходит из режима полного экрана, элементы управления снова будут отображаться. Это позволяет создать более погружающий опыт просмотра видео без ненужных элементов управления.