VideoPlayerFSR/index.html at main · Benjamin-Wegener/VideoPlayerFSR · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>FSR Enhanced Video Player</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div id="parent">
        <div id="fullscreen-overlay"></div>
        <canvas id="canvas"></canvas>
        <div class="hud" id="box"></div>
        <div class="hud" id="description">
            <span id="fps"></span>
            <span id="message"></span>
            <span id="current-video"></span>
            <span id="file-info"></span>
        </div>
        <div class="hud" id="seekbar">
            <span id="seekbar_span"></span>
        </div>
        <label class="hud" id="open" for="eject">
            <!-- Eject button icon -->
            <svg viewBox="0 0 24 24"><path d="M5,17h14v2H5V17z M12,5L5.33,15h13.34L12,5z"></path></svg>
        </label>
        <label class="hud" id="play">
            <!-- Play/Pause button that will be switched in JavaScript -->
            <svg class="play-icon" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"></path></svg>
            <svg class="pause-icon" style="display:none" viewBox="0 0 24 24"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"></path></svg>
        </label>
        <label class="hud" id="prev">
            <!-- Previous track icon (tape deck style) -->
            <svg viewBox="0 0 24 24"><path d="M7 6c.55 0 1 .45 1 1v10c0 .55-.45 1-1 1s-1-.45-1-1V7c0-.55.45-1 1-1zm3.66 6.82l5.77 4.07c.66.47 1.58-.01 1.58-.82V7.93c0-.81-.91-1.28-1.58-.82l-5.77 4.07c-.57.4-.57 1.24 0 1.64z"></path></svg>
        </label>
        <label class="hud" id="next">
            <!-- Next track icon (tape deck style) -->
            <svg viewBox="0 0 24 24"><path d="M17 6c.55 0 1 .45 1 1v10c0 .55-.45 1-1 1s-1-.45-1-1V7c0-.55.45-1 1-1zm-4.66 6.82l-5.77 4.07c-.66.47-1.58-.01-1.58-.82V7.93c0-.81.91-1.28 1.58-.82l5.77 4.07c.57.4.57 1.24 0 1.64z"></path></svg>
        </label>
        <label class="hud" id="enhance">
            <!-- Magic wand icon -->
            <svg viewBox="0 0 24 24"><path d="M7.5 5.6L10 7 8.6 4.5 10 2 7.5 3.4 5 2l1.4 2.5L5 7zm12 9.8L17 14l1.4 2.5L17 19l2.5-1.4L22 19l-1.4-2.5L22 14zM22 2l-2.5 1.4L17 2l1.4 2.5L17 7l2.5-1.4L22 7l-1.4-2.5zm-7.63 5.29a.996.996 0 0 0-1.41 0L1.29 18.96a.996.996 0 0 0 0 1.41l2.34 2.34c.39.39 1.02.39 1.41 0L16.7 11.05a.996.996 0 0 0 0-1.41l-2.33-2.35zm-1.03 5.49l-2.12-2.12 2.44-2.44 2.12 2.12-2.44 2.44z"></path></svg>
        </label>
        <label class="hud" id="fullscreen">
            <!-- Fullscreen icon -->
            <svg viewBox="0 0 24 24"><path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"></path></svg>
        </label>
    </div>
    <input id="eject" type="file" accept="video/*" multiple/>
    <video autoplay></video>
    <!-- Load our WebGL utilities replacement for glea.js -->
    <script src="./webgl-utils.js"></script>
    <!-- Then load the shader.js which defines frag and vert variables -->
    <script src="./shader.js"></script>
    <!-- Finally load script.js which uses the variables defined in shader.js -->
    <script src="./script.js"></script>
</body>
</html>