mirror of
https://github.com/shaka-project/shaka-player.git
synced 2026-06-14 15:56:38 +03:00
Timothy Drews
b534b70296
Adds "buffered ahead" and "buffered behind" indicators to the UI. Issue #47 Change-Id: I3e6a60ea387e97c98003a47c0e3a599e907ee184
201 lines
7.5 KiB
HTML
201 lines
7.5 KiB
HTML
<!DOCTYPE html>
|
|
<!--
|
|
Copyright 2014 Google Inc.
|
|
|
|
Licensed under the Apache License, Version 2.0 (the "License");
|
|
you may not use this file except in compliance with the License.
|
|
You may obtain a copy of the License at
|
|
|
|
http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
Unless required by applicable law or agreed to in writing, software
|
|
distributed under the License is distributed on an "AS IS" BASIS,
|
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
See the License for the specific language governing permissions and
|
|
limitations under the License.
|
|
-->
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Shaka Player Test</title>
|
|
<link rel="shortcut icon" href="assets/favicon.ico">
|
|
<link rel="stylesheet" href="index.css">
|
|
<link rel="stylesheet" href="controls.css">
|
|
<script src="load.js"></script>
|
|
<script src="controls.js"></script>
|
|
<script src="app.js"></script>
|
|
</head>
|
|
<body>
|
|
<table>
|
|
<!-- Common rows -->
|
|
<tr>
|
|
<td colspan="3" class="heading">Stream Setup</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Force prefixed EME?</td>
|
|
<td colspan="2"><input id="forcePrefixed" type="checkbox"></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Stream type:</td>
|
|
<td colspan="2">
|
|
<select id="streamTypeList" onchange="app.onStreamTypeChange()">
|
|
<option value="dash">DASH</option>
|
|
<option value="http">HTTP</option>
|
|
<option value="offline">Offline</option>
|
|
</select>
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- HTTP stream rows -->
|
|
<tr class="http">
|
|
<td>Media URL:</td>
|
|
<td colspan="2" style="width: 400px;"><input id="mediaUrlInput" type="text" style="width: 98%;"></td>
|
|
</tr>
|
|
<tr class="http">
|
|
<td>Key system:</td>
|
|
<td colspan="2">
|
|
<select id="keySystemList">
|
|
<option value="org.w3.clearkey">org.w3.clearkey</option>
|
|
<option value="com.widevine.alpha">com.widevine.alpha</option>
|
|
<option value="net.bogus.keysystem">net.bogus.keysystem</option>
|
|
<option value="">(none)</option>
|
|
</select>
|
|
</td>
|
|
</tr>
|
|
<tr class="http">
|
|
<td>License server URL:</td>
|
|
<td colspan="2"><input id="licenseServerUrlInput" type="text" style="width: 98%;"></td>
|
|
</tr>
|
|
<tr class="http">
|
|
<td>Subtitles URL:</td>
|
|
<td colspan="2"><input id="subtitlesUrlInput" type="text" style="width: 98%;"></td>
|
|
</tr>
|
|
|
|
<!-- DASH stream rows -->
|
|
<tr class="dash">
|
|
<td>Preferred language:</td>
|
|
<td colspan="2"><input id="preferredLanguage"></td>
|
|
</tr>
|
|
<tr class="dash">
|
|
<td>Test manifest:</td>
|
|
<td colspan="2">
|
|
<select id="mpdList" onchange="app.onMpdChange()">
|
|
<option value="assets/angel_one.mpd">"Angel One" (TNG clip) - multilingual, subtitles, VP8</option>
|
|
<option value="assets/car-20120827-manifest.mpd">"Car" (YT DASH test) - MP4</option>
|
|
<option value="assets/car_cenc-20120827-manifest.mpd">"Car/CENC" (YT DASH EME test) - MP4, ClearKey</option>
|
|
<option value="assets/feelings_vp9-20130806-manifest.mpd">"Feelings" (YT DASH test) - VP9</option>
|
|
<option value="assets/feelings_audio_only-20130806-manifest.mpd">"Feelings" (YT DASH test) - Audio only</option>
|
|
<option value="assets/car_segmenttemplate.mpd">"Car/SegmentTemplate" (Chromecast test) - MP4 (no SIDX, video only), Widevine</option>
|
|
<option value="//download.tsi.telecom-paristech.fr/gpac/DASH_CONFORMANCE/TelecomParisTech/mp4-main-multi/mp4-main-multi-mpd-AV-NBS.mpd">"GPAC/SegmentList" (conformance test)</option>
|
|
<option value="assets/oops_cenc-20121114-signedlicenseurl-manifest.mpd">"Oops" (modified YT DASH EME test) - MP4, multi-DRM</option>
|
|
<option value="assets/oops_cenc_pssh.mpd">"Oops" (modified YT DASH EME test) - MP4, Widevine, PSSH in MPD</option>
|
|
<option value="//storage.googleapis.com/widevine-demo-media/sintel-1080p/dash.mpd">"Sintel" (1080p high bitrate test) - MP4</option>
|
|
<option value="//storage.googleapis.com/widevine-demo-media/sintel-multicodec-4k/dash.mpd">"Sintel" (4k) - MP4, VP8, VP9</option>
|
|
<option value="">(custom)</option>
|
|
</select>
|
|
</td>
|
|
</tr>
|
|
<tr class="dash">
|
|
<td>Custom manifest URL:</td>
|
|
<td>
|
|
<input id="manifestUrlInput" type="text" style="width: 98%;" oninput="app.onMpdCustom()">
|
|
</td>
|
|
<td>
|
|
<button id="storeButton" onclick="app.storeStream();">Store stream offline</button>
|
|
</td>
|
|
</tr>
|
|
<tr class="dash">
|
|
<td>
|
|
Custom WV license server URL:
|
|
<span title="If specified, overrides interpretation of ContentProtection elements in the manifest. Implies the use of Widevine.">[?]</span>
|
|
</td>
|
|
<td colspan="2">
|
|
<input id="wvLicenseServerUrlInput" type="text" style="width: 98%;">
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- Offline rows -->
|
|
<tr class="offline">
|
|
<td>Offline Content:</td>
|
|
<td>
|
|
<select id="offlineStreamList"></select>
|
|
</td>
|
|
<td>
|
|
<button id="deleteButton" onclick="app.deleteStream();">Delete stream from storage</button>
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- Common rows -->
|
|
<tr>
|
|
<td colspan="3">
|
|
<button id="loadButton" onclick="app.loadStream();">Load stream</button>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<br>
|
|
|
|
<table>
|
|
<tr>
|
|
<td colspan="2" class="heading">Stream Info</td>
|
|
<td id="version"></td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="3">
|
|
Enable adaptation?
|
|
<input id="adaptationEnabled" type="checkbox" checked onchange="app.onAdaptationChange()">
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Available video tracks:</td>
|
|
<td><select id="videoTracks" onchange="app.onVideoChange()"></select></td>
|
|
<td><button id="cycleVideo" onclick="app.cycleVideo()">Cycle video tracks</button></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Available audio tracks:</td>
|
|
<td><select id="audioTracks" onchange="app.onAudioChange()"></select></td>
|
|
<td><button id="cycleAudio" onclick="app.cycleAudio()">Cycle audio tracks</button></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Available text tracks:</td>
|
|
<td><select id="textTracks" onchange="app.onTextChange()"></select></td>
|
|
<td>
|
|
Enable subs?
|
|
<input id="textEnabled" type="checkbox" onchange="app.onTextChange()">
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Active resolution:</td>
|
|
<td id="videoResDebug" colspan="2"></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Buffered ahead:</td>
|
|
<td id="bufferedAheadDebug" colspan="2"></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Buffered behind:</td>
|
|
<td id="bufferedBehindDebug" colspan="2"></td>
|
|
</tr>
|
|
</table>
|
|
|
|
<br>
|
|
|
|
<div id="videoContainer">
|
|
<video id="video" poster="assets/poster.jpg"
|
|
crossorigin="anonymous"
|
|
autoplay></video>
|
|
<div id="bufferingSpinner"></div>
|
|
<div id="videoControlsEnclosure"><div id="videoControls">
|
|
<input id="playButton" type="button">
|
|
<input id="pauseButton" type="button">
|
|
<input id="seekBar" type="range" step="any" min="0" max="1">
|
|
<div id="currentTime">0:00</div>
|
|
<input id="muteButton" type="button">
|
|
<input id="unmuteButton" type="button">
|
|
<input id="volumeBar" type="range" step="any" min="0" max="1">
|
|
<input id="fullscreenButton" type="button">
|
|
</div></div>
|
|
</div>
|
|
</body>
|
|
</html>
|