iPhoneでvideoタグで指定してた動画が表示されない

webサイトの背景に動画を使いたく、videoタグを使って

html
1<video autoplay="autoplay" loop="loop" class="video">
2  <source src="/assets/movie.mp4">
3  <source src="/assets/movie.m4v">
4</video>

このように記述しているのですが、パソコンだと動画は問題なく表示されるにも関わらず、iPhoneだと真っ白で何も表示されません。何が間違っているのか、どなたかご教示いただけると幸いです。

よろしくお願いいたします。

defghi1977

2018/01/23 10:18

iPhone環境ではvideo要素による動画再生には色々と厳しい条件があるそうです. 「iphone video autoplay」等で検索すると様々な情報がヒットします.

othersight

2018/01/25 15:45

webサーバと、動画を生成したツール(エンコーダ等)を確認させていただけませんか?

ttktt

2018/01/26 02:53

@othersightさん、本番環境のwebサーバはNginx+Unicornで、開発環境のwebサーバはpumaです。動画はiMovieにてエンコードしました。開発環境でもiPhone simulatorで開くと動画が再生されません。

行動規範の内容に同意します

回答2件

iPhone等のモバイルデバイスのブラウザでは、動画の再生時にファイル全体をHTTPで取得するのではなく、HTTPリクエストヘッダにRangeヘッダを加えて、ある程度の長さに区切って別々にダウンロードするようになっています。(詳細はAppleの開発者情報に説明があります。)

よって、webサーバ側で部分ダウンロードに対応していないと、モバイルブラウザの<video>要素で動画が再生できない、ということになります。具体的には、次のような要領でwebサーバ側がモバイルブラウザから指定された範囲の動画データを返すようにする必要があります。(HTTPの部分ダウンロードの詳細についてはMDNの記事をご覧ください。)