HTML5 <video>Элементы управления плеером в Chrome Три точки справа Откройте пустой экран

Question

Не могу найти ответ на этот вопрос нигде.

Я использую стандартный тег HTML5 для встраивания видео в страницу:

<video controls>
     <source src="video/intro-video.mp4" type="video/mp4"/>
</video>

Однако в элементах управления по умолчанию в Chrome справа отображаются три точки (опции), однако, когдаВы нажимаете на них, он выходит на пустой экран, и нет никакого способа выйти, если это только обновить всю страницу.

Как сделать так, чтобы параметры либо пропали, либо закрывали пустой экран?

Спасибо.

Answer 1

Хорошо, понял!Кажется, что кнопка «Параметры» ведет себя по-разному в зависимости от того, как элемент видео был встроен в страницу.По сути, он предлагает функции «Загрузить» или «Картинка в картинке» или обе, которые, если страница представляет собой широко прокручиваемый сайт с динамически генерируемым контентом, вызывали пустой экран при нажатии, что было моей проблемой.Я могу решить эту проблему двумя способами:

1. Вставить видео в отдельный фиксированный контейнер (например, всплывающее окно)

2. Использовать disablePictureInPicture атрибут, чтобы полностью исключить функцию «картинка в картинке».https://wicg.github.io/picture-in-picture/#dom-htmlvideoelement-disablepictureinpicture

Answer 2

Я знаю, что уже слишком поздно, но это будет полезно для других, вы можете добавить «nodownload» в список элементов управления, который будет скрывать опцию загрузки из видео, и добавить «disablepictureinpicture» внутри тега видео, который будет скрывать опцию «картинка в картинке»и таким образом три точки становятся скрытыми

<video width="100%" controls disablepictureinpicture controlslist="nodownload">

рабочий образец

Answer 3

если вы отключите опции, используя соответствующие исключения из списка ниже, точки должны исчезнуть:

<video controls controlsList="nofullscreen nodownload noremoteplayback">
</video>

См. ControlsList для получения более подробной информации