videoタグを使用した動画がAndroidで再生されない沼にハマった話

皆さんこんにちは。
タイトル通り、videoタグで読み込んだ動画（今回はmp4形式の動画でした）がAndroidでまっっったく再生できずに時間を溶かしに溶かしたときのお話です。

結論としては、エンコードすることでAndroidで無事再生できるようになりました💡
エンコードにたどり着くまでに色々と試したこともあるので、今回はそのときのお話をします😊

動画が再生されない状況

お客様からご提供いただいたmp4形式の動画ファイルをサーバーにアップロードし、いつも通りHTML内にvideoタグを使用して表示させていました。
各PCブラウザ、iPhone、iPadで正常に表示されています。よしよし。
ところがAndroid…以下の画像のような感じでまったく再生できません😵

手あたり次第に解決策っぽいのを試してみる

幸運なことに今までこういった現象に遭わなかったのでどうしたものかと以下の方法を試していきました。
今回は全部うまくいきませんでしたが、もしかしたらどなたかの手助けになるかもしれないので記していきます…📝

1. まずはおまじない
   videoタグに以下の記述を追加します。Android端末によってはこの記述がないと再生されないみたいです。

   onclick="this.play();"

   Copy
2. Basic認証を外してみる
   ちなみにBasic認証がかかっていても、.htaccessに記述を追加することで再生できるようになるみたいです。

   <Files ~ " \.(mp4|webm|必要な動画ファイル分足していく|...)$">
    Satisfy any
    Allow from all
   </Files>

   Copy
3. sourceタグからtype属性を外してみる
   type属性があるとタップしても反応しないとかなんとか🤔
4. 動画のコーデックを確認してみる
   H.264／AVC形式のmp4にするといいらしく、この圧縮のデータ方式が違うと見られないようです。
5. mp4boxでmp4ファイルを変換してみる
   mp4のボックス構造が再生できない順序になっていることがあるらしく、これをmp4boxというツールを使用して適切な順序に変換します。
6. 絶対に関係ないけどCSSを変えてみる
   分かってはいましたが全然関係ないようでした。

いよいよどうしよう…

こちらのページを見ている方はお分かりかと思うのですが、「videoタグ　Android　再生できない」とかで調べるとたいていBasic認証が原因って出てくるんですよね。
で上記のように色々試してダメだったので、もう動画をYouTubeにアップロードしてiframeタグ読み込みにしようかなと思っていたところ…！

先輩が「エンコードしてみたら再生されましたよ！」と。

エンコード！！どうやらスマートフォンで表示するのに適した解像度に設定して、書き出しし直さないといけない動画ファイルだったようです。
さらに、この書き出した動画ファイルを元の動画サイズの設定にするとまた再生されなくなったので、サイズの比率は維持したまま小さくしたところ、無事再生可能となりました…！

また動画再生にハマる

上記が解決したあとまたすぐ別件で、
動画がChromeでだけ再生ではなくてダウンロードされてしまうということがありました。どうして…。
これもまた別の先輩が解決してくださいました😢

.htaccessに以下の記述を追記することでブラウザ上での再生が可能になりました！

AddType video/mp4 .mp4

※使用するサーバで記述をしても問題ないかは確認した方がよさそうです。

さいごに

こうして書いてみると思ったより簡単な検証だったかなあとは思うのですが、そのときは調べつつ試しつつ、しかも制作期限は迫りつつなのでとても必死です。
困ったときに助けてくださる先輩がいてくれてよかった…😭
思わぬところでハマるのがコーディングの大変なところでもあり面白いところでもあるのですが、あまりにもハマると途方に暮れますよね。
もっと検索力を上げてスパッと解決できるようにしていきたいです💪