mirror of
https://github.com/shaka-project/shaka-player.git
synced 2026-06-26 17:46:26 +03:00
Chris Fillmore
270 lines
10 KiB
HTML
270 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<!--
|
|
Copyright 2016 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 lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="description" content="Shaka Player Demo">
|
|
<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1">
|
|
<meta name="mobile-web-app-capable" content="yes">
|
|
<meta name="theme-color" content="#ffffff">
|
|
|
|
<base target="_blank">
|
|
|
|
<title>Shaka Player Demo</title>
|
|
|
|
<link rel="manifest" href="app_manifest.json">
|
|
<link rel="icon" href="favicon.ico">
|
|
<link rel="stylesheet" href="demo.css">
|
|
<link rel="stylesheet" href="common/controls.css">
|
|
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Condensed">
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
|
|
|
|
<script defer src="//www.gstatic.com/cv/js/sender/v1/cast_sender.js"></script>
|
|
<script defer src="../node_modules/mux.js/dist/mux.js"></script>
|
|
|
|
<script>
|
|
COMPILED_JS = [
|
|
// The compiled library.
|
|
'../dist/shaka-player.compiled.js',
|
|
// The compiled demo.
|
|
'../dist/demo.compiled.js'
|
|
];
|
|
COMPILED_DEBUG_JS = [
|
|
// The compiled library, debug mode.
|
|
'../dist/shaka-player.compiled.debug.js',
|
|
// The compiled demo.
|
|
'../dist/demo.compiled.debug.js'
|
|
];
|
|
UNCOMPILED_JS = [
|
|
// Bootstrap the Shaka Player library through the Closure library.
|
|
'../third_party/closure/goog/base.js',
|
|
'../dist/deps.js',
|
|
// This file contains goog.require calls for all exported library classes.
|
|
'../shaka-player.uncompiled.js',
|
|
// These are the individual parts of the demo app.
|
|
'common/assets.js',
|
|
'common/controls.js',
|
|
'common/demo_utils.js',
|
|
'main.js',
|
|
'asset_section.js',
|
|
'configuration_section.js',
|
|
'info_section.js',
|
|
'log_section.js',
|
|
'offline_section.js'
|
|
];
|
|
</script>
|
|
|
|
<!-- Load the compiled or uncompiled version of the code. -->
|
|
<script defer src="load.js"></script>
|
|
</head>
|
|
<body>
|
|
<div id="container">
|
|
<h1>Shaka Player <span id="version"></span></h1>
|
|
|
|
<div class="input">
|
|
<p id="compiled_links">
|
|
<a href="#" id="uncompiled_link">uncompiled</a> |
|
|
<a href="#" id="debug_compiled_link">compiled (debug)</a> |
|
|
<a href="#" id="compiled_link">compiled (release)</a>
|
|
</p>
|
|
<p>This is a demo of Google's Shaka Player, a JavaScript library for
|
|
adaptive video streaming.</p>
|
|
|
|
<p>Choose an asset and tap <strong>Load</strong>.
|
|
(On Android, you may also need to press the play button on the
|
|
video.)</p>
|
|
|
|
<p class="links">
|
|
<a href="../docs/api/index.html">Documentation</a> |
|
|
<a href="https://github.com/google/shaka-player">Repo</a> |
|
|
<a href="https://www.npmjs.com/package/shaka-player">NPM</a> |
|
|
<a href="https://cdnjs.com/libraries/shaka-player">CDNJS</a>
|
|
</p>
|
|
|
|
<div class="flex">
|
|
<label for="assetList">Asset:</label>
|
|
<select id="assetList" class="flex-grow"></select>
|
|
</div>
|
|
<div id="customAsset">
|
|
<div class="flex">
|
|
<label for="manifestInput">Custom manifest:</label>
|
|
<input id="manifestInput" type="text" class="flex-grow">
|
|
</div>
|
|
<div class="flex">
|
|
<label for="licenseServerInput">Custom license server:</label>
|
|
<input id="licenseServerInput" type="text" class="flex-grow">
|
|
</div>
|
|
<div class="flex">
|
|
<label for="certificateInput">Custom license certificate URL:</label>
|
|
<input id="certificateInput" type="text" class="flex-grow">
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<button id="loadButton">Load</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="errorDisplay">
|
|
<div id="errorDisplayCloseButton">x</div>
|
|
<a id="errorDisplayLink" href="#"></a>
|
|
</div>
|
|
<div id="videoContainer" class="overlay-parent">
|
|
<video id="video" autoplay></video>
|
|
<div id="giantPlayButtonContainer" class="overlay">
|
|
<button id="giantPlayButton" class="material-icons">play_arrow</button>
|
|
</div>
|
|
<div id="bufferingSpinner" class="overlay">
|
|
<svg class="spinnerSvg" viewBox="25 25 50 50">
|
|
<circle class="spinnerPath" cx="50" cy="50" r="20"
|
|
fill="none" stroke-width="2" stroke-miterlimit="10" />
|
|
</svg>
|
|
</div>
|
|
<div id="castReceiverName" class="overlay"></div>
|
|
<div id="controlsContainer" class="overlay"><div id="controls">
|
|
<button id="playPauseButton" class="material-icons">play_arrow</button>
|
|
<label for="seekBar" class="for-screen-readers">seek</label>
|
|
<input id="seekBar" type="range" step="any" min="0" max="1" value="0">
|
|
<button id="rewindButton" class="material-icons">fast_rewind</button>
|
|
<div id="currentTime">0:00</div>
|
|
<button id="fastForwardButton" class="material-icons">fast_forward</button>
|
|
<button id="muteButton" class="material-icons">volume_up</button>
|
|
<label for="volumeBar" class="for-screen-readers">volume</label>
|
|
<input id="volumeBar" type="range" step="any" min="0" max="1" value="0">
|
|
<button id="castButton" class="material-icons">cast</button>
|
|
<button id="captionButton" class="material-icons">closed_caption</button>
|
|
<button id="fullscreenButton" class="material-icons">fullscreen</button>
|
|
</div></div>
|
|
</div>
|
|
|
|
<details id="logSection">
|
|
<summary>Logs</summary>
|
|
<div id="log"></div>
|
|
</details>
|
|
|
|
<details class="input">
|
|
<summary>Configuration</summary>
|
|
<div class="flex">
|
|
<label for="preferredAudioLanguage">Preferred audio language:</label>
|
|
<input id="preferredAudioLanguage" class="flex-grow" type="text">
|
|
</div>
|
|
<div class="flex">
|
|
<label for="preferredTextLanguage">Preferred text language:</label>
|
|
<input id="preferredTextLanguage" class="flex-grow" type="text">
|
|
</div>
|
|
<div>
|
|
<label for="showNative">Show native browser controls:</label>
|
|
<input id="showNative" type="checkbox">
|
|
</div>
|
|
<div>
|
|
<label for="showTrickPlay">Show trick play controls:</label>
|
|
<input id="showTrickPlay" type="checkbox">
|
|
</div>
|
|
<div>
|
|
<label for="enableAdaptation">Enable adaptation:</label>
|
|
<input id="enableAdaptation" type="checkbox" checked>
|
|
</div>
|
|
<div>
|
|
<label for="enableLoadOnRefresh">Auto-load on page refresh:</label>
|
|
<input id="enableLoadOnRefresh" type="checkbox">
|
|
</div>
|
|
<div>
|
|
<label for="logToScreen">Log to the screen:</label>
|
|
<input id="logToScreen" type="checkbox">
|
|
</div>
|
|
<div>
|
|
<label for="smallGapLimit">Maximum small gap size:</label>
|
|
<input id="smallGapLimit" class="flex-grow" type="text">
|
|
</div>
|
|
<div>
|
|
<label for="jumpLargeGaps">Jump large gaps:</label>
|
|
<input id="jumpLargeGaps" type="checkbox">
|
|
</div>
|
|
<div id="logLevelListDiv" hidden>
|
|
<label for="logLevelList">Log Level:</label>
|
|
<select id="logLevelList" class="flex-grow">
|
|
<option value="info">Info</option>
|
|
<option value="debug">Debug</option>
|
|
<option value="v">Verbose</option>
|
|
<option value="vv">Very Verbose</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label for="drmSettingsVideoRobustness">Video Robustness:</label>
|
|
<input id="drmSettingsVideoRobustness" type="text" class="flex-grow" list="robustnessSuggestions">
|
|
</div>
|
|
<div>
|
|
<label for="drmSettingsAudioRobustness">Audio Robustness:</label>
|
|
<input id="drmSettingsAudioRobustness" type="text" class="flex-grow" list="robustnessSuggestions">
|
|
</div>
|
|
<datalist id="robustnessSuggestions"></datalist>
|
|
</details>
|
|
|
|
<details class="input">
|
|
<summary>Info</summary>
|
|
<div class="flex">
|
|
<label for="audioLanguages">Audio languages:</label>
|
|
<select id="audioLanguages" class="flex-grow"></select>
|
|
</div>
|
|
|
|
<div class="flex">
|
|
<label for="variantTracks">Video+audio track combinations:</label>
|
|
<select id="variantTracks" class="flex-grow"></select>
|
|
</div>
|
|
|
|
<div class="flex">
|
|
<label for="textLanguages">Text languages:</label>
|
|
<select id="textLanguages" class="flex-grow"></select>
|
|
</div>
|
|
|
|
<div class="flex">
|
|
<label for="textTracks">Text tracks:</label>
|
|
<select id="textTracks" class="flex-grow"></select>
|
|
</div>
|
|
|
|
<div>
|
|
<span class="label">Active resolution:</span>
|
|
<span id="videoResDebug"></span>
|
|
</div>
|
|
|
|
<div>
|
|
<span class="label">Buffered:</span>
|
|
<span id="bufferedDebug"></span>
|
|
</div>
|
|
</details>
|
|
|
|
<details id="offlineSection" class="input">
|
|
<summary>Offline</summary>
|
|
<div>
|
|
<button id="storeDeleteButton">Store</button>
|
|
<span id="storeDeleteHelpText"></span>
|
|
</div>
|
|
<div id="progressDiv">
|
|
<span class="label">Progress:</span>
|
|
<span id="progress">0</span>%
|
|
</div>
|
|
<div id="offlineNameDiv">
|
|
<label for="offlineName">Name:</label>
|
|
<input id="offlineName" class="flex-grow" type="text">
|
|
</div>
|
|
</details>
|
|
</div>
|
|
</body>
|
|
</html>
|