fcmediaplayer/index.html at main · flyingcatdeveloper/fcmediaplayer · 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
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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!DOCTYPE html>
<html lang="en">
    <head>
        <link rel="icon" id="favicon" href="./src/img/favicon.ico">
        <link rel="manifest" href="./manifest.json">
        <title>Media Player</title>
        <style>
            body {
                background-color: #3d3d3d;
                color: whitesmoke;
                font-family: Arial, Helvetica, sans-serif;
            }

            #container {
                text-align: center;
            }

            #cover{
                width:  250px;
                height: 250px;
                margin: 0 auto;
                background-position: center;
                background-size: cover;
                border-radius: 25px;
            }

            #artist {
                opacity: 75%;
                font-weight: bold;
            }

            #album {
                opacity: 50%;
                font-size: smaller;
            }

            #fullscreen {
                margin: 0 auto;
            }

            #back, #playpause, #skip, #back15, #forward15, #fullscreen {
                display: none;
                border: none;
                border-radius: 10%;
            }

            #back:hover, #playpause:hover, #skip:hover, #back15:hover, #forward15:hover, #fullscreen:hover {
                color: grey;
            }

            #errorText {
                display: none;
            }

            #video {
                width: 50%;
                height: 25%;
                margin: 0 auto;
                border-radius: 5%;
            }

            #video, #song, #timeHolder {
                display: none;
            }

            a {
                text-align: left;
            }

            #title {
                font-weight: bold;
            }

            #timeRange {
                display: inline-block;
                width: 50%;
                accent-color: orange;
            }

            #currentTime, #duration {
                display: inline-block;
            }
        </style>
    </head>
    <body>
        <a style="color: #eee; opacity: 25%; text-align: left ;" href="./src/log/devlog.txt" target="_blank">v1.1</a>
        <div id="container">
            <form>
                <input accept="audio/*, video/*" webkitdirectory multiple type="file" id="selector">
            </form>
            <br>
            <div id="body">
                <video id="video"></video>
                <input id="fullscreen" type="button" value="Fullscreen">
                <p id="errorText"></p>
                <div id="song">
                    <div id="cover"></div>
                    <h1 id="title"></h1>
                    <p id="artist"></p>
                    <p id="album"></p>
                </div>
                <div id="timeHolder">
                    <p id="currentTime"></p>
                    <input id="timeRange" type="range">
                    <p id="duration"></p>
                </div>
                <input type="button" class="nowrap" id="back" value="Back">
                <input type="button" id="back15" value="↺15">
                <input type="button" class="nowrap" id="playpause" value="Play">
                <input type="button" id="forward15" value="⟳15">
                <input type="button" class="nowrap" id="skip" value="Skip">
            </div>
        </div>
    </body>
    <script src="./src/img/album-placeholder.js"></script>
    <script src="./src/scripts/jsmediatags.min.js"></script>
    <script src="./src/scripts/player.js"></script>
</html>