forked from wiwikuan/fast-srt-subtitle
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
130 lines (115 loc) · 2.77 KB
/
index.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
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
119
120
121
122
123
124
125
126
127
128
129
130
<html>
<title>Fast and Dirty Captioner</title>
<head>
<meta charset="UTF-8" />
<script src="https://unpkg.com/wavesurfer.js"></script>
<style>
.header {
height: 6%;
text-align: center;
line-height: 250%;
}
.left {
width: 50%;
float: left;
}
.video {
width: 100%;
float: left;
}
#waveform {
width: 100%;
float: left;
}
#MakeSrtBtn {
margin-top: 1%;
float: right;
}
#subbox {
width: 100%;
float: left;
overflow-x: hidden;
height: 40px;
position: relative;
}
#subtainer {
background: Gray;
width: 100%;
height: 20px;
position: absolute;
top: 50%;
transform: translate(0, -50%);
}
.subleft {
float: left;
width: 5px;
height: 100%;
cursor: url("Lcursor.png") 12 12, col-resize;
transition: 0.2s;
}
.subleft:hover {
float: left;
width: 5px;
height: 100%;
background: Magenta;
cursor: url("Lcursor.png") 12 12, col-resize;
}
.subright {
float: right;
width: 5px;
height: 100%;
cursor: url("Rcursor.png") 12 12, col-resize;
transition: 0.2s;
}
.subright:hover {
float: right;
width: 5px;
height: 100%;
background: Yellow;
cursor: url("Rcursor.png") 12 12, col-resize;
}
.right {
float: right;
width: 49%;
}
</style>
</head>
<body>
<div class="header">選取字幕檔以及影片檔案開始製作 SRT！</div>
<div class="left">
<label>
<span>選擇影片檔案：</span>
<input id="videoFile" type="file" name="videoFile" placeholder="點擊上傳影片檔" />
</label>
<p>
<video class="video" id="video" controls></video>
</p>
<div id="subbox">
<div id="subtainer"></div>
</div>
<div id="waveform"></div>
<button id="MakeSrtBtn">匯出 SRT 檔</button>
</div>
<div class="right">
<p id="status">Test Text.</p>
<textarea id="textArea" rows="10" cols="80">預設的字。</textarea>
<p>
<label>
<span>選擇字幕檔案(txt或srt檔)：</span>
<input id="srtFile" type="file" name="srtFile" placeholder="點擊上傳字幕檔" />
</label>
</p>
<p>
K: 下一行開始 | L: 這一行提前結束 | I: 前捲一行 | O: 後捲一行 | U: 倒帶 2
秒 | P: 前進 2 秒 | Q: 製作 SRT 檔
</p>
<p>
K: Next Line | L: This Line Ends Early | I: Scroll Back | O: Scroll
Forward | U: Rewind | P: Forward | Q: Make SRT File
</p>
<input type="checkbox" id="checkbox">Reaction Time
<input type="checkbox" id="autoJumpCheckbox" checked="checked">Auto Jump
</div>
</body>
<script src="main.js"></script>
</html>