HTML5-видео полной ширины с проблемами максимальной высоты - PullRequest
Новая
       24

HTML5-видео полной ширины с проблемами максимальной высоты

0 голосов
/ 24 мая 2018

Я буквально тяну свои волосы с этой проблемой, поэтому любая помощь будет высоко ценится.

У меня есть HTML5 <video>, которым я хочу быть: -

  1. Полная ширина - элементы управления всегда должны составлять 100% шириныэкран.
  2. Макс. высота пикселя - высота видео не увеличивается больше, чем высота пикселя видео.
  3. Изменение размера по горизонтали до границ - при изменении размера браузера (при сохранении соотношения).
  4. Изменение размера по вертикали до границ - при изменении размера браузера по вертикали (при сохранении соотношения).

Это то, что я до сих пор: - 

html, body, .page {
  height: 100%;   
  background-color: #ccc;
  padding: 0;
  margin: 0;
}
video { width: 100%; height: auto;  }
<html>
<body>

<div class="video-content">
	<video style="max-height: 320px;" controls> <!-- width="320" height="200" -->
        <source src="http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4" type="video/mp4" />
    </video>
</div>

</body>
</html>

Таким образом, это удовлетворяет (1) т.е. элементы управления являются полной шириной экрана и (2) высота видео не больше высоты разрешениявидео (320 пикселей).

enter image description here

При горизонтальном изменении размера браузера (3) также выполняется.

enter image description here

Однако при изменении размера по вертикали возникают следующие проблемы: -

enter image description here

Обратите внимание на полосу прокрутки (в отличие от изменения размера видео).

Так что, если я обновлю CSS с 

video { width: 100%; height: auto;  }

... до ... 

video { width: 100%; height: 100%;  }

... тогда все условия выполняются, кроме (3) на этот раз, т.е. между элементами управления и фактическим видео есть промежуток: -

enter image description here

Если бы я мог объединить 100% и auto в атрибут height тега <video, это, вероятно, исправило бы это.Мог бы что-то взломать вместе в JavaScript, но мое внутреннее чувство состоит в том, что я делаю что-то глупое.

Заранее благодарим за любые советы / помощь!

Ответы [ 3 ]

0 голосов
/ 24 мая 2018

Если я понимаю, это решение: 

video {
  width:100%;
  height:auto;
  max-height:100%
}

.video-content {
  height:100vh;
}
<div class="video-content">
  <video controls> <!-- width="320" height="200" -->
    <source src="http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4" type="video/mp4" />
  </video>
</div>
0 голосов
/ 24 мая 2018

У меня есть решение, которое делает именно то, что я хочу, до сих пор не знаю, является ли это лучшим решением или нет, но все равно публикую здесь.Решение состоит в том, чтобы просто добавить запрос @media: - 

@media screen and (max-height: 320px) {
    video { height: 100%; }
}

. Медиа-запрос меняет максимальную высоту 320 пикселей на 100%, только если браузер имеет определенный размер.

0 голосов
/ 24 мая 2018

измените тег видео с помощью этого: 

    <video style="max-height: 100%;" controls>
...