lukas
4ad29fd072
hover animation correct jumpback position after video view load when scroll - not all at beginning
72 lines
2.1 KiB
JavaScript
Executable File
72 lines
2.1 KiB
JavaScript
Executable File
var videos;
|
|
var loadindex = 0;
|
|
var scrollposition = 0;
|
|
|
|
$(document).ready(function () {
|
|
$.post('php/videoload.php', 'action', function (data) {
|
|
videos = data;
|
|
loadPreviewBlock(12);
|
|
}, 'json');
|
|
|
|
$(".closebutton").click(function () {
|
|
$(".videopagewrapper").hide();
|
|
$(".previewcontainer").show();
|
|
// scroll back to last scroll position
|
|
$(window).scrollTop(scrollposition);
|
|
$(".videowrapper").html("");
|
|
});
|
|
});
|
|
|
|
$(window).scroll(function () {
|
|
if ($(window).scrollTop() >= (($(document).height() - $(window).height() - 60))) {
|
|
if ($(".videowrapper").html() == "") {
|
|
loadPreviewBlock(6);
|
|
}
|
|
}
|
|
});
|
|
|
|
function loadPreviewBlock(nr) {
|
|
for (let i = 0; i < nr; i++) {
|
|
if (loadindex + i < videos.length) {
|
|
if (videos[loadindex + i] != "." && videos[loadindex + i] != "..") {
|
|
loadPreview(videos[loadindex + i]);
|
|
} else {
|
|
nr++;
|
|
}
|
|
|
|
}
|
|
}
|
|
loadindex += nr;
|
|
}
|
|
|
|
function loadPreview(src) {
|
|
var preview = $("<div class='videopreview'><div class='previewtitle'>" + src + "</div><div class='previewpic'><img style='width:100%;height:100%' src=\"videos/thumbnails/" + src + ".jpg\" alt='no thumbnail found'></img></div></div>");
|
|
preview.attr('videourl', "videos/prn/" + src);
|
|
preview.attr('thumbnailurl', "videos/thumbnails/" + src);
|
|
preview.click(function () {
|
|
console.log("preview clicked");
|
|
scrollposition = $(window).scrollTop();
|
|
loadVideo($(this).attr("videourl"), $(this).attr("thumbnailurl") + ".jpg");
|
|
});
|
|
$(".previewcontainer").append(preview);
|
|
}
|
|
|
|
function loadVideo(src, posterlink) {
|
|
$(".videowrapper").html("<div class='myvideo'><video controls crossorigin playsinline id='player'></video></div>");
|
|
|
|
const player = new Plyr('#player');
|
|
player.source = {
|
|
type: 'video',
|
|
sources: [
|
|
{
|
|
src: src,
|
|
type: 'video/mp4',
|
|
size: 1080,
|
|
}
|
|
],
|
|
poster: posterlink
|
|
};
|
|
$(".videopagewrapper").show();
|
|
$(".previewcontainer").hide();
|
|
}
|