lots of improvements:
hover animation correct jumpback position after video view load when scroll - not all at beginning
This commit is contained in:
parent
90e2f38c04
commit
4ad29fd072
@ -1,35 +1,43 @@
|
|||||||
.myvideo{
|
.myvideo {
|
||||||
width: 80%;
|
width: 80%;
|
||||||
margin-left: 10%;
|
margin-left: 10%;
|
||||||
float: left;
|
float: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
.previewcontainer{
|
.previewcontainer {
|
||||||
margin-left: 10%;
|
margin-left: 10%;
|
||||||
width: 80%;
|
width: 80%;
|
||||||
margin-right: 10%;
|
margin-right: 10%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.videopreview{
|
.videopreview {
|
||||||
height: 300px;
|
height: 300px;
|
||||||
width: 30%;
|
width: 30%;
|
||||||
float: left;
|
float: left;
|
||||||
margin: 1%;
|
margin: 1%;
|
||||||
background-color: #7F7F7F;
|
background-color: #7F7F7F;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
opacity: 0.9;
|
||||||
.previewtitle{
|
|
||||||
height: 10%;
|
|
||||||
}
|
|
||||||
.previewpic{
|
|
||||||
height: 90%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.hideit{
|
.videopreview:hover {
|
||||||
display: none;
|
opacity: 1;
|
||||||
|
transition: opacity 0.5s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.closebutton{
|
.previewtitle {
|
||||||
height: 15px;
|
height: 10%;
|
||||||
background-color: #FF0000;
|
}
|
||||||
|
|
||||||
|
.previewpic {
|
||||||
|
height: 90%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hideit {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.closebutton {
|
||||||
|
height: 15px;
|
||||||
|
background-color: #FF0000;
|
||||||
}
|
}
|
||||||
|
|||||||
34
index.html
34
index.html
@ -1,37 +1,29 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en" dir="ltr">
|
<html lang="en" dir="ltr">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<title></title>
|
<title>hub</title>
|
||||||
<link rel="stylesheet" href="css/plyr.css" />
|
<link rel="stylesheet" href="css/plyr.css"/>
|
||||||
<link rel="stylesheet" href="css/index.css">
|
<link rel="stylesheet" href="css/index.css">
|
||||||
|
|
||||||
|
|
||||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
|
||||||
<script src="js/plyr.js"></script>
|
<script src="js/plyr.js"></script>
|
||||||
|
|
||||||
<script>
|
|
||||||
|
|
||||||
</script>
|
|
||||||
<script src="js/index.js"></script>
|
<script src="js/index.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<h1>lukis pornhub</h1>
|
<h1>lukis pornhub</h1>
|
||||||
<div class="videopagewrapper hideit">
|
<div class="videopagewrapper hideit">
|
||||||
<div class="closebutton">
|
<div class="closebutton">
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="videowrapper">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="videowrapper"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="previewcontainer">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="previewcontainer">
|
</body>
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
104
js/index.js
104
js/index.js
@ -1,51 +1,71 @@
|
|||||||
$(document).ready(function() {
|
var videos;
|
||||||
console.log("finished loading page");
|
var loadindex = 0;
|
||||||
$.post('php/videoload.php','action',function(data){
|
var scrollposition = 0;
|
||||||
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]);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
$(document).ready(function () {
|
||||||
},'json');
|
$.post('php/videoload.php', 'action', function (data) {
|
||||||
//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');
|
videos = data;
|
||||||
|
loadPreviewBlock(12);
|
||||||
|
}, 'json');
|
||||||
|
|
||||||
$(".closebutton").click(function() {
|
$(".closebutton").click(function () {
|
||||||
$(".videopagewrapper").hide();
|
$(".videopagewrapper").hide();
|
||||||
$(".previewcontainer").show();
|
$(".previewcontainer").show();
|
||||||
$(".videowrapper").html("");
|
// 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) {
|
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>");
|
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('videourl', "videos/prn/" + src);
|
||||||
preview.attr('thumbnailurl',"videos/thumbnails/"+src);
|
preview.attr('thumbnailurl', "videos/thumbnails/" + src);
|
||||||
preview.click(function() {
|
preview.click(function () {
|
||||||
console.log("preview clicked");
|
console.log("preview clicked");
|
||||||
loadVideo($(this).attr("videourl"),$(this).attr("thumbnailurl")+".jpg");
|
scrollposition = $(window).scrollTop();
|
||||||
});
|
loadVideo($(this).attr("videourl"), $(this).attr("thumbnailurl") + ".jpg");
|
||||||
$(".previewcontainer").append(preview);
|
});
|
||||||
|
$(".previewcontainer").append(preview);
|
||||||
}
|
}
|
||||||
|
|
||||||
function loadVideo(src,posterlink) {
|
function loadVideo(src, posterlink) {
|
||||||
$(".videowrapper").html("<div class='myvideo'><video controls crossorigin playsinline id='player'></video></div>");
|
$(".videowrapper").html("<div class='myvideo'><video controls crossorigin playsinline id='player'></video></div>");
|
||||||
|
|
||||||
const player = new Plyr('#player');
|
const player = new Plyr('#player');
|
||||||
player.source = {
|
player.source = {
|
||||||
type: 'video',
|
type: 'video',
|
||||||
sources: [
|
sources: [
|
||||||
{
|
{
|
||||||
src: src,
|
src: src,
|
||||||
type: 'video/mp4',
|
type: 'video/mp4',
|
||||||
size: 1080,
|
size: 1080,
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
poster: posterlink
|
poster: posterlink
|
||||||
};
|
};
|
||||||
$(".videopagewrapper").show();
|
$(".videopagewrapper").show();
|
||||||
$(".previewcontainer").hide();
|
$(".previewcontainer").hide();
|
||||||
}
|
}
|
||||||
|
|||||||
@ -2,5 +2,5 @@
|
|||||||
$arr = scandir("../videos/prn/");
|
$arr = scandir("../videos/prn/");
|
||||||
|
|
||||||
foreach ($arr as $elem) {
|
foreach ($arr as $elem) {
|
||||||
shell_exec("ffmpeg -ss 00:04:00 -i \"../videos/prn/$elem\" -vframes 1 -q:v 2 \"$elem.jpg\"");
|
shell_exec("ffmpeg -ss 00:04:00 -i \"../videos/prn/$elem\" -vframes 1 -q:v 2 \"$elem.jpg\"");
|
||||||
}
|
}
|
||||||
|
|||||||
@ -5,8 +5,7 @@ $user = "mwit";
|
|||||||
$password = "3MnDApF3bu6XDGOE";
|
$password = "3MnDApF3bu6XDGOE";
|
||||||
$database = "mwitdb";
|
$database = "mwitdb";
|
||||||
|
|
||||||
$mysqli = new mysqli($server, $user, $password,$database);
|
$mysqli = new mysqli($server, $user, $password, $database);
|
||||||
if($mysqli->connect_errno)
|
if ($mysqli->connect_errno) {
|
||||||
{
|
echo "connecton failed... nr: " . $mysqli->connect_errno . " -- " . $mysqli->connect_error;
|
||||||
echo "connecton failed... nr: ". $mysqli->connect_errno. " -- " . $mysqli->connect_error;
|
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user