動画が流れているサイトをよく見かけますが、
ずーっと流れっぱなしだと、ブラウザも重くなるし、音がついていると、消音にしたいということがあります。
今回は、YouTubeからの埋め込みではなく、
自分たちでアップした動画の制御についてご紹介いたします。
埋め込み・ボタン設置
サンプルデモ
ボタンで再生と停止、音声あり、なしが切り替えられます。
「html」
<div id=”video-container”>
<video id=”video” loop muted autoplay preload>
<source src=”Diving – 908.mp4″ type=”video/mp4″>
</video>
</div>
<div class=”buttons”>
<div class=”button” id=”volume-button”></div>
<div class=”button” id=”play-button”></div>
</div> |
Diving – 908.mp4 → 任意の動画パスに書き換え
「css」
<style>
#video-container {
position: fixed;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100vh;
overflow: hidden;
}#video {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
margin: auto;
}
.buttons {
position: absolute;
top: 15px;
left: 15px;
}
.buttons .button {
width: 40px;
height: 40px;
margin: 0 0 10px;
background: #D91318;
color: #FFF;
border-radius: 100%;
text-align: center;
line-height: 40px;
font-size: 18px;
cursor: pointer;
}
.buttons .button:hover {
opacity: 0.5;
}
.buttons .button a {
display: block;
color: #FFF;
text-decoration: none;
}
#popup-button:before {
content: “\f08e”;
}
#volume-button:before {
content: “\f028”;
}
#volume-button.on:before {
content: “\f026”;
}
#play-button:before {
content: “\f04c”;
}
#play-button.on:before {
content: “\f04b”;
}
#popup-button:before,
#volume-button:before,
#play-button:before {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
</style> |
「javascript」
<script>
$(function(){
var video = $(‘#video’).get(0);
var w = $(window).width();
if (w > 767) {
video.currentTime = 0;
video.play();
} else {
video.pause();
}
var timer = false;
$(window).resize(function() {
if (timer !== false) {
clearTimeout(timer);
}
timer = setTimeout(function() {
w = $(window).width();
if (w > 767) {
if(video.paused) {
video.currentTime = 0;
video.play();
}
} else {
video.pause();
}
}, 300);
});
});
$(function(){
var video = $(‘#video’).get(0);
var volumeButton = $(‘#volume-button’);
var playButton = $(‘#play-button’);
volumeButton.click(function(){
volumeButton.toggleClass(‘on’);
if (video.muted){
video.muted = false;
} else {
video.muted = true;
}
});
playButton.click(function(){
playButton.toggleClass(‘on’);
if (video.paused){
video.play();
} else {
video.pause();
}
});
});
$(function(){
$(‘#popup-button’).magnificPopup({
type: ‘iframe’
});
});
</script> |
