インターネット環境が安定するにつれてサイトの演出もリッチなものになってきました。2017年頃からでしょうか、トップページに背景いっぱいに動画を流すようなサイトが流行り始めた気がします。
そんな動画を設置するためのタグが「video」タグですね。
videoタグの基本的な書き方
まず基本。画像と同じように、srcでファイル名を指定します。2020年現在ではほとんどのブラウザで「mp4」が対応しているので、mp4ファイルのみで十分だと思います。
もし何らかの理由で複数の動画ファイルを予備として指定する、また動画が再生されなかった時に表示させる文言を指定する場合は、子要素として以下のように指定します。
こうしておけば、まず「mp4」を読み込み、読み込めない場合は「ogg」、それでもダメなら「webm」、全て再生できなかった場合はエラーメッセージを表示させることができます。
videoタグで指定できるいろんな属性
videoタグは属性でいろんな動作を指定できます。属性の指定方法は「input」の「checked」のように、以下のように書きます。複数指定も可能です。
autoplay
「autoplay」が指定されていると、動画ファイル読み込み完了後、自動再生されます。Chromeなど、一部ブラウザでは「muted」も一緒に指定していないと動作しないことがあるので、注意が必要です。
muted
音声をミュートする指定です。上記「autoplay」と併せて指定しておくと良いかと思います。
controls
再生、音量、シーク、ポーズといった各コントロール機能を表示させます。
width、height
CSSと同様、横幅と高さを指定できます。pxのみの対応なので、これはCSSで指定した方が良いですね。
loop
映像が終了したときに自動的に先頭から再生させるための指定です。
preload
動画ファイルの読み込みに対する指定です。autoplayの指定がある場合は有無を言わさず動画の読み込みが必要ですが、ユーザーが再生した場合はその限りではありません。「preload=”metadata”」を指定しておけば、ページ読み込み時には最低限のデータのみ読み込み、再生時に動画ファイル全体を読み込む、という動作となり、負荷軽減に繋がります。
他に「preload=”none”」と「preload=”auto”」がありますが、どんな時に使うのか不明です。
poster
動画再生前に表示させる画像を指定できます。「poster=”画像ファイルパス”」という書き方で指定します。
動画をjavascriptで制御
HTML側での制御が豊富にあるので普通に使う分にはHTMLだけで十分なのですが、javascriptで制御も可能です。個人的によく使用するのがこちら。
movie = document.getElementById('video'); movie.playbackRate = 0.7; movie.controls = false;
このjavascriptによるの指定で、再生速度を70%にして遅く再生、コントローラーの部分を非表示としています。動画を背景に敷いて再生させておく時とかによく使用します。
その他、コントローラーのボタンを独自に設置するような場合はこれらのようなメソッドが用意されています。
Element.play(); /* 再生 */ Element.pause(); /* 一時停止 */ Element.load(); /* 動画読み込み */ Element.duration(); /* 動画全体の時間を取得 */ Element.currentTime(); /* 現在の再生時間を取得 */ Element.currentTime = 0; /* 再生時間を先頭に戻す */
何かのアクション時に発火させる、といった時はこちら。
Element.addEventListener(‘play’); /* 再生時に実行 */ Element.addEventListener(‘pause’); /* 一時停止で実行 */ Element.addEventListener(‘timeupdate’); /* 再生時間が変更されたら実行 */ Element.addEventListener(‘volumechange’); /* ボリュームが変更されたら実行 */ Element.addEventListener(‘ended’); /* 動画終了時に実行 */
以上、VIDEOタグのに対するHTML、CSS、javascriptでのいろんな指定についてでした。