WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： いっちー
カテゴリー： プログラム >JavaScript

過去にslick.jsを使ってスライドショーの再生・停止ボタンの作り方を紹介しましたが、videoタグではどうやるのだろう？と思ったので、今回はvideoタグで再生・停止ボタンやサウンドON/OFFボタンの作り方を紹介します。

videoタグとは？

videoタグには属性が存在します。まずは下記の属性について紹介します。

• controls
• autoplay
• loop
• poster
• playsinline
• preload

　　

controls

音量調節、再生・停止ボタン、再生位置のバーなどが動画の下部に表示されます。背景に動画を埋め込む場合は、指定する必要がありません。

<video class="video" src="/sample.mp4" controls></video>

autoplay,muted

autoplay属性は、Webページが読み込まれ、動画が再生可能な状態になったら自動再生されます。一部のブラウザなどでは、同時にmuted属性を付与しないと再生されないようです。

<video class="video" src="/sample.mp4" autoplay muted></video>

loop

動画が最後まで再生されると自動的に最初に戻って再生されます。

<video class="video" src="/sample.mp4" loop autoplay muted></video>

poster

動画が再生されない代わりとして表示させる画像を指定することができます。

<video class="video" src="/sample.mp4" poster="images/sample.png"></video>

playsinline

動画を全画面表示せずに再生するために指定します。モバイル対応するために指定することが多いです。

<video class="video" src="/sample.mp4" autoplay muted></video>

preload

あらかじめ動画を読み込んでおくかどうかを指定します。preloadは、以下の3つが適用できます。

• none：事前読み込み禁止
• metadata：長さやファイルサイズのようなメタ情報のみ読み込む
• auto：初期値　動画ファイルを事前読み込みする

<video class="video" src="/sample.mp4" autoplay muted preload="auto"></video>

サウンドボタンの作り方

それではサウンドボタンについて紹介します。下記コードペンの記述で実装することができます。
JavaScriptの処理については、toggleAudioという関数を定義して、クリックするたびにビデオのmuteプロパティを反転させています。

See the Pen
video音量ボタン by qam (@qam)
on CodePen.

再生・停止ボタンの作り方

次は再生・停止ボタンについて紹介します。下記コードペンの記述で実装することができます。
JavaScriptの処理については、togglePlayPauseという関数を定義して、IF文でvideo.play()やvideo.pause()の表示を判別して処理をしています。最後にボタンがクリックされたらtogglePlayPause関数が呼び出されるような処理をしています。

See the Pen
video再生・停止ボタン by qam (@qam)
on CodePen.

まとめ

videoタグの再生・停止ボタンや音量ボタンの作り方を紹介しました。
特にメインビジュアルに動画を入れるは、コントロールパネルを非表示にすることが多いので、「再生・停止ボタンだけ表示する」ことが多いかと思いますので、ぜひ活用してみてください。