videoタグのメモ

Shopifyがらみのきっかけでvideoタグを調べたためメモとして。

前提

• Slickを使ったスライダーを改造して、HTML5のvideoタグを使って動画を表示させている
• ラッパーとしてdivタグを設置

結論

• poster属性の確認方法が不明(調べた範囲方法では環境によって見え方が違ったため)
• poster属性を設定しても見た目が悪い(左上起点で設定画像が表示されるため)
• 背景色や背景画像の設定してもそれが表示されるかは環境次第(poster属性を設定している場合、一瞬だけ背景色が見える場合がある)

メモ

poster属性の確認方法

poster属性を記述してvideoのautoplayを記述しなければ(=自動再生させない)、poster属性の状態を確認できる。

後述する背景色に関しては、poster属性と自動再生をなしにすると動画の最初のフレームが表示されてしまうため確認できず。

しかし、Shopifyの「現在のテーマ」で表示されるプレビューとは見栄えが違っていて、poster属性はCSSの影響を受けず、背景色や背景画像は確認できた。

この点から一部の環境では効果がないと思われるが、実際にユーザーが目にするのはどちらか、あるいはまた別の状態なのかが明確にはわからない。

poster属性の画像のサイズを変更する

• css – Make HTML5 video poster be same size as video itself – Stack Overflow

video {
  object-fit: cover;
}

検索で上記の情報が見つかるが、poster属性というかvideoタグ自体に対して作用するので趣旨が少々違うかもしれない。

実際に実行した場合、左上を起点に配置されるため表示される画像の状態がコントロールできず非常に見た目が悪い場合がある。背景画像のbakcground-position的な操作ができないのが問題。

動画が表示されない際の背景色を設定する

• css – Change background-color of html5 video element – Stack Overflow

video {
  background-color:#000;
}

Shopifyのプレビューの場合、videoタグに背景色を指定してもなぜか高さが足りなくなったので、以下のようにラッパー要素に設定する必要があった。

• ラッパー要素をheight:100%;にしてbackground-colorを設定する

Shopifyのプレビューの状態をユーザーも目にするのかどうか不明。

poster属性を設定した状態でのプレビュー表示があまり良いものではないため、クライアントを安心させるためだけに使うということになるかもしれない。

結び

poster属性の確認方法がわからないのが問題です。

見つけた情報では背景色を確認できず、しかし背景色設定の情報が見つかった以上誰かがどうやってか確認したことは確かなのですが。

いずれにせよ環境によって表示が違うならば、自動再生停止では一部しか確認できていないことになり、そうなりますと確認方法は不明と言わざるを得ません。

仮にposter属性の画像が表示されたとしても見栄えの悪い状態になるようですし、これなら設定しない方がまだ良いのではと考えています。