Skip to content

Commit 8e09569

Browse files
javascript-2020javascript-2020
committed
save file
1 parent c943b1d commit 8e09569

File tree

1 file changed

+155
-76
lines changed

1 file changed

+155
-76
lines changed

‎utils/video/video-player/video-player.html‎

Lines changed: 155 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,81 @@
1-
<!doctype html>
2-
<html>
3-
<head style="display: block;">
4-
<style style="display: none;">
5-
html {height:100%}
6-
</style>
7-
<script style="display: none;">
8-
/*
91

10-
//video-player:d
112

12-
18-04-25
3+
<!doctype html>
134

5+
<html>
146

15-
*/
7+
<head>
8+
9+
10+
11+
12+
13+
14+
15+
16+
17+
<style style="display: none;">
18+
19+
html
20+
{height:100%}
21+
22+
body
23+
{display: flex; flex-direction: column; height: calc(100% - 30px); margin: 15px; font-family: arial;}
24+
25+
upper
26+
{margin-top: 10px; display: flex; justify-content: space-between; gap: 10px; align-items: center;}
27+
28+
#rotate-root
29+
{display: flex; align-items: center;}
30+
31+
#rotate
32+
{width: 50px; margin-right: 10px; padding: 3px 5px; font-size: 16px; font-weight: bold; text-align: center;}
33+
34+
35+
lower
36+
{display: flex; justify-content: center; align-items: center; gap: 10px;}
37+
38+
#time-root
39+
{display: flex; align-items: center;}
40+
41+
#zero
42+
{cursor: pointer; font-size: 16px; box-sizing: border-box; margin-right: 10px;}
43+
44+
#time
45+
{width: 100px; padding: 3px 5px; font-size: 16px; font-weight: bold; text-align: center; margin-right: 5px;}
46+
47+
#timestamp
48+
{width: 120px; padding: 3px 5px; font-size: 16px; font-weight: bold; text-align: center; margin-right: 20px;}
49+
50+
#cur-time
51+
{font-weight: bold;}
52+
53+
#cur-timestamp
54+
{margin-right: 10px; font-weight: bold;}
55+
56+
#dur-time
57+
{font-weight: bold;}
58+
59+
#dur-timestamp
60+
{margin-right: 10px; font-weight: bold;}
61+
62+
#seek-root
63+
{align-items: center; display: flex; margin-right: 10px;}
64+
65+
#back
66+
{cursor: pointer; font-size: 16px; box-sizing: border-box; margin-right: 10px;}
67+
68+
#seek
69+
{width: 50px; padding: 3px 5px; font-size: 16px; font-weight: bold; text-align: center; margin-right: 10px;}
70+
71+
#forward
72+
{cursor: pointer; font-size: 16px; box-sizing: border-box;}
73+
74+
75+
</style>
76+
77+
78+
<script>
1679

1780

1881
console.clear();
@@ -47,7 +110,82 @@
47110

48111
}//init
49112

50-
113+
114+
</script>
115+
116+
<body>
117+
118+
<div id=upper>
119+
120+
<div>
121+
<select style="padding: 5px 10px; font-size: 16px;">
122+
</select>
123+
<input id="file" type="button" value="file" style="font-size: 16px; padding: 5px 10px; margin-left: 10px; cursor: pointer;">
124+
</input>
125+
</div>
126+
127+
<div id=rotate-root>
128+
<div style="margin-right: 10px;">
129+
rotate
130+
</div>
131+
<input id=rotate value="180">
132+
</input>
133+
<div>
134+
deg
135+
</div>
136+
</div>
137+
</div>
138+
139+
<div id=lower>
140+
<div id=time-root>
141+
<input type="button" value="<<" id=zero>
142+
</input>
143+
<input id=time spellcheck="false" autocomplete="off" value="0">
144+
</input>
145+
<input id="timestamp" spellcheck="false" autocomplete="off" value="00:00:00">
146+
</input>
147+
<div id="cur-time">
148+
00000
149+
</div>
150+
<div style="margin-left: 10px; margin-right: 10px;">
151+
--
152+
</div>
153+
<div id="cur-timestamp">
154+
00:00:00
155+
</div>
156+
<div style="margin-left: 10px; margin-right: 10px;">
157+
&#x2F;
158+
</div>
159+
<div id="dur-time">
160+
00000
161+
</div>
162+
<div style="margin-left: 10px; margin-right: 10px;">
163+
--
164+
</div>
165+
<div id="dur-timestamp">
166+
00:00:00
167+
</div>
168+
</div>
169+
<div id="seek-root">
170+
<input type="button" value="back" id="back">
171+
</input>
172+
<input id="seek" spellcheck="false" autocomplete="off" value="1">
173+
</input>
174+
<input type="button" value="forward" id="forward">
175+
</input>
176+
</div>
177+
</div>
178+
179+
<div style="flex: 1 1 0%; text-align: center; margin-top: 20px;" id="hldr">
180+
<video style="width: 100%; height: 100%;" controls="">
181+
</video>
182+
</div>
183+
184+
</body>
185+
186+
187+
<script>
188+
51189
function initdom(){ //c
52190

53191
$('select').onchange = select;
@@ -389,69 +527,10 @@
389527
}//def
390528

391529
}//strtomilli
530+
531+
532+
392533
</script>
393-
</head>
394-
<body style="display: flex; flex-direction: column; height: calc(100% - 30px); margin: 15px; font-family: arial;">
395-
<div style="margin-top: 10px; display: flex; justify-content: space-between; gap: 10px; align-items: center;">
396-
<div>
397-
<select style="padding: 5px 10px; font-size: 16px;">
398-
</select>
399-
<input id="file" type="button" value="file" style="font-size: 16px; padding: 5px 10px; margin-left: 10px; cursor: pointer;">
400-
</input>
401-
</div>
402-
<div style="display: flex; align-items: center;" id="rotate-root">
403-
<div style="margin-right: 10px;">
404-
rotate
405-
</div>
406-
<input id="rotate" style="width: 50px; margin-right: 10px; padding: 3px 5px; font-size: 16px; font-weight: bold; text-align: center;" value="180">
407-
</input>
408-
<div style="">
409-
deg
410-
</div>
411-
</div>
412-
</div>
413-
<div style="display: flex; justify-content: center; align-items: center; gap: 10px;">
414-
<div id="time-root" style="display: flex; align-items: center;">
415-
<input style="cursor: pointer; font-size: 16px; box-sizing: border-box; margin-right: 10px;" type="button" value="<<" id="zero">
416-
</input>
417-
<input id="time" style="width: 100px; padding: 3px 5px; font-size: 16px; font-weight: bold; text-align: center; margin-right: 5px;" spellcheck="false" autocomplete="off" value="0">
418-
</input>
419-
<input id="timestamp" style="width: 120px; padding: 3px 5px; font-size: 16px; font-weight: bold; text-align: center; margin-right: 20px;" spellcheck="false" autocomplete="off" value="00:00:00">
420-
</input>
421-
<div id="cur-time" style="font-weight: bold;">
422-
00000
423-
</div>
424-
<div style="margin-left: 10px; margin-right: 10px;">
425-
--
426-
</div>
427-
<div id="cur-timestamp" style="margin-right: 10px; font-weight: bold;">
428-
00:00:00
429-
</div>
430-
<div style="margin-left: 10px; margin-right: 10px;">
431-
&#x2F;
432-
</div>
433-
<div id="dur-time" style="font-weight: bold;">
434-
00000
435-
</div>
436-
<div style="margin-left: 10px; margin-right: 10px;">
437-
--
438-
</div>
439-
<div id="dur-timestamp" style="margin-right: 10px; font-weight: bold;">
440-
00:00:00
441-
</div>
442-
</div>
443-
<div id="seek-root" style="align-items: center; display: flex; margin-right: 10px;">
444-
<input style="cursor: pointer; font-size: 16px; box-sizing: border-box; margin-right: 10px;" type="button" value="back" id="back">
445-
</input>
446-
<input id="seek" style="width: 50px; padding: 3px 5px; font-size: 16px; font-weight: bold; text-align: center; margin-right: 10px;" spellcheck="false" autocomplete="off" value="1">
447-
</input>
448-
<input style="cursor: pointer; font-size: 16px; box-sizing: border-box;" type="button" value="forward" id="forward">
449-
</input>
450-
</div>
451-
</div>
452-
<div style="flex: 1 1 0%; text-align: center; margin-top: 20px;" id="hldr">
453-
<video style="width: 100%; height: 100%;" controls="">
454-
</video>
455-
</div>
456-
</body>
534+
535+
457536
</html>

0 commit comments

Comments
 (0)