video要素がFirefox以外で読み込まれないとき
2021年9月28日
日記
ウェブ制作の仕事でちょっとつまづいたので、備忘録も兼ねて書いておこうと思う。最近は仕事がウェブ関連ばかりだけど、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のスコアがどうしても気になってしまうこともあるけど、一方で、読み込み速度が検索順位に影響している感じは、ぶっちゃけしない。
91
ありません
コメント
おや、コメントがまだありません。