52 lines
1.6 KiB
JavaScript
52 lines
1.6 KiB
JavaScript
|
$(document).ready(function() {
|
||
|
|
console.log("finished loading page");
|
||
|
|
$.post('php/videoload.php','action',function(data){
|
||
|
|
console.log(data);
|
||
|
|
for (var i in data) {
|
||
|
|
if (data[i] != "." && data[i] != "..") {
|
||
|
|
//loadVideo("videos/prn/"+data[i],"");
|
||
|
|
loadPreview(data[i]);
|
||
|
|
console.log(data[i]);
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
},'json');
|
||
|
|
//loadVideo("https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4",'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg');
|
||
|
|
|
||
|
|
$(".closebutton").click(function() {
|
||
|
|
$(".videopagewrapper").hide();
|
||
|
|
$(".previewcontainer").show();
|
||
|
|
$(".videowrapper").html("");
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
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");
|
||
|
|
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();
|
||
|
|
}
|