Videoausrichtung ist falsch auf FireFox

Question

Ich habe html5 Video-Tags von Videos. Auf Chrome ist alles gut, auf Firefox die Ausrichtung der Landschaft Videos ist falsch ...

Auch versucht mit video.js, keine Änderung.

Ich lese, dass dies ein Problem ist, weil die Videos in iOS entstanden sind.

so 2 Fragen: 1. Wie kann ich dieses Problem noch überwinden. Wirklich gibt es keine Lösung? 2. (aus Neugierde) - Wie gelingt es Chrom, dies zu überwinden?

Beispiel einer URL (scrollen ein wenig in den Kapiteln nach unten eine vertikale Video zu sehen):
http://www.letsfeedme.com/moments/55802f142f2dad3c008b4575-Balsamic-Vinegar-%22Caviar%22

Answer 1

Da das Problem ist mit einigen iOS spezifischen Kodierungsoptionen, die viele nicht-Apple-Spieler nicht, die einfachste Lösung, lesen kann ich von zu TRANCODE denken kann, und drehen Sie das Video.

, die bereits im ach so viele Stellen im Internet und hier bei SO ... zB diskutiert wurde:

Video orientation using video.js

HTML5 mp4 video with firefox resizing video

Chrome HTML5 Video Flipping Portrait Sideways

http://help.videojs.com/discussions/problems/1508-video-orientation-for-iphone-wrong

Answer 2

Ich vermute, dass Chrome die width="360" und height="640" Attribute Ihrer <video> Tags respektiert, während Firefox nicht. Wenn ich eines Ihrer Videos herunterladen und es in Media Player Classic wiedergeben, ist die Ausrichtung erneut falsch. Aber genau wie in Webbrowsern gibt es Inkonsistenzen: Das gleiche Video, das im VLC-Player geöffnet wird, wird mit der richtigen Ausrichtung wiedergegeben.

Ich würde empfehlen, dass Sie, wenn Sie können, die Videos mit einem (kostenlosen) Programm namens AVIdemux neu codieren. Ich habe es gerade in einem deiner Videos ausprobiert und es hat mit minimalem Aufwand gut funktioniert. Als Bonus hat es dein Video beträchtlich verkleinert, mit nur minimalem Qualitätsverlust.

Hier sind die Schritte:

1. herunterladen Avidemux von http://www.fosshub.com/Avidemux.html
2. Installieren und starten Sie Avidemux
3. Go-Menü Datei und wählen Sie Öffnen. Wähle das Video aus, um es neu zu codieren.
4. Weiter zu Video-Menü und wählen Filter
5. wählen Transformieren> Drehen (Doppelklick)> Drehen um 270 Grad (OK)
6. die Schaltfläche Vorschau klicken, um das Ausgangs
7. Klicken Sie auf die Schaltfläche Schließen
zu überprüfen
8. im Hauptfenster unter Videoausgang, MPEG4-AVC (x264)
9. unter Ausgabeformat wählen, wählen MP4 Muxer
10. das Speichern Video-Symbol klicken und im angezeigten Fenster einen Dateinamen ein und klicken Sie auf die Schaltfläche Speicher.

Dann müssen Sie Ihr Video erneut hochladen.

Answer 3

Wahrscheinlich nicht wirklich eine tragfähige Lösung, sondern eine CSS-Regel hinzufügen, wie

video { 
-moz-transform: rotate(90deg); 
} 

zumindest die Videos in der richtigen Orientierung in Firefox abspielen würde.Probleme:

• Videos, die wieder in der richtigen Orientierung, ohne die Regel spielen in der falschen Ausrichtung mit der Regel spielt zurück

• das Video-Steuerelemente auch

• die Plakate gedreht erhalten wird in der falschen Ausrichtung angezeigt

Ich sehe Ihre Website video.js verwendet. Es könnte sich lohnen, https://github.com/xbgmsharp/videojs-rotatezoom zu betrachten?

Answer 4

I read that this is a problem because the videos originated in iOS.

Alle Videos, die mit mobilen Geräten aufgezeichnet wurden, enthalten Rotations-Metadaten, einschließlich derer von iOS- und Android-Geräten. Es kann 4 Werte annehmen: 0 (gekippt links), 90 (Hochformat), 180 und 270:

On chrome all is good, on firefox the orientation of landscape videos is wrong...

Firefox und IE 10 die einzigen wichtigen Browsern nicht unterstützt die Rotation von Metadaten sind. Hier Firefox im Vergleich zu Chrome:

Die neueste Version, Firefox 42, wie heute noch nicht unterstützt. IE11 und Edge 12,13 unterstützen es.

Liste des mobilen/Desktop-Player, der die Rotation info unterstützen: https://addpipe.com/blog/mp4-rotation-metadata-in-mobile-video-files/

How can I still overcome this issue. Really there is no solution?

Siehe this answer für die Lösung, im Grunde müssen Sie:

1. drehen Videos FFmpeg mit (so Firefox und andere Browser, die die Rotations-Metadaten nicht unterstützen, zeigen das Video ordnungsgemäß an.)
2. r eMove die Rotation Metadaten (so dass andere Spieler das Video nicht drehen, da sie bereits durch FFmepg gedreht worden ist)

Bilder mit freundlicher Genehmigung von: https://addpipe.com/blog/mp4-rotation-metadata-in-mobile-video-files/