HTML5でvideoタグでmp4動画ファイルを配置しているサイトもかなり多数見かけるようになりました。

mp4動画ファイルについての重要度は、画質とファイルサイズ、の2点が最優先されるのではないでしょうか。

 

今回の事例では、iPhoneのsafariで見たときのみ、videoタグ内に配置された動画が何故か上下逆さまになる不具合現象とその解決方法です。

 

予想と推察

AndroidやWindows系のブラウザでは正常に表示されていたので、出力動画自体に問題があるのでないかと予想しました。

動画はiPhone撮影動画をPowerDirectorという動画編集ソフトでmp4出力したファイルです。

恐らく、この出力形式にsafariまたはiＯSでは逆に認識されていると予測して、別の出力方法を探します。

 

ただ、ｍｐ4ファイル形式以外でもファイルサイズが肥大する上改善されず、なぜか動画ファイルが逆さに再生され続けます。

 

道程

エンコード仕様に問題があれば、PowerDirectorでの出力ファイルはすべて上下テレコになります。

とても困りましたが、出力方式に通常のMP4やMP2、WMVなどのほかに”オンライン”なる項目があり、Youtube形式やfacebook用などという謎のフォーマットがあります。

 

youtube形式な大丈夫だろうと考えましたら、ファイルサイズがmp4などと比べ大きくなるため、断念。

 

そのとなりに”デバイス”タグがあったので、のぞいてみると”Apple”なる出力フォーマットがありました。

ファイルサイズもかなり軽量化できるので、こちらで出力することにしました。

 

事案解決

Appleデバイス形式でmp4を出力したところ、今度はＷｅｂページ内の動画が上下正常に表示されました。

恐る恐るＡndroidで確認するも、こちらも問題なし。

こうして、この事案は無事に解決することができました。

もしかすると、端末などによっては逆さになっているかもしれませんが、その時はその時で最善の対処方法を探し出すだけさ。

 

結局のところ、PowerDirectorはUIや使い方が非常に簡略化されており、多少複雑な機能を利用したい場合は、サブスク契約型の購入が必要になります。あまり使用しない場合はサブスク型のアプリケーションはコストパフォーマンスがかなり低く、ユーザーにはメリットがありません。

 

やはり多機能でUIはややプロユースで複雑なのですが、

DaVinci Resolve

を使用していたほうが良いかもしれません。
無料版でもかなりの機能が利用できるので、せっかく購入したのですがPowerDirectorは起動やレンダリングも時間がかかり、どうしてもメリットは書き出しファイルサイズの予測機能だけのような気がする。