videoタグの使い方とJavaScriptでオリジナルコントローラーを自作する方法

2020年01月15日／ 2018年2月22日

HTML5から新たに追加されたvideoタグを使う事で、HTMLに動画を埋め込むのがとても簡単になりました。そこで今回はvideoタグの使い方と、JavaScriptで簡単に動画を制御して、オリジナルコントローラーを作る方法を解説したいと思います。

また、videoタグを使うにあたって、Androidにおけるの注意点も記載しています！

videoタグのHTML5への記述の仕方

HTML5への記述の仕方はとてもシンプルです。動画を指定する方法として大きく2種類あります。最もシンプルな記述としては、以下のようにvideoタグとsrcによる動画を指定するだけです。（※ただしこのままでは再生しません。）

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

もうひとつは幅広い種類のブラウザ環境で再生できるようにする為、以下のように複数のフォーマット形式の動画を指定する方法です。

<video>
<source src="sample.mp4">
<source src="sample.ogv">
<source src="sample.webm">
</video>

ただ現在、mp4形式の動画を指定する事で、iPhoneやAndroidを含めたほとんどの最新のブラウザで再生する事ができるので、最低限で良いのであれば、mp4形式だけで良いかもしれません。

videoタグの属性

上記の最低限の記述はvideoタグに動画を指定しただけなので、そのままでは再生することができません。次にあげる属性を指定する事で、動画の自動再生やコントローラーの表示などの基本的な指定をする事ができます。

controls属性

controlsを指定する事で、（ブラウザ毎に用意されている）動画再生を制御するコントローラーを表示する事ができます。

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

poster属性

「poster」でオリジナルの静止画を指定する事で、動画再生前のサムネイルを表示する事ができます。

<video src="sample.mp4" poster="first.jpg"></video>

autoplay属性

その名の通りautoplayを指定するだけで、動画を自動再生するように設定できます。

※ただしchromeやsafariではmuted属性で音が出ないようにしないと自動再生されません。

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

loop属性

「loop」を指定する事で動画をエンドレスに繰り返しループ再生する事ができます。

<video src="sample.mp4" loop></video>

preload属性

「preload」を指定する事で動画再生前にデータを先読みして、実際の再生時の通信ストレスを無くす事ができます。指定できる値としてautometadatanoneの３つがあります。autoは「動画データ全体」をダウンロードするのに対して、metadataは「動画のサイズ、トラックリスト、再生時間等」のメタデータのみダウンロードします。noneは再生前に何もダウンロードしないという指定です。

preloadを記述しない場合は、デフォルト値としてautoが適用される為、動画の再生が重要なコンテンツでは無い場合に、noneを指定する事でユーザーに無駄な負担をかけないという使い方があるでしょう。

playsinline属性

iPhoneなどのiOSでは、動画を再生する際、デフォルトでは別ウインドウが立ち上がって動画が再生するのですが、iOS10からplaysinlineを指定する事でHTMLページ上で再生する事ができるようになりました。

ただしインライン再生させるにはautoplay、muted、playsinlineの３つの属性が必須となります。

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

videoタグの動画の再生範囲を指定する方法

videoタグでは以下のように、動画ファイル名の後に「#t=5,10」などと記述する事で、再生する範囲を「5秒目〜10秒目まで再生」といった形式で、指定することが出来ます。

<video src="sample.mp4#t=5,10" autoplay muted></video>

videoタグをJavaScriptで操作して、オリジナルコントローラーを作る

videoタグではライブラリなど使わなくても、簡単なJavaScript（jQueryも可）だけで、再生や停止などをコントロールする事ができます。

操作方法はとても簡単で、htmlで適当なボタンを作成して、JavaScriptでボタンクリックに対して既存のメソッド（命令）を割り当てるだけです。

今回は簡単な例として「再生」「停止」「頭出し」「音量制御」「音量表示」を操作する方法を解説します。

※音量は0〜１で0.25刻み

HTMLの記述

まずはHTMLの記述です。前述したようにvideoタグによる動画の指定と、制御する為の簡単なボタンを記述します。CSSは適宜調整してください。

<video id="video01" src="movie.mp4"></video>
 <div id="play">プレイ</div>
 <div id="stop">ストップ</div>
 <div id="atama">頭出し</div>
 <div id="vol-up">音量アップ</div>
 <div id="vol-down">音量ダウン</div>
 <div id="mute">ミュート</div>
 <p>音量：</p><div id="vol"></div>

JavaScriptの記述

次にJavaScriptの記述です。今回は初心者にもわかりやすいようにjQueryでの指定方法で記載します。手順としては、videoタグで指定した動画ファイルのIDを変数化した上で、各種ボタンに対して、クリックイベントに対して「play()、pause()」などのメソッドを指定するだけです。

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script>
$(function(){ 
 // 操作対象のvideoを指定
 var video = $('#video01').get(0); 
 // 動画の再生 
 $('#play').click(function(){
  video.play();
 }); 
 // 動画の一時停止
 $('#stop').click(function(){
  video.pause(); 
 });
 // 動画の頭出し（任意の秒へ移動）
 $('#atama').click(function(){
  video.currentTime = 0; // 入れた秒の位置へ移動（例は0秒）
 });
 // 音声ミュート（トグル式）
 $('#mute').click(function(){
  video.muted = video.muted ? false : true;
 }); 
 //音量アップ
 $('#vol-up').click(function(){
  if(video.volume <= 0.75){
     video.volume = video.volume + 0.25;
     $("#vol").text(video.volume);
  }
 }); 
 //音量ダウン
 $('#vol-down').click(function(){
  video.volume = video.volume - 0.25;
  $("#vol").text(video.volume);
 });
 //音量表示
 $("#vol").text(video.volume);
});
</script>

以上でJavaScriptの指定は終わりです。

※音量は１以上になるとエラーになるので、音量アップには条件分岐で0.75以下の場合としています。

最初にvar video = $('#video01').get(0);として .get(0);を入れているのは、jQueryオブジェクトは配列のような形で取得されるため.get(0);などを使って「一番最初の要素」を指定する必要があるからです。

「動画の頭出し」に関しては、指定した任意の秒数に移動できるので、0秒の先頭へ移動だけではなく、長い動画の場合の「目次」としても使えるのではないでしょうか。

Androidでのvideoタグによる動画再生時の注意点

Androidでvideoタグを再生する時に、いくつかの注意点があります。

onclick="this.play();"

まずAndroidでは、videoタグに「onclick="this.play();"」を入れないと再生しない機種があるようなので、おまじないのように入れておくと無難かもしれません。

<video src="movie.mp4" onclick="this.play();"></video>

Basic認証を入れるとAndroidでは再生できない？

Androidでは、Basic認証が入っていると再生しない場合があるようです。新規サイトやリニューアルサイトを構築中の時は、公開前に見られるのを防ぐ為にBasic認証を使う事はよくあると思いますが、対処法としてはAndroidでのチェック時に一時的に認証を外すか、.htaccessで回避する方法が存在するようなので、その方法を取るのもひとつかもしれません。

videoタグを使いBasic認証をかけてスマホで起こる不具合を回避