Web

サイトに埋め込んだ動画を再生ボタンで制御

動画が流れているサイトをよく見かけますが、
ずーっと流れっぱなしだと、ブラウザも重くなるし、音がついていると、消音にしたいということがあります。

今回は、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>

お問い合わせフォーム

気になる方はコチラからお問い合わせ!

    必須お名前
    必須メールアドレス
    必須郵便番号
    必須ご住所
    必須電話番号
    ご相談内容
    必須メッセージ本文

    コメントを残す

    *