Chrome HTML5 Видео переворачивание портрета в сторону

Я создаю сайт для показа видео, записанного с iPhone. Видео поставляется в портретной ориентации, 288x352. Safari отображает это видео очень хорошо, но в Chrome видео переводится в ландшафтный режим, 352x288. Моя голова боком.: - (

Вот страница, о которой идет речь: http://aaron.tiberiuslog.com/B4F4CC56-172E-4D84-9656-BE04E6E475A0

А вот само видео, если это помогает.

http://tiberiuslog.s3.amazonaws.com/output_D7DB78A9-8019-4D09-9B22-EB8738F844BB-2380-000001530B13BE09.mov

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

Обновление. У меня есть половина ответа на мой вопрос. Похоже, что на устройстве должна быть установлена некоторая опция кодирования, чтобы обеспечить правильную ориентацию на всех зрителях, включая VLC и Chrome (например). У этого вопроса нет ног, чтобы получить этот ответ, поэтому Я создал новый. Надеемся, мы соберем правильное решение для этой проблемы!

Обновление 2: я нашел ответ! Другой вопрос, который я поставил, привел меня к методике правильного кодирования видео в iOS.

Ответ 1

Смотрите этот пост на форумах поддержки videojs, который говорит о том, что, вероятно, это связано с тем, как iPhone кодирует видео, поскольку он содержит информацию, которую QuickTime может но другие игроки не могут. Совет заключается в том, что вы кодируете видео на iOS, используя AVFoundation и вращайте его. Предположительно, будет работать и другая стандартная библиотека кодирования.

Ответ 2

Это немного уродливо, но вы можете добавить -webkit-transform:rotate(90deg); в атрибут style тега video. Тем не менее, это также поворачивает ваши элементы управления.

Я просто передал видео с AWS через VLC Player, и видео, похоже, повернуто на 90 градусов против часовой стрелки. Apple использует флаг метаданных для указания вращения вместо простой записи видео в другой ориентации. К сожалению, многие игроки/браузеры игнорируют этот флаг, включая VLC и Chrome.

Чтобы устранить проблему, вам необходимо повернуть фактический видеофайл. Вы можете сделать это, открыв его в VLC Player, перейдите к Tools > Effects and Filters. Нажмите Video Effects, затем Geometry. Включите Transform и выберите Rotate by 90 degrees в выпадающем меню. Нажмите OK, затем просто закройте VLC. Теперь видео должно быть готово, хотя я не могу проверить его на вашей странице.

Теперь вам может потребоваться удалить тег метаданных вращения, чтобы Safari не поворачивал видео дальше. Опять же, я еще не тестировал это.

Ответ 3

Эта проблема исправлена с 2 июня 2016 года. Пожалуйста, обратитесь к ошибке firefox здесь. Эта проблема не в том, как Iphone кодирует видео, но связан с firefox, поддерживающим файлы mp4, но не с метаданными ориентации в файлах mp4.

В любом случае, можно проверить, имеет ли видеофайл Rotation с помощью: exiftool -Rotation video.mp4

Примечание: Для тех, кто все еще видит эту проблему, это обновление еще не доступно, так как мое последнее обновление не правильно автоматизировало видео. При внимательном рассмотрении страница с ошибкой говорит, что целью является mozilla49.