mirror of
https://github.com/shaka-project/shaka-player.git
synced 2026-06-14 15:56:38 +03:00
Sandra Lokshina
6b1ca2d229
Other contributors: - @joeyparrish - @michellezhuogg - @TheModMaker - @theodab - @vaage Change-Id: If6df33d9ab5035d1ead4402004f7de37ee8470f4
257 lines
9.3 KiB
HTML
257 lines
9.3 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="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>
|
|
<!-- transmuxing support is enabled by including this: -->
|
|
<script defer src="../node_modules/mux.js/dist/mux.js"></script>
|
|
|
|
<script>
|
|
COMPILED_JS = [
|
|
// The compiled library, with UI.
|
|
'../dist/shaka-player.ui.js',
|
|
// The compiled demo.
|
|
'../dist/demo.compiled.js',
|
|
];
|
|
COMPILED_DEBUG_JS = [
|
|
// The compiled library, with UI, debug mode.
|
|
'../dist/shaka-player.ui.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',
|
|
// Enable less, the CSS pre-processor.
|
|
'../node_modules/less/dist/less.js',
|
|
// These are the individual parts of the demo app.
|
|
'common/assets.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 target="_self" href="?build=uncompiled" id="uncompiled_link">uncompiled</a> |
|
|
<a target="_self" href="?build=debug_compiled" id="debug_compiled_link">compiled (debug)</a> |
|
|
<a target="_self" href="?build=compiled" 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" class="appButton">Load</button>
|
|
<button id="unloadButton" class="appButton">Unload</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="errorDisplay">
|
|
<div id="errorDisplayCloseButton">x</div>
|
|
<a id="errorDisplayLink" href="#"></a>
|
|
</div>
|
|
|
|
<div data-shaka-player-container data-shaka-player-cast-receiver-id="7B25EC44">
|
|
<video autoplay data-shaka-player id="video"></video>
|
|
</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 class="flex">
|
|
<label for="preferredUILanguage">Preferred UI language:</label>
|
|
<input id="preferredUILanguage" class="flex-grow" type="text">
|
|
</div>
|
|
<div class="flex">
|
|
<label for="preferredAudioChannelCount">Preferred audio channel count:</label>
|
|
<input id="preferredAudioChannelCount" type="number">
|
|
</div>
|
|
<div>
|
|
<label for="showNative">Show native browser controls:</label>
|
|
<input id="showNative" 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>
|
|
<div>
|
|
<label for="availabilityWindowOverride">Availability Window Override:</label>
|
|
<input id="availabilityWindowOverride" type="number" step="30" min="0">
|
|
</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" class="appButton">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>
|