【61:videoタグで背景動画】HTML5のvideoタグで動画を背景に使う
プロジェクト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; }