Chrome HTML5 Video volteando retrato hacia los lados

Question

Estoy construyendo un sitio para mostrar videos grabados desde un iPhone. El video viene en orientación vertical, a 288x352. Safari muestra este video muy bien, pero en Chrome, el video se cambia al modo horizontal, 352x288. Mi cabeza está de costado. :-(

Aquí está la página en cuestión: http://aaron.tiberiuslog.com/B4F4CC56-172E-4D84-9656-BE04E6E475A0

Y aquí está el vídeo en sí, si eso ayuda

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

He intentado usar la vainilla HTML5 marcado, y ahora han añadido. VideoJS, aunque no hizo ninguna diferencia para este problema.

Actualización: Tengo media respuesta a m y pregunta ahora. Parece que es necesario que haya alguna opción de codificación establecida en el dispositivo para garantizar que se respete la orientación adecuada en todos los visores, incluidos VLC y Chrome (por ejemplo). Esta pregunta no tiene las patas para obtener esa respuesta, así que I've created a new one. ¡Esperamos formar la solución adecuada para este problema!

Actualización 2: ¡He descubierto la respuesta! The other question I posted led me to the technique for correctly encoding the video on iOS.

Answer 1

Consulte this post en los foros de soporte de videojs, que sugiere que probablemente se deba a la forma en que el iPhone codifica el video ya que incluye información que QuickTime puede leer pero otros jugadores no pueden. El consejo es codificar el video en iOS usando AVFoundation y rotarlo. Presumiblemente, otra biblioteca de codificación estándar también funcionaría.

Answer 2

Es un poco feo, pero podría agregar -webkit-transform:rotate(90deg); al atributo style de la etiqueta video. Sin embargo, esto también gira tus controles.

Acabo de transmitir el video de AWS a través de VLC Player, y el video parece girar 90 grados en sentido antihorario. Apple usa una bandera de metadatos para indicar la rotación en lugar de simplemente grabar video en una orientación diferente. Desafortunadamente, muchos jugadores/navegadores ignorarán esta bandera, incluidos VLC y Chrome.

Para solucionar el problema, debe girar el archivo de video real. Puede hacerlo abriendo en VLC Player, vaya al Tools > Effects and Filters. Haga clic en Video Effects luego Geometry. Habilite Transform y seleccione Rotate by 90 degrees en el menú desplegable. Haga clic en OK y luego cierre VLC. El video ahora debería estar listo, aunque no puedo probarlo en tu página.

Es posible que deba eliminar la etiqueta de metadatos de rotación para que Safari no gire más el video. Nuevamente, no he probado esto todavía.

Answer 3

Este problema se ha corregido desde el 2 de junio de 2016. Consulte el error de Firefox here. Este problema no es cómo Iphone codifica el video, sino que está relacionado con Firefox que admite archivos mp4 pero no con los metadatos de orientación en los archivos mp4.

De todas formas, se puede comprobar si el archivo de vídeo tiene rotación usando: exiftool -Rotation video.mp4

Nota: Para cualquier persona, que aún ve este tema, sin embargo, esta actualización no está disponible como mi última actualización no hizo correctamente automático -oriente el videoCon una mirada cuidadosa, la página de errores dice que el objetivo es mozilla49.