問題
HTML で video タグを貼った場合、動画の最初のフレームをプレビュー画面として表示して欲しい。
これはほとんどの環境でそういう仕様になっているが、iPhone はそうなっていない。
原因
以下でやり取りがある通り、比較的近年になって起こるようになった問題のようだ。
原因は iPhone の video タグの実装で preload に何を指定しても再生するまで動画を読み込まないこと。
にもある通り preload="auto" は「読み込んでも良い」というだけで、別段読み込まなくても良いという解釈ができる。 そのため、iPhoneでは通信量削減のために自動的に動画を読み込まないものと推測される。
preload は auto, metadata, none の値を設定可能だが、「必ず読み込め」という指示はできない。 そのため、実装依存で掲題のような何も表示されない画面が表示されることになる。
対処
#t=0.00001 などを src の末尾に付与する
#t=... は再生する動画の範囲を指定するための構文である。
そのため、これで始点をわずかに開始から動かすことで、強制的に動画を読み込ませるというハックができる。
より細かくは上記を参照。
poster を作成してその画像を poster 属性で指定する
そもそも、動画の最初を自動表示するという機能に頼らず、poster 属性を利用して適切な画像をプレビューとして表示すれば対処できる。