Chrome瀏覽器HTML5視頻翻轉縱向

我正在構建一個網站來顯示從iPhone錄製的視頻。視頻以288x352縱向排列。 Safari很好地顯示這個視頻，但是在Chrome中，視頻被翻轉爲352x288的橫向模式。我的頭是側身。 :-(Chrome瀏覽器HTML5視頻翻轉縱向

這裏是有問題的網頁： 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，雖然它對這個問題沒有任何區別

更新：我有一半的答案m現在問題。似乎需要在設備上設置一些編碼選項，以確保所有觀衆（包括VLC和Chrome）都能正確定位。這個問題沒有得到答案，所以I've created a new one。希望我們能夠爲這個問題提供適當的解決方案！

更新2：我發現了答案！ The other question I posted led me to the technique for correctly encoding the video on iOS。

來源

2012-09-19 Aaron Vegh

請參閱this post關於videojs支持論壇的建議，這可能與iPhone編碼視頻的方式有關，因爲它包含QuickTime可以讀取但其他播放器無法讀取的信息。建議您使用AVFoundation對iOS上的視頻進行編碼並旋轉。推測一些其他標準編碼庫也可以工作。

來源

2012-11-07 01:03:50

我想你有部分功勞，但對我來說還不是一個完整的解決方案。我可以看到它如何與AVFoundation編碼視頻的方式相關，但我不知道如何改變它。我想這意味着我正在看另一個問題。 :-( –

這有點難看，但您可以將-webkit-transform:rotate(90deg);添加到video標記的style屬性中。但是，這也會旋轉您的控件。

我剛剛通過VLC播放器從AWS流式傳輸視頻，視頻似乎逆時針旋轉了90度。 Apple使用元數據標誌來指示旋轉，而不是簡單地以不同的方向錄製視頻。不幸的是，許多玩家/瀏覽器都會忽略這個標誌，包括VLC和Chrome。

要解決此問題，您需要旋轉實際的視頻文件。你可以在VLC Player中打開它，去Tools > Effects and Filters。點擊Video Effects，然後Geometry。啓用Transform並從下拉菜單中選擇Rotate by 90 degrees。點擊OK，然後關閉VLC。視頻現在應該已經準備就緒，儘管我無法在您的網頁上進行測試。

您現在可能需要刪除旋轉元數據標記，以便Safari不會進一步旋轉視頻。再一次，我還沒有測試過。

來源

2012-11-10 14:13:54 MTCoster

此問題已於2016年6月2日解決。請參閱firefox錯誤here。這個問題不是iPhone如何編碼視頻，而是與支持mp4文件的Firefox相關，但與mp4文件中的方向元數據無關。

不管怎麼說，一個可以檢查，如果視頻文件使用具有旋轉：exiftool -Rotation video.mp4

注：對於任何人，誰仍然看到這個問題，本次更新還沒有可以作爲我的最新更新沒有正確的汽車 - 將視頻方向。仔細看，錯誤頁面顯示目標是mozilla49。

來源

2016-07-06 15:59:32 saurabheights

Chrome瀏覽器HTML5視頻翻轉縱向

回答

相關問題