VulpesOS/gaia/apps/video/view.html

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
    <meta charset="utf-8" />
    <title>Videos</title>
    <meta name="defaultLanguage" content="en-US">
    <meta name="availableLanguages" content="en-US">
    <link rel="localization" href="locales/video.{locale}.properties">
    <link rel="stylesheet" type="text/css" href="style/video.css" />
    <link rel="stylesheet" type="text/css" href="style/spinner.css" />
    <link rel="stylesheet" type="text/css" href="shared/style/status.css" />
    <link rel="stylesheet" type="text/css" href="style/video_tablet.css" media="(min-height: 768px) and (min-width: 768px)" />

  </head>
  <body role="application" class="skin-dark layout-fullscreen-player view-activity theme-media">
    <!-- display this at startup while we create thumbnails -->
    <div id="spinner-overlay" class="hidden" role="progress"
             data-l10n-id="spinner-overlay"><div id="spinner"></div></div>
    <section role="region" id="player-view" class="video-controls-hidden">
      <!-- video controls header -->
      <gaia-header ignore-dir id="player-header" action="back" class="video-controls">
        <h1 id="video-title"></h1>
        <button id="save" data-l10n-id="save" hidden></button>
      </gaia-header>
      <!-- In order for the screen reader to be able to activate the container
             to toggle controls, it must have the semantics of the button -->
      <div id="video-container" role="button" tabindex="0">
        <!-- Hiding the video element from the screen reader since the
             controls are implemented elsewhere. -->
        <video id="player" preload="metadata" aria-hidden="true"></video>
      </div>
      <!-- video controls footer toolbar -->
      <div role="toolbar" class="video-controls bottom">
        <!-- It is simpler and less verbose (for the screen reader) to not
             expose that this block is a footer and consider it part of
             its toolbar container. -->
        <footer id="videoBar" role="presentation">
          <div id="timeSlider" role="slider">
            <!-- We need to use aria hideen for the text nodes in the slider
                 subtree because the screen reader treats sliders as atomic
                 elements and does not step inside their subtree. All the
                 information is conveyed via the slider attributes instead -->
            <span id="elapsed-text" aria-hidden="true"></span>
            <div id="slider-wrapper" aria-hidden="true">
              <div id="elapsedTime" class="progress"></div>
              <div id="bufferedTime" class="progress"></div>
              <div id="timeBackground" class="progress"></div>
              <button id="playHead"></button>
            </div>
            <span id="duration-text" aria-hidden="true"></span>
          </div>
        </footer>
        <!-- It is simpler and less verbose (for the screen reader) to not
             expose that this block is a footer and consider it part of
             its toolbar container. -->
        <footer id="videoControlBar" role="presentation">
          <div id="videoToolBar">
            <button id="seek-backward" class="player-controls-button"
                    data-icon="skip-back" data-l10n-id="seek-backward"></button>
            <button id="play" data-l10n-id="pause-button" class="player-controls-button" data-icon="pause"></button>
            <button id="seek-forward" class="player-controls-button"
                    data-icon="skip-forward" data-l10n-id="seek-forward"></button>
          </div>
        </footer>
      </div>
      <!-- display messages like "Cannot load video" here -->
      <form id="in-use-overlay" role="dialog" data-type="confirm" class="hidden">
        <section id="in-use-overlay-content">
          <h1 id="in-use-overlay-title"></h1>
          <p id="in-use-overlay-text"></p>
        </section>
      </form>
    </section>
    <section id="banner" role="status" hidden>
      <p id="message"></p>
    </section>

    <!-- Shared Libs -->
    <script src="shared/js/intl/l20n.js"></script>
    <script src="shared/js/device_storage/get_storage_if_available.js"></script>
    <script src="shared/js/device_storage/get_unused_filename.js"></script>

    <script defer src="shared/js/blobview.js"></script>
    <script defer src="shared/js/mime_mapper.js"></script>
    <script defer src="shared/js/media/get_video_rotation.js"></script>
    <script defer src="shared/js/media/media_utils.js"></script>

    <!-- Web Components -->
    <script defer src="shared/elements/config.js"></script>
    <link rel="stylesheet" type="text/css" href="shared/elements/gaia-icons/gaia-icons.css">
    <link rel="stylesheet" type="text/css" href="app://theme.gaiamobile.org/shared/elements/gaia-theme/gaia-theme.css">
    <script defer src="shared/elements/gaia-header/dist/gaia-header.js"></script>

    <!-- App Code -->
    <script defer src="js/video_loading_checker.js"></script>
    <script defer src="js/video_utils.js"></script>
    <script defer src="js/forward_rewind_controller.js"></script>
    <script defer src="js/seeker.js"></script>
    <script defer src="js/view.js"></script>
  </body>
</html>