Привет, всем! У меня возникла проблема с моим видеоплеером: когда я активирую полноэкранный режим, панель управления (div с controls) становится невидимой, и я не могу понять, что именно вызывает это поведение. Буду благодарен за помощь в разборе этой ситуации. Вот мой код: <br/> <pre><code class="html"><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></code></pre> <br/> <pre><code class="css">.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-radiu
Проблема с невидимостью элементов управления в полноэкранном режиме может быть связана с несколькими факторами. Ваш CSS-код на этот момент устанавливает для `.videoplayer__controls` свойство `visibility: hidden;`, что может быть причиной того, что элементы не отображаются. Давайте рассмотрим несколько шагов для исправления этой проблемы.
1. **Проверка CSS свойств**: Убедитесь, что контролы делают видимыми в полноэкранном режиме. Замените `visibility: hidden;` на `visibility: visible;` для `.videoplayer__controls` при активации полноэкранного режима.
2. **Обработчик смены полноэкранного режима**: Добавьте JavaScript, чтобы обрабатывать события начала и окончания полноэкранного режима и показывать элементы управления. Вот пример кода:
```javascript
const video = document.getElementById('video');
const videoControls = document.getElementById('videoControls');
const fullscreenButton = document.querySelector('.vp-fullscreen');
fullscreenButton.addEventListener('click', async () => {
if (!document.fullscreenElement) {
await video.requestFullscreen();
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
}
}
});
video.addEventListener('fullscreenchange', () => {
if (document.fullscreenElement) {
videoControls.style.visibility = 'visible'; // Показываем контролы
} else {
videoControls.style.visibility = 'hidden'; // Скрываем контролы
}
});
```
3. **Проверка других CSS-свойств**: В вашем CSS-коде стоит проверить, нет ли ограничений по размеру или положению для `.videoplayer__controls`, которые могли бы заставлять их оставаться вне видимой области. Вы можете поиграться с `top`, `left`, `right`, `bottom`, а также со свойством `display`. Попробуйте использовать обычное значение для `display`, например, `display: flex` или `display: block`.
4. **Очистка кода**: Проверьте, нет ли лишнего кода, который мог бы влиять на отображение контролов, особенно в состоянии полноэкранного режима. Убедитесь, что стиль на `.vp-fullscreen` кнопке не блокирует доступ к другим элементам управления.
После внесения изменений, возможно, вам придется протестировать, чтобы убедиться, что все работает правильно. Если проблема сохраняется, пожалуйста, предоставьте больше информации о том, как именно вы активируете полноэкранный режим и каким образом обрабатываются события, чтобы можно было предложить более специфические решения.
Ну потому что во весь экран ты разворачиваешь само <code>video</code> , а надо <code>videoplayer</code> целиком: при фулсскрине на элементе ничего кроме этого элемента и его содержимого как бы не существует. <br/> <br/> P.S. Ты пытаешься вызывать префиксные <code>webkit</code> и <code>moz</code> <code>requestFullscreen</code> , а чистый по стандарту <code>requestFullscreen</code> даже не пробуешь. Не надо так.