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

Question

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

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

Например:

(Видео 1) - Рамка ширина: 1280.

(Видео 2) - Ширина рамы: 480. Высота рамы 360.

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

Как и Youtubes, все видео имеют одинаковую ширину и высоту, я хочу, чтобы это было как thiers.

Чтобы дать вы, ребята, больше идеи того, что я имею в виду, я дал ссылку на файл HTML: https://mega.nz/#!oMpwDQ7a!r5wO1GfG0c5Gj5dd5xE8pk1Udl5GxoaQ37pDwLAgcXk .

Примечание: я пробовал почти все, изменил код CSS 1 миллион раз, попробовал сторонние приложения, ничто не дает мне то, что я хочу.

С уважением, спасибо.

Answer 1

Для того, чтобы все видео были одинакового размера, вам нужно либо растянуть видео (как правило, плохо, не делайте этого), либо добавить бары в верхнюю/нижнюю часть или стороны, чтобы показать исходные размеры видео. С видео html5 все, что вам нужно сделать для достижения этого, - это применить ширину и высоту к тегу видео.

<style type="text/css"> 
video{width: 500px;height:300px;position:relative;margin-top:-20px;} 
video:hover{cursor:pointer} 
</style> 

Попробуйте это в исходном файле, то это вызовет все ваши видео, чтобы быть того же размера, и будет просто добавить бруски к файлам, чтобы все они занимают то же место (обратите внимание, как он добавляет к сверху/снизу на одном, а стороны - на другом).

Даже youtube делает это, если у вашего видеофайла разное соотношение сторон (вы увидите черные полосы на этих видеороликах youtube, например: https://www.youtube.com/watch?v=2Or1Ui7yM7Q это видео было снято на квадратном мониторе и не является широкоэкранным).