one's way blog

ワクワクを生み出せるWebエンジニアを目指して。

【61:videoタグで背景動画】HTML5のvideoタグで動画を背景に使う

f:id:seintoseiya:20160427042025p:plain
プロジェクトNo.61:videoタグで背景動画 - DEMO

前回jQueryプラグインを使用しましたが、
HTML5のvideoタグでも実現できました。
またWebサイトで動画を使う際に付けておきたい、サウンドのon/offも実装してみました。

HTML

<video src="./videos/soran.mp4" poster="./images/bg.jpg" autoplay loop muted>
	<p>動画を再生するにはvideoタグをサポートしたブラウザが必要です。</p>
</video>
<!-- サウンドのon/off -->
<p class="soundCtr">Sound <span class="soundOn">ON</span> / <span class="soundOff">OFF</span></p>

videoタグのposter属性は動画が読み込まれなかった際に代わりに表示する背景画像を設定できます。
ちなみにposter属性を使わないでCSSでも以下のように書けます。

video {
  background: url(../images/bg.jpg) no-repeat;
}

サウンドOn/Offの実装

Javascript(JQuery)

$(function(){
	// sound on/offの制御
	var v = $('video')[0];
	var soundOn = $('.soundOn')
	var soundOff =$('.soundOff')
	soundOn.click(function(){
		v.muted = false;
		$(this).css("color","#FFF");
		soundOff.css("color","rgba(255,255,255,0.5)");
	});
	soundOff.click(function(){
		v.muted = true;
		$(this).css("color","#FFF");
		soundOn.css("color","rgba(255,255,255,0.5)");

	});
});

CSS

.soundCtr{
	position: absolute;
	top: 550px;
	right: 100px;
	color: rgba(255,255,255,0.5);
}
.soundCtr > span{
	cursor: pointer;
}
.soundCtr > span :visited{
	color: rgba(255,255,255,0.5);
}
.soundOff{
	color: #FFF;
}