videoタグの属性やJSを使用した動画のコントロール

最近はWEBページを制作する際に、動画を埋め込むことが増えていると感じています。
ですので、今回は動画を制御する際に使用するJSを自分なりにまとめてみようと思います。
なお、今回の記事ではvideoタグで読み込んだものを対象にしますので、youtubeの埋め込みには使用できません。

videoタグの基本の書き方

<video src="〇〇.mp4" autoplay muted loop webkit-playsinline playsinline></video>

自分がよく書く書き方はこの様になっています。埋め込んだ動画を自動再生させるには、mutedを設定し、音を消しておかないと再生されないので注意してください。元動画の音の有無に関わらず、この設定は必要になります。playsinlineはiOSでページ内埋め込みさせるために必要になります。

次に、JSで制御させる方法を何個か紹介いたします。

動画の基本操作

.play()　・・・動画を再生させる
.pause()　・・・動画を停止させる

基本となる再生、停止のやり方です。
使い方は

例：

$(function () {
var video = $("video").get(0);
 $(".video_control").on("click",function(){
  video.play();
//もしくは
　　video.pause ();
 });
});

簡単なものだと、これだけの記述で動きます。
まず、videoタグを$(“video”).get(0)で取得します。get(0)をつけないとうまく動かない点に注意してください。あとは動画の制御ボタン等用意した要素（今回はvideo_control）をクリックした際に、video.play();もしくはvideo.pause ();を設定し、動画を再生or停止させます。

動画の終了を取得する

video.addEventListener("ended", function() {
　動画終了後の記述
});

このように書くことで、動画が終了した後に、任意の動きをさせることが来ます。
たとえば、

video.addEventListener("ended", function() {
　alert(“動画が終了しました”);
});

このように書くと、動画が終了した後に、動画が終了しましたというアラートを出すことができます。

例：

$(function () {
 var video = $("video").get(0);
 video.addEventListener("ended", function () {
  $(".again").show();
  $(".again").on("click",function(){
   video.play();
   $(this).hide();
  });
 });
});

先程のplay();と組み合わせて、動画が終了後にもう一度再生するボタン（.again）を表示させて、それをクリックすることでもう一度動画を再生させるという記述です。
一つ一つは簡単な記述ですが、それを組み合わせることにより、ユーザーに優しい機能を実装することができます。

音の再生、ミュートの切り替え

.muted = false;　・・・　ミュート解除
.muted = true;　・・・　ミュート
videoタグを自動再生させたい場合には、初期設定でミュートにしておくのが必須なため、その状態で音を流したいという時は、「音楽を再生する」ボタンなどを設置してあげる必要があります。その設定自体は簡単で、muteをtrueとfalseの切り替えで実装できます。

例：

$(function () {
var video = $("video").get(0);
 $(".on").on("click",function(){
  video.muted = false;
 });
 $(".off").on("click",function(){
  video.muted = true;
 });
});

実装する方法としては、このように書くのが一番簡単かと思います。
しかし、この書き方だとオンとオフの2つのボタンが必要になってしまいます。ボタンを1つで済ませる場合には

例：

$(function () {
 var video = $("video").get(0);
 $(".music").on("click",function(){
  if(video.muted){
   video.muted = false;
  }else{
   video.muted = true;
  }
 });
});

このようにif文を使うことにより、1つのボタンでオンオフの切り替えが実装できます。

秒数指定

あまり使うことはないかもしれませんが、こういうこともできるというものも紹介しておきます。

特定の秒数に移動する

.currentTime = 1;
currentTimeのあとに任意の秒数を入れることで、その時間から再生させる事ができます。

例：

$(function () {
 $(".time").on("click",function(){
  video.currentTime = 10;
 });
});

上記では動画の10秒地点にジャンプさせることができます。
指定秒数にジャンプさせるのはあまり使わないかもしれませんが、下記であれば使う機会がありそうです。

例：

$(function () {
 $(".time").on("click",function(){
  video.currentTime += 5 ;
 });
});

このように書くと、動画を5秒送りさせる記述になります。+=の部分を-=にすると、5秒戻す記述になりますので、使うのであればセットで用意しておくといいかもしれません。

まとめ

今回は、動画を操作するためのJSの代表的なものをまとめてみました。あまり馴染みは無いかもしれませんが、難しい記述はないので、JSの簡単な知識と合わせるだけで、基本的な操作はできると思います。ここで紹介したもの以外にも色々と用意されているので、気になった方は調べてみてください。

WEBプログラマー ／ K.S