Как скрыть элементы управления HTML видеоплеера в режиме полного экрана?
Есть стандартный плеер с кастомными элементами:
<div class="custom-video-player" style="position:relative;"> <video id="myVideo" width="320" height="240" controls> <source src="/UploadVideos/BMW.mp4" type="video/mp4"> Ваш браузер не поддерживает тег video. </video> <button id="playPauseButton" style="position: absolute;bottom:0;left:0;">Воспроизвести</button> <input type="range" id="seekBar" value="0"> <button id="fullscreenButton" style="position: absolute;bottom:0;right:0;">Полный экран</button> </div> <script> document.addEventListener('DOMContentLoaded', function() { var video = document.getElementById('myVideo'); var playPauseButton = document.getElementById('playPauseButton'); var seekBar = document.getElementById('seekBar'); var fullscreenButton = document.getElementById('fullscreenButton'); video.removeAttribute('controls'); // Удаляем стандартные элементы controls function togglePlayPause() { if (video.paused) { video.play(); playPauseButton.textContent = 'Пауза'; } else { video.pause(); playPauseButton.textContent = 'Воспроизвести'; } } playPauseButton.addEventListener('click', togglePlayPause); video.addEventListener('click', togglePlayPause); video.addEventListener('timeupdate', function() { var value = (video.currentTime / video.duration) * 100; seekBar.value = value; }); seekBar.addEventListener('input', function() { var value = seekBar.value * video.duration / 100; video.currentTime = value; }); fullscreenButton.addEventListener('click', function() { if (video.requestFullscreen) { video.requestFullscreen(); } else if (video.mozRequestFullScreen) { video.mozRequestFullScreen(); // Firefox } else if (video.webkitRequestFullscreen) { video.webkitRequestFullscreen(); // Chrome and Safari } }); }); </script> |
<div class="custom-video-player" style="position:relative;"> <video id="myVideo" width="320" height="240" controls> <source src="/UploadVideos/BMW.mp4" type="video/mp4"> Ваш браузер не поддерживает тег video. </video> <button id="playPauseButton" style="position: absolute;bottom:0;left:0;">Воспроизвести</button> <input type="range" id="seekBar" value="0"> <button id="fullscreenButton" style="position: absolute;bottom:0;right:0;">Полный экран</button> </div> <script> document.addEventListener('DOMContentLoaded', function() { var video = document.getElementById('myVideo'); var playPauseButton = document.getElementById('playPauseButton'); var seekBar = document.getElementById('seekBar'); var fullscreenButton = document.getElementById('fullscreenButton'); video.removeAttribute('controls'); // Удаляем стандартные элементы controls function togglePlayPause() { if (video.paused) { video.play(); playPauseButton.textContent = 'Пауза'; } else { video.pause(); playPauseButton.textContent = 'Воспроизвести'; } } playPauseButton.addEventListener('click', togglePlayPause); video.addEventListener('click', togglePlayPause); video.addEventListener('timeupdate', function() { var value = (video.currentTime / video.duration) * 100; seekBar.value = value; }); seekBar.addEventListener('input', function() { var value = seekBar.value * video.duration / 100; video.currentTime = value; }); fullscreenButton.addEventListener('click', function() { if (video.requestFullscreen) { video.requestFullscreen(); } else if (video.mozRequestFullScreen) { video.mozRequestFullScreen(); // Firefox } else if (video.webkitRequestFullscreen) { video.webkitRequestFullscreen(); // Chrome and Safari } }); }); </script>
вот они:
Почему после перехода в полноэкранный режим стандартные элементы появляются а мои пропадают?
Дополнительно:
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для скрытия элементов управления HTML видеоплеера в режиме полного экрана, можно использовать CSS и JavaScript. Во-первых, необходимо добавить стили для скрытия элементов управления:
```html
.fullscreen-controls {
display: none !important;
}
```
Затем, используя JavaScript, можно обработать событие изменения режима полного экрана и добавить/удалить класс для скрытия элементов управления:
```html
document.addEventListener('fullscreenchange', function () {
var video = document.querySelector('video');
if (document.fullscreenElement === video) {
video.classList.add('fullscreen-controls');
} else {
video.classList.remove('fullscreen-controls');
}
});
```
Теперь, при переходе в режим полного экрана, элементы управления видеоплеера будут скрыты, а при выходе из него - снова отображаться. Не забудьте также добавить соответствующие классы к элементам управления вашего видеоплеера.
Надеюсь, этот ответ поможет вам решить проблему скрытия элементов управления HTML видеоплеера в режиме полного экрана. Если у вас возникнут дополнительные вопросы, не стесняйтесь задавать их!