【jQuery】jQueryを使ってvideoタグで挿入した動画の音声のON・OFFを制御する

2016.08.06

映像の消音ボタンや音声ボタンを設置したい

イメージ画像
HTML5で動画コンテンツ等を挿入できるvideoタグ。
動画を挿入する際にFlashを使用しないでよいのでとても便利なのですが、
自分で用意したデザインのボタンや、
ちょっとしたトリガーで音声を制御したいといった時にはjQueryでサクッと対応することができます。
HTML:
<video>
<source src="test.mp4">
<p>videoタグをサポートした最新のブラウザで閲覧してください。</p>
</video>

<a href="javascript:void(0);" id="sound_button" class="sound_off">SOUND OFF</a>
JavaScript:
$("#sound_button").click(function () {
		if($(this).hasClass("sound_off")) {
			$(this).removeClass("sound_off");
			$(this).addClass("sound_on");
			$(this).text("SOUND ON");
			$("video").prop('muted', false);
		} else {
			$(this).removeClass("sound_on");
			$(this).addClass("sound_off");
			$(this).text("SOUND OFF");
			$("video").prop('muted', true);
		}
	});
音声のON、OFFは、
JavaScript:
$("video").prop('muted', false);
$("video").prop('muted', true);
の部分で、
「muted」を「false」にすると音が出て、
「muted」を「true」にすると音が消える(ミュートになる)という形です。

JSの他の箇所は、
だだっとわかりやすくするために列記していますが、
表示側で使えそうな記述を記載しています。

例えば、
JavaScript:
$(this).removeClass("sound_off"); //sound_offのclassを削除
$(this).addClass("sound_on"); //sound_onのclassを付与

$(this).removeClass("sound_on"); //sound_onのclassを削除
$(this).addClass("sound_off"); //sound_offのclassを付与
の記述はclassを入れ替えるので、
背景画像やCSSで見た目を変更したい場合のトリガーとなります。

背景で画像を使用しない場合でも、
JavaScript:
$(this).text("SOUND ON"); //aタグ内のテキストを「SOUND ON」に変更
$(this).text("SOUND OFF"); //aタグ内のテキストを「SOUND OFF」に変更
の記述で音声ボタン自体のテキストを変更できるので、
音声のON、OFFをclassを使ってCSSだけで見た目を変更するパターンもOKです。

videoタグで動画を挿入する機会も増えているので、
ちょっとした仕組みだけ必要な場合はサクッとjQueryで書いてしまっても良いかもしれません。

スマートフォンやタブレットでは動画は自動再生されなかったりするので、
自動再生が目的の場合はちょっと工夫が必要ですが。。

videoタグ自体はautoplay属性、preload属性、controls属性等いろいろ設定もできるので、
色々試してみるのもおすすめです。
← 【jquery.matchHeight】レスポンシブにも対応した横並びの要素の高さを揃えてくれるjQueryプラグイン
【16進数・RGB・RGBAカラーコード変換ツール】16進数のカラーコードをRGB・RGBAのカラーコードに変換してくれるウェブサービス →