11

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 : 答えを発見しました! 私が投稿したもう 1 つの質問は、iOS でビデオを正しくエンコードするためのテクニックにつながりました。

4

3 に答える 3

5

videojsサポートフォーラムのこの投稿を参照してください。QuickTimeは読み取ることができるが他のプレーヤーは読み取ることができない情報が含まれているため、iPhoneがビデオをエンコードする方法に依存している可能性があります。アドバイスは、 AVFoundationを使用してiOSでビデオをエンコードし、回転させることです。おそらく、他のいくつかの標準エンコーディングライブラリも機能するでしょう。

于 2012-11-07T01:03:50.130 に答える
4

少し見にくいですが、タグ-webkit-transform:rotate(90deg);のstyle属性に追加できます。videoただし、これによりコントロールも回転します。

VLC Player を介して AWS からビデオをストリーミングしたところ、ビデオが反時計回りに 90 度回転しているように見えます。Apple はメタデータ フラグを使用して、単純にビデオを別の向きで録画するのではなく、回転を示します。残念ながら、VLC や Chrome など、多くのプレーヤー/ブラウザーはこのフラグを無視します。

この問題を解決するには、実際のビデオ ファイルを回転させる必要があります。これは、VLC Player で開くことで実行できますTools > Effects and Filters。Video Effects次に をクリックしGeometryます。有効にして、ドロップダウン メニューからTransform選択します。Rotate by 90 degreesクリックしOKて、VLC を閉じます。あなたのページでテストすることはできませんが、ビデオの準備ができているはずです。

Safari がビデオをさらに回転させないように、回転メタデータ タグを削除する必要がある場合があります。繰り返しますが、私はまだこれをテストしていません。

于 2012-11-10T14:13:54.640 に答える