-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtemplate.html
54 lines (50 loc) · 1.56 KB
/
template.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
<!DOCTYPE html>
<html style="height: 100%;">
<head>
<title>{{title}}</title>
<style>
body, html {height: 100%; margin: 0; padding: 0 2%; background-color: #052327; color: #B59E79;}
#video {width: 65%;}
</style>
</head>
<body>
<h1>{{title}}</h1>
<video id="video" controls>
<source src="{{videoPath}}" type="video/mp4">
Your browser does not support the video tag.
</video>
<p id="currentFrame"></p>
<p>FPS: {{m_fps}}</p>
<!--{{buttons}}-->
<script>
var video = document.getElementById('video');
var currentFrameElement = document.getElementById('currentFrame');
var m_fps = {{m_fps}}
video.addEventListener('timeupdate', function() {
var currentFrame = Math.round(video.currentTime * m_fps);
currentFrameElement.textContent = 'Current Frame: ' + currentFrame;
});
var frameTime = 1 / m_fps;
document.addEventListener('keydown', function(event) {
switch (event.key) {
case ',':
video.currentTime = Math.max(video.currentTime - frameTime, 0);
break;
case '.':
video.currentTime = Math.min(video.currentTime + frameTime, video.duration);
break;
}
});
function seek(frame) {
event.preventDefault();
video.currentTime = (frame + 1) / m_fps;
video.focus();
var buttonText = event.target.textContent;
var match = buttonText.match(/From\s+(.*?)\s+to/);
if (match) {
navigator.clipboard.writeText(match[1]);
}
}
</script>
</body>
</html>