今さらのvideoタグに関する備忘録

前はコピペとかで作ってたけど、最近はだいたいのブラウザでmp4で動画見れるからvideoタグはずっとシンプルに使える。 だからコピペせず自分で書いて気づいたことをつらつらと。

width指定

htmlタグに幅指定しないと再描画されるのがけっこうはっきり見える。なので、videoタグに幅指定はほぼ必須。

opacity

videoタグにcssのopacity効きません。フェードインさせたかったら動画に入れるか、擬似要素とかでマスクをかける。

モバイル

プロパティのautoplayは効かない。ページ開いただけで勝手にダウンロードされたら困りますものね。

背景などで使用している場合はdisplay: none;してcssのbackground-imageでposter画像を出すのがよさそう。上述の理由でopacity使えないのと、visibility: hidden;を使った場合なぜか動画プレイヤーの再生ボタンが中途半端に出てきたのでdisplay: none;一択かなと。