demo/index.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>