せっかく動画を作れるようになったからさっそくサイトに実装したい！！
では<video>タグを使う方法を勉強しましょう・・・
<video>タグの使い方
今回は動画をサイトで公開する方法として、HTMLで<video>タグを使っていこうと思います。（自分が動画使ったサイト作りたいと思ったきっかけとなったかっこいいサイトもvideoタグ使っていました。）
基本の書きかた
<video src="/動画.mp4"></video>簡単なんですが、このままだと最初の画面が出た切りで再生されていません。ここにvideoタグのいろいろな属性を足していってきちんと再生されるコードを書く必要があります。
<video>タグの属性
controls
これをつけると再生バーや再生ボタンがついて、ボタンを閲覧者に押してもらうことで再生できるようになります。（音があってもそのまま再生されます）
<video src="/動画.mp4" controls></video>autoplay
勝手にページが読み込まれたときに再生するときはautoplay属性をつけます。※音が入ってる動画は再生されないので音声無動画を作るか、muted属性をつけてミュートしないと再生されません。
muted
音をミュートして再生します。（音があるとautoplayが効かない）
<video src="/動画.mp4" autoplay muted></video>playsinline
autoplay, muted, playsinline属性を同時に記述することでスマホでもインライン再生ができるようになります。（インライン再生…スマホでは動画を再生すると強制的に全画面表示になってしまうのを防ぎ、そのままの表示で再生できるようにする。）
loop
自動再生時にループするようになる。（chromeではcontrolsで操作になってても、一応ループしてました。）
poster
サムネみたいな感じで静止画を設定できます。(controls時)
<video src="動画.mp4" poster="サムネ.jpg" controls></video>width/height
widthと heightを設定できます。他のサイトにはpxの単位しか設定できないと書いてありましたが、100%と設定したらそのままレスポンシブになったんですけど、他のブラウザでは危険なのかな？一応％などでレスポンシブ対応させたいならCSSで設定するのが王道なのかもしれません。
preload
preload=”none” 動画ファイルを事前読み込みしない
preload=”auto” 動画ファイルを事前読み込みする(デフォルト)
preload=”metadata” サイズ、トラックリスト、再生時間などのメタデータのみを取得
とくに動画が重要でない場合は表示を早くするためにnone推奨。だが自動再生にしているとnoneにしていても勝手に動画ファイルを読み込んでしまうらしい。
動画作成時の注意
- 動画のファイル形式はmp4
- ファイルサイズは3MB以内
- 自動再生の場合音はいれない方が良い（動画を軽くするためにも）
実装時のコードの書きかた
サイトのトップなどでループする動画の場合。複数の動画が用意できる場合のとき。（ただ、これだとpc,スマホでの動画の出しわけはできていません。）
<video poster="静止画.jpg" loop muted autoplay playsinline>
<source src="動画.webm" type="video/webm">
<source src="動画.mp4" type="video/mp4">
<p>動画が表示されない際のメッセージ</p>
</video>自分がやりたいのは、以下のように複数のvideoタグを、classの操作によってpc,スマホで出しわけるということがしたいわけです。メディアクエリで可能っぽいです。
<video class="pc用動画" loop muted controls playsinline >
<source src="pc用動画.mp4" type="video/mp4">
</video>
<video class="スマホ用動画" loop muted autoplay playsinline >
<source src="スマホ用動画.mp4" type="video/mp4">
</video>
コメント