Как постоянно показывать controls у видео?

Question

Как постоянно показывать controls у видео?

Рейтинг: 1Ответов: 2Опубликовано: 15.08.2023

Почему если видео запускалось с помощью .play() , то не работает .controls = true ? Причем если видео запускалось стандартной кнопкой или использовались другие стандартные элементы управления, то .controls = true начинает работать? Как это исправить?

Запускаем видео нажав на playVideo(выполняется .play()), пытаемся навести курсор на addControls(должен делать видимыми элементы управления тега video), он не работает.

Но если видео запускалось стандартной кнопкой, или нажатием на область видео, то наведение на addControls делает элементы управления видео видимыми. Наводить на addControls нужно естественно когда видео воспроизводится и элементы управления скрылись чтобы не мешать просмотру.

let myVideo = document.querySelector(".myVideo");
//управление кнопкой воспроизведения
var triangle = document.querySelector(".triangle");

function playVideo() {
  myVideo.play();
}


let addControls = document.querySelector(".addControls");
// Добавляем обработчик события mouseover для div
addControls.addEventListener("mouseover", function() {
  // Задаем свойство controls для видео
  myVideo.controls = true;
});

<video class="myVideo" controls src="https://media.w3.org/2010/05/sintel/trailer.mp4"> 
</video>
<div>playVideo</div>
<div class="addControls">addControls</div>

css javascript html5 видео

Источник: Stack Overflow на русском

Answer 1

▲ 1Принят

Если видео будет в фокусе, то в моём хроме получается постоянно показывать контролы. Установку фокуса в таймер не поместил, поскольку она будет мешать нормальному взаимодействию пользователя со страницей, но если пользователь больше ничего не трогает, то установки фокуса вне таймера достаточно.

const video = document.querySelector('video')

video.focus()
video.controls = true
setInterval(() => video.controls = true, 1000)

html, body, video { height: 100%; margin: auto; display: block; }

<video controls autoplay muted loop>
  <source src="//www.w3schools.com/html/movie.mp4" type="video/mp4">
  <source src="//www.w3schools.com/html/movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

Вариант с кнопкой:

let timer

document.querySelector('button').addEventListener('click', function () {
  const video = document.querySelector('video')

  video.play()
  video.focus()
  video.controls = true
  clearTimeout(timer)
  timer = setInterval(() => video.controls = true, 1000)
});

html, body, video { height: 100%; margin: auto; display: block; }
button { position: absolute; inset: 0 auto auto 0; margin: .25em; }

<button>Play</button>

<video controls muted loop>
  <source src="//www.w3schools.com/html/movie.mp4" type="video/mp4">
  <source src="//www.w3schools.com/html/movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

Answer 2

▲ 1

С помощью css можно принудительно показать шкалу, но не кнопки.

У панели кнопок псевдоэлмент начинается с -internal, а не с -webkit - похоже, такие элементы в стилях прописывать нельзя.

html, body, video { height: 100%; margin: auto; display: block; }

::-webkit-media-controls-panel {
  display: flex !important;
  opacity: 1 !important;
}

::-internal-media-controls-button-panel { /* не работает */
  opacity: 1 !important;
}

::-webkit-media-controls-timeline {
  opacity: 1 !important;
}

<video controls autoplay muted loop>
  <source src="//www.w3schools.com/html/movie.mp4" type="video/mp4">
  <source src="//www.w3schools.com/html/movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

Как постоянно показывать controls у видео?

Ответы