-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
337 lines (277 loc) · 7.49 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
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<link rel="icon" href="https://players.castlabs.com/favicon.svg"
type="image/svg+xml">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>FPS Multi-Key</title>
<style>
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html {
font-family: sans-serif;
}
h1 {
margin: 2rem 0;
}
h2 {
margin: 1rem 0;
}
h3 {
margin: .5rem 0;
}
video {
width: 100% !important;
height: auto !important;
}
ol {
margin: .5rem 0;
}
#app {
width: 800px;
height: auto;
margin: 0 auto;
}
.player-container {
background-color: black;
position: relative;
padding-bottom: calc(1080 / 2578 * 100%);
height: 0;
margin: 1rem 0;
}
.player {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.logs {
width: 15rem;
position: absolute;
top: 0;
padding: .5rem;
color: #f9f9f9;
background-color: rgba(70, 72, 100, 0.74);
}
.logs.long {
width: 30rem;
}
.time {
top: auto;
bottom: 0;
}
.controls {
position: absolute;
bottom: 0;
left: 0;
top: 0;
right: 0;
display: flex;
align-items: flex-end;
justify-content: flex-end;
padding: .5rem;
}
.controls button {
padding: .5rem;
background-color: rgba(255, 0, 0, 0.92);
border-radius: .5rem;
border: none;
color: #f9f9f9;
}
.fake-size {
width: 2578px !important;
height: 1080px !important;
scale: 31%;
transform-origin: 0 50%;
overflow: hidden;
}
.example {
padding: 1rem 0;
border-bottom: 2px solid #b7b7b7;
}
.example p {
margin-bottom: .5rem;
}
.event-logs {
border-bottom-right-radius: 1rem;
}
.event-logs div {
font-family: monospace;
line-height: 1.25rem;
}
.failed {
color: #ff2d2d;
}
.success {
color: #5f9b00;
}
</style>
</head>
<body>
<div id="app">
<h1>FPS + EME Multi-Key Issue</h1>
<div>
<h2>Sources</h2>
<p>
The source for the page can be found <a href="https://github.com/castlabs/debug_fps_multikey">on GitHub</a>.
</p>
</div>
<div>
<h2>Your User-Agent</h2>
<pre><code id="useragent"></code></pre>
</div>
<div class="example" id="example-mse-multi-key">
<h2>MSE + EME with different SD and HD Keys
<span class="failed">does not work!</span></h2>
<p>
This is the problematic setup that does not work on <b>Desktop Safari</b>. We are creating
a media source here and listen to <code>encrypted</code> events with
<code>sinf</code> init data.
</p>
<p>
Segments are pushed in the following order:
</p>
<ol>
<li>HD Init segment. This triggers an <code>encrypted</code> event and
we load the HD key.
</li>
<li>HD Segment 1 (0s - 4s)</li>
<li>SD Init segment. This triggers an <code>encrypted</code> event and
we load the SD key.
</li>
<li>SD Segment 2 (4s - 8s)</li>
<li>SD Segment 3 (8s - 12s)</li>
</ol>
<p>
Keys are loaded successfully for both SD and
HD renditions and playback starts and plays until the segment transition
from HD to SD at 4 seconds. We do receive a <code>resize</code> event
but the <b>video freezes</b>. There is no indication of any error and even
the <code>timeupdate</code> events keep on coming in.
</p>
<p>
Note that seems is working fine on iOS but does not work as expected on Desktop Safari.
</p>
<div class="block">
<div class="player-container">
<video class="player" playsinline></video>
<div class="controls">
<button class="btn-load">Load</button>
</div>
<div class="logs long event-logs">
<h3>Event Logs</h3>
</div>
<div class="logs time">
<div>Time-Update -.--- s</div>
</div>
</div>
</div>
</div>
<div class="example" id="example-av-player">
<h2>AVPlayer with <code>encrypted</code> event. <span class="success">Works!</span> </h2>
<p>
This is the base implementation that uses AVPlayer and the video element
directly and loads an HLS playlist with <code>skd</code> init data.
</p>
<p>
We are using a bit of scaling and sizing CSS here to make the video
element appear large enough to AVPlayer to decide to scale up to the HD
rendition.
</p>
<p>
Watch the even log on screen. When the resize event occurs that indicates
that the video element resized to 1080p, the player successfully switched
from SD to HD and handled the license transition well.
</p>
<div class="block">
<div class="player-container">
<video class="player fake-size" width="2578" height="1080" playsinline></video>
<div class="controls">
<button class="btn-load">Load</button>
</div>
<div class="logs long event-logs">
<h3>Event Logs</h3>
</div>
<div class="logs time">
<div>Time-Update -.--- s</div>
</div>
</div>
</div>
</div>
<div class="example" id="example-mse-single-key">
<h2>MSE + EME with a single key for SD and HD. <span class="success">Works!</span></h2>
<p>
This example uses our single key test content and switches
between HD and SD renditions.
</p>
<div class="block">
<div class="player-container">
<video class="player" playsinline></video>
<div class="controls">
<button class="btn-load">Load</button>
</div>
<div class="logs long event-logs">
<h3>Event Logs</h3>
</div>
<div class="logs time">
<div>Time-Update -.--- s</div>
</div>
</div>
</div>
</div>
<div class="example">
<h2>MSE + EME SD Only and HD Only. <span class="success">Works!</span></h2>
<p>
This is the same setup and uses the same source and rendition as with
the multi key example, but we play only the SD or HD renditions
respectively to make sure that each rendition plays standalone.
</p>
<p>
<b>Note</b> that we are not pushing the full content but only the first 4
segments so video playback will stall at around 16 seconds.
</p>
<div id="example-mse-sd-only">
<h3>SD Only</h3>
<div class="block">
<div class="player-container">
<video class="player" playsinline></video>
<div class="controls">
<button class="btn-load">Load</button>
</div>
<div class="logs long event-logs">
<h3>Event Logs</h3>
</div>
<div class="logs time">
<div>Time-Update -.--- s</div>
</div>
</div>
</div>
</div>
<div id="example-mse-hd-only">
<h3>HD Only</h3>
<div class="block">
<div class="player-container">
<video class="player" playsinline></video>
<div class="controls">
<button class="btn-load">Load</button>
</div>
<div class="logs long event-logs">
<h3>Event Logs</h3>
</div>
<div class="logs time">
<div>Time-Update -.--- s</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>