video要素がFirefox以外で読み込まれないとき

ウェブ制作の仕事でちょっとつまづいたので、備忘録も兼ねて書いておこうと思う。最近は仕事がウェブ関連ばかりだけど、IE対応が必須要件じゃなくなってきて、本当にありがたい。

ウェブページ内で、YouTubeの埋め込みではなくて、ネイティブの動画ファイルを再生するときは、video要素を使う。

<video class="inline-video" autoplay loop playsinline muted poster="video-alt-image.jpg">
	<source src="video1.webm" type="video/webm">
	<source src="video2.mp4" type="video/mp4">
</video>

基本的は以上のコードで、上のsource要素から優先的に読み込まれ、いずれの動画も再生できない場合はposter属性で指定した画像が表示される、というワケである。

video要素で指定する属性のうち、僕は最初、playsinlineとmutedを省略していた。そのため、Firefoxでは再生されるのだが、ChromeやiOS Safariでは再生されない（posterが表示されてしまう）という現象が発生した。

四苦八苦して、いろいろ検索してみたところ、playsinline属性とmuted属性がないと、ブラウザによっては再生を始めてくれないということがわかった。

それにしても、最近は動画を画面幅いっぱいに埋め込んだサイトが多くなった。フルHDくらいの解像度でも、WebM(VP9)を使えば、mp4(h.264)の3分の2くらいの容量で同じ画質を実現できる感じがする。

もっとも、モバイル回線の大容量化、ギガの低価格化によって、今までのような“軽量化こそウェブ制作の最優先事項”という時代はもう終わりなのかもしれない。そうは言っても、Google PageSpeedのスコアがどうしても気になってしまうこともあるけど、一方で、読み込み速度が検索順位に影響している感じは、ぶっちゃけしない。