115 lines
3.2 KiB
JavaScript
115 lines
3.2 KiB
JavaScript
|
function getVideo(el) {
|
||
|
|
return $(el).parent().prev('.video')[0];
|
||
|
|
}
|
||
|
|
|
||
|
|
function updateMuteBtn(video) {
|
||
|
|
const muteBtn = $(video).next('.video-controls').find('.video-mute i.fa');
|
||
|
|
muteBtn.removeClass('fa-volume-up fa-volume-down fa-volume-mute');
|
||
|
|
if (video.muted) {
|
||
|
|
muteBtn.addClass('fa-volume-mute');
|
||
|
|
} else {
|
||
|
|
if (video.volume > .5) {
|
||
|
|
muteBtn.addClass('fa-volume-up');
|
||
|
|
} else {
|
||
|
|
muteBtn.addClass('fa-volume-down');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function formatTime(time) {
|
||
|
|
const minutes = Math.floor(time / 60);
|
||
|
|
let seconds = Math.round(time) % 60;
|
||
|
|
if(seconds < 10)
|
||
|
|
seconds = "0" + seconds;
|
||
|
|
return `${minutes}:${seconds}`
|
||
|
|
}
|
||
|
|
|
||
|
|
function addVideoListeners() {
|
||
|
|
$('.video-controls .video-toggle-play').click(function () {
|
||
|
|
getVideo(this).toggle();
|
||
|
|
});
|
||
|
|
|
||
|
|
$('.video-controls .video-mute').click(function () {
|
||
|
|
const video = getVideo(this);
|
||
|
|
video.toggleMuted();
|
||
|
|
|
||
|
|
updateMuteBtn(video);
|
||
|
|
});
|
||
|
|
|
||
|
|
$('.video-controls .video-volume').change(function () {
|
||
|
|
const video = getVideo(this);
|
||
|
|
video.volume = $(this).val();
|
||
|
|
|
||
|
|
if (video.volume > 0)
|
||
|
|
video.muted = false;
|
||
|
|
|
||
|
|
updateMuteBtn(video);
|
||
|
|
});
|
||
|
|
|
||
|
|
$('.video-seek-bar')
|
||
|
|
.on('mousedown', function () {
|
||
|
|
getVideo(this).pause();
|
||
|
|
})
|
||
|
|
.on('mouseup', function () {
|
||
|
|
getVideo(this).play();
|
||
|
|
})
|
||
|
|
.on('change', function () {
|
||
|
|
const video = getVideo(this);
|
||
|
|
video.currentTime = video.duration * (this.value / 100);
|
||
|
|
});
|
||
|
|
|
||
|
|
$('.video-fullscreen').on('click', function () {
|
||
|
|
const video = getVideo(this);
|
||
|
|
|
||
|
|
if(video.requestFullscreen) {
|
||
|
|
video.requestFullscreen();
|
||
|
|
} else if(video.mozRequestFullScreen) {
|
||
|
|
video.mozRequestFullScreen();
|
||
|
|
} else if(video.webkitRequestFullScreen) {
|
||
|
|
video.webkitRequestFullScreen();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
$('.video')
|
||
|
|
.on('loadeddata', function () {
|
||
|
|
const duration = formatTime(this.duration);
|
||
|
|
$(this).next('.video-controls').find('.video-length').text(duration);
|
||
|
|
})
|
||
|
|
.on('play pause', function () {
|
||
|
|
const togglePlay = $(this).next('.video-controls').find('.video-toggle-play').find('i.fa');
|
||
|
|
if (this.paused) {
|
||
|
|
togglePlay.removeClass('fa-pause').addClass('fa-play');
|
||
|
|
} else {
|
||
|
|
togglePlay.removeClass('fa-play').addClass('fa-pause');
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.on('timeupdate', function () {
|
||
|
|
const value = (100 / this.duration) * this.currentTime;
|
||
|
|
$(this).next('.video-controls').find('.video-seek-bar').val(value)
|
||
|
|
.prev('.video-time').text(formatTime(this.currentTime));
|
||
|
|
})
|
||
|
|
.on('click', function () {
|
||
|
|
if(!this.startedManually) {
|
||
|
|
this.play();
|
||
|
|
this.muted = false;
|
||
|
|
updateMuteBtn(this);
|
||
|
|
|
||
|
|
this.startedManually = true;
|
||
|
|
} else {
|
||
|
|
this.toggle();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
Node.prototype.toggle = function () {
|
||
|
|
if (this.paused)
|
||
|
|
this.play();
|
||
|
|
else
|
||
|
|
this.pause();
|
||
|
|
};
|
||
|
|
|
||
|
|
Node.prototype.toggleMuted = function () {
|
||
|
|
this.muted = !this.muted;
|
||
|
|
};
|
||
|
|
|