Элементы управления HTML5 видео на Android Chrome не охватывают полную ширину видео на этой простой странице

Сохраните это как html файл и загрузите его в Android Chrome:

<html>
<body style="overflow:hidden;transform: scale(0.5, 0.5);">
        <video controls>
            <source src="http://techslides.com/demos/sample-videos/small.mp4">
        </video>
</body>
</html>

Он должен выглядеть так:

Если вы поиграете с ним, вы обнаружите, что удаление EITHER overflow:hidden или transform:scale приведет к тому, что элементы управления будут охватывать всю ширину видео, как ожидалось. Однако сочетание этих двух стилей делает любые видеоустройства неправильным образом, как показано.

Этот вопрос кажется несколько связанным и предлагает добавить transform: translateZ(0) к содержащему элементу, однако добавив этот перевод либо к существующему преобразованию на теле, либо в новый содержащий div, не решает проблему.

Это ошибка в Android Chrome? Я не понимаю, почему соединение этих двух стилей должно влиять на ширину управления видео.

Ответ 1

Чтобы изменить ширину основной панели управления видеопроигрывателя, вы можете добавить следующее в css:

  video::-webkit-media-controls-panel {
    width: 100%;
  }

Вот хороший пример стилей собственных элементов управления. Надеюсь, это поможет вам.

Ответ 2

Вы можете изменить тег на что-то вроде этого

<video width="100%" height="100%" controls>
        <source src="http://techslides.com/demos/sample-videos/small.mp4">
</video>

Ответ 3

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

body {
  margin: 0;
  overflow: hidden;
  background-color: #000;
  text-align: center;
}

video {
  display: inline;
  height: 100vh;
}

<!doctype html>
<html>
  <head>
    <title>Some Video</title>
  </head>
  <body>
    <video src="https://www.w3schools.com/html/mov_bbb.mp4" controls></video>
  </body>
</html>