Archived
1
0
This repository has been archived on 2020-12-10. You can view files and clone it, but cannot push or open issues or pull requests.
old/assets/js/video-controls.js

115 lines
3.2 KiB
JavaScript
Raw Normal View History

2018-12-30 17:52:30 +00:00
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;
};