-
Notifications
You must be signed in to change notification settings - Fork 7
/
index.html
195 lines (194 loc) · 7.82 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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>SplitView</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="./main.css">
<link rel="stylesheet" href="./splitview.css" id="viewLink">
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/mousetrap/1.4.6/mousetrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/URI.js/1.11.2/URI.min.js"></script>
<script src="./mediagroup.js"></script>
<style id="inlineStyle">
/* Will be filled by js code */
</style>
</head>
<body>
<div class="container-fluid text-center">
<div class="page-header">
<h1>SplitView</h1>
Visual comparison of videos. <a href="http://github.com/smarter/splitview">Get the source.</a>
</div>
<div id="warnVP9" class="warnBox alert alert-warning alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
Your browser does not support the VP9 video codec. The following
browsers are supported and known to support VP9:
<ul>
<li><a href="http://google.com/chrome">Chrome</a> (recommended)</li>
<li><a href="http://mozilla.org/firefox">Firefox</a> version 28 or greater</li>
</ul>
</div>
<div id="warnH264" class="warnBox alert alert-warning alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
Your browser does not support the H.264 video codec. The following
browsers are supported and known to support H.264:
<ul>
<li><a href="http://google.com/chrome">Chrome</a> (recommended)</li>
<li><a href="http://mozilla.org/firefox">Firefox</a></li>
</ul>
</div>
<div class="unbounded-elem">
<ul id="viewNav" class="nav nav-pills">
<li class="active"><a href="#" data-toggle="tab" data-css="./splitview.css">Split View</a></li>
<li><a href="#" data-toggle="tab" data-css="./vertview.css">Vertical View</a></li>
<li><a href="#" data-toggle="tab" data-css="./horizview.css">Horizontal View</a></li>
<li><a href="#" data-toggle="tab" data-css="./leftview.css">Left View</a></li>
<li><a href="#" data-toggle="tab" data-css="./rightview.css">Right View</a></li>
</ul>
</div>
<div class="unbounded-elem">
<select id="selectA" class="mediaSelector">
</select>
<select id="selectB" class="mediaSelector">
</select>
</div>
<div id="elems" class="unbounded-elem">
<input type="range" id="splitSlider">
<div id="leftVidDiv">
<!-- leftVid will be here -->
</div>
<div id="leftImgDiv">
<!-- leftImg will be here -->
</div>
<div id="rightVidDiv">
<!-- rightVid will be here -->
</div>
<div id="rightImgDiv">
<!-- rightImg will be here -->
</div>
<input type="range" id="seekSlider" value="0" min="0" max="1" step="any">
</div>
<div>
<button type="button" id="playButton" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-play"></span>
</button>
<button type="button" id="backwardButton" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-backward"></span>
</button>
<button type="button" id="forwardButton" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-forward"></span>
</button>
</div>
<div>
<form id="rateForm">
<label for="rateInput">Playback Rate</label>
<input type="number" id="rateInput" value="1.0" step="0.1" required>
</form>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<h2 class="panel-title">Share a link at current time</h2>
</div>
<div class="panel-body">
<div class="input-group">
<span class="input-group-btn">
<button id="getLinkButton" class="btn btn-default" type="button">Get Link</button>
</span>
<input type="url" id="getLinkUrl" class="form-control" readonly>
</div>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<h2 class="panel-title">Compare other files</h2>
</div>
<div class="panel-body">
<form id="addUrlForm">
<div class="input-group">
<input type="url" id="videoUrl" class="form-control" placeholder="Enter the URL of a video (.ogg, .mp4 or .webm) or of an image" required>
<span class="input-group-btn">
<button class="btn btn-default" type="submit">
<span class="glyphicon glyphicon-plus"></span>
</button>
</span>
</div>
</form>
<hr>
<div>
<input type="file" id="localFile" accept="video/*,image/*" multiple>
<div class="well well-sm">NOTE: The files won't be uploaded, they will only be available locally.</div>
</div>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<h2 class="panel-title">Keyboard shortcuts</h2>
</div>
<div class="panel-body">
<table class="table table-condensed table-hover">
<tr>
<td><span class="glyphicon glyphicon-play"></span>/<span class="glyphicon glyphicon-pause"></span></td>
<td><kbd>[space]</kbd></td>
</tr>
<tr>
<td><span class="glyphicon glyphicon-backward"></span></td>
<td><kbd>h</kbd></td>
</tr>
<tr>
<td><span class="glyphicon glyphicon-forward"></span></td>
<td><kbd>l</kbd></td>
</tr>
<tr>
<td>Split View mode</td>
<td><kbd>1</kbd></td>
</tr>
<tr>
<td>Vertical View mode</td>
<td><kbd>2</kbd></td>
</tr>
<tr>
<td>Horizontal View mode</td>
<td><kbd>3</kbd></td>
</tr>
<tr>
<td>Left View mode</td>
<td><kbd>4</kbd></td>
</tr>
<tr>
<td>Right View mode</td>
<td><kbd>5</kbd></td>
</tr>
</table>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<h2 class="panel-title">Encoding parameters used</h2>
</div>
<div class="panel-body">
<ul>
<li>VP9: <pre>vpxenc --codec=vp9 --good --cpu-used=0 --kf-max-dist=50 --target-bitrate=XXX in.y4m --output=out.webm</pre></li>
<li>H.264: <pre>
x264 --preset placebo --pass 1 --keyint 50 --bitrate XXX in.y4m --output out.mp4
x264 --preset placebo --pass 3 --keyint 50 --bitrate XXX in.y4m --output out.mp4
# repeat until the bitrate matches the one in the VP9 file
x264 --preset placebo --pass 3 --keyint 50 --bitrate XXX in.y4m --output out.mp4</pre>
</li>
</ul>
</div>
</div>
<div>
<hr>
<footer>
<a href="http://guillaume.martres.me">Contact</a>
</footer>
</div>
</div>
<script src="./compatcheck.js"></script>
<script src="./main.js"></script>
</body>
</html>