-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathwatch.html
87 lines (83 loc) · 5.09 KB
/
watch.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!DOCTYPE html>
<html lang="en" style="background: #282d32;">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>pr0lator | BETA |</title>
<link rel="stylesheet" href="/assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="/assets/css/Lato.css">
<link rel="stylesheet" href="/assets/css/Nunito.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/jquery-ui.min.css">
<link rel="stylesheet" href="/assets/css/untitled-1.css">
<link rel="stylesheet" href="/assets/css/untitled.css">
<style>
#loading {
display: inline-block;
width: 50px;
height: 50px;
border: 3px solid rgba(255,255,255,.3);
border-radius: 50%;
border-top-color: rgb(212,54,41);
animation: spin 1s ease-in-out infinite;
-webkit-animation: spin 1s ease-in-out infinite;
}
@keyframes spin {
to { -webkit-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
to { -webkit-transform: rotate(360deg); }
}
</style>
</head>
<body style="background: rgb(40,45,50);">
<nav class="navbar navbar-dark navbar-expand-md sticky-top bg-dark">
<div class="container-fluid"><a class="navbar-brand d-md-none" href="#"><img src="/assets/img/companylogo.svg" width="100" height="100" alt="Logo"></a><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-1"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse d-md-flex" id="navcol-1">
<ul class="navbar-nav d-flex justify-content-evenly mx-auto w-100">
<li class="nav-item"><a class="nav-link text-center" href="#"><i class="fas fa-home"></i> Startseite</a></li>
<li class="nav-item"><a class="nav-link text-center" href="#"><i class="fas fa-chart-bar"></i> Statistiken</a></li>
</ul><a class="navbar-brand d-none d-md-block me-0"><img src="/assets/img/pr0logo.png" width="56" height="56" alt="Logo" style="border-radius: 15px;"></a>
<ul class="navbar-nav d-flex justify-content-evenly mx-auto w-100">
<li class="nav-item"><a class="nav-link text-center" href="#"><i class="fab fa-github"></i> GitHub</a></li>
<li class="nav-item pb-2 pb-md-0"><a class="nav-link text-nowrap text-center" href="#"><i class="fas fa-at"></i> Contact</a></li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid" style="background: #282d32;">
<div class="d-sm-flex justify-content-between align-items-center mb-4"></div>
<div id="result" class="card shadow mb-3" style="background: rgb(40,45,50);border-style: solid;border-color: rgb(174,37,7);width: 50%;margin-left: 25%;">
<div class="card-header py-3" style="background: rgb(52,58,64);border-color: rgb(40,45,50);"><span style="color: var(--bs-white);font-weight: bold;margin-left: 0%;border-color: rgb(212,54,41);">Ergebnis</span></div>
<div class="card-body">
<video id="video" width="800" height="600" controls="" muted="" style="width: 100%;border-style: solid;border-color: rgb(212,54,41);">
<source id="videosrc" src="" type="video/mp4">
Your browser does not support the video tag.
<track id="tracksrc" src="" kind="subtitles" srclang="en" label="English" default>
</video>
<textarea id="textresult" class="form-control" style="background: rgb(52,58,64);border-style: solid;border-color: rgb(212,54,41);height: 250px;color: rgb(255,255,255);" readonly></textarea>
</div>
</div>
<div class="text-end mb-3"></div>
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
//get watch/id from url
var url = window.location.href;
var id = url.substring(url.lastIndexOf('/') + 1);
//set tracksrc and videosrc to id
document.getElementById("tracksrc").src = "../assets/media/" + id + ".vtt";
document.getElementById("videosrc").src = "../assets/media/" + id + ".mp4";
//reload video
document.getElementById("video").load();
//set textresult to vtt
$.get("../assets/media/" + id + ".vtt", function(data) {
$("#textresult").val(data);
});
</script>
</body>
</html>