[不具合対応] Webサイトを作ったが、スマートフォンだけ動画が見れない事象についての話

またまた人助けをしてしまった、ユゲタです。 毎日夜9時半頃には、寝床に入って、朝5時頃起きるのが習慣なんですが、 寝ようかな〜と思っていた所、保育士をしている娘から、LINEが届きました。 どうやら娘の学生時代の先輩が、最近フリーランスWEBデザイナーになったらしく、 その人が作ったホームページで、動画ファイルをvideoタグで設置したのですが、スマートフォンだけでその動画が正常に表示されなくて困っているのだそうです。 その人から連絡が行くので（LINEで）助けてあげて欲しいとのことでした。

事象を聞いた時に何を思ったか？

エンジニアとして、こういう障害を聞くと、原因を知りたくて仕方が無くなります。 もちろん、娘の大事な友だちなので、ちゃんと解決してあげたいというのもあるので、話を聞いて症状を聞いてまず思ったのが、 「videoタグの属性が適正に設置できていないのでないか？」 という点です。 これは、自分でも以前に似たような事でつまづいた事があったので、ソレかな〜と、思ったんですが、実際にサイトを見たら、問題なく設置されていました。 具体的には、playinlineがセットされているか？とか、音声付きファイルでautoplayをしようとした場合に、muted設定をしていないと、正常に動作しないとか、です。 ポイントとしては、他のブラウザでは正常に表示されているという事ですね。

不具合を追求

送られてきたURLを再度確認して、確かにパソコンのブラウザ（GoogleChrome）では正常に動画が表示されていて、再生もできるのに、 スマートフォン（iPhone）で見たら、再生出来ませんマークが表示されていない状態を確認しました。 こんな感じの表示です。 パソコンのブラウザという言い方が気になり、iPhoneでは、もちろんsafariブラウザを見ていたんですが、手元で使っているMacBookのsafariで見てみたら、 同じ様に動画がエラーになっていました。 どうやらスマートフォンで起きるエラーではなく、safariで起きているエラーだったようです。 少し原因に近づきましたね。要するにこれでデバッグコンソールが簡単に見ることができます。 ※iPhoneでも、safariのデバッグコンソールをwifi越しに見ることはできるんですが、いつもめんどくさくてよほどでなければ見ないんですよねwww そして、HTMLタグを見ていたらふと動画の拡張子に目が行きました。 ***.mov あれ？mp4って言ってたのに、mov拡張子って、なんだか不思議・・・ 何の動画作成ツールで出力したんだろ？ と思って、その動画をダウンロードして、QuickTimeで表示してみると、次のようなダイアログが表示。 「続ける」ボタンを押すと動画は正常に見ることができるんですが、どうやらファイルが壊れているのかな？と感じ、 VLCプレイヤーのコンテンツ変換モードで、m4v（mp4のvideo部分）に変換してみて、それをHTMLにはめ込んでみると、safariブラウザでも正常に表示されました。

解決編

どうやら、動画ファイルが適正ではなかったようですね。 作り直したm4vファイルと一緒に、困っていた人に返信してあげたら、無事に修正ができたとの返答が来ました。 どうやら、さらに別の人が作った動画をmp4に変換するのによくわからない状態で、変換をしてしまった・・・と言っていたので、コーデック指定が適正ではなくコンバートしてしまったのが原因だったようです。 WEBデザイナーの人で、動画コーデックが苦手な人も多いので、それほど不思議な現象ではなかったんですが、改めて動画に強いユゲタに相談してくれて良かったですね。

最後に

ここまでの時間は5分程度だったので、特に仕事感も無く、世の中の不具合を１つ解決したという、慢心感を持ってその後すぐに熟睡することができました。 良かったな〜、娘とその友達よ！ お父さんは熟睡出来たことに感謝してるぞ！