master

分支 (2)

管理

管理

master

dev

tiled-panoramic-video-player
/
index.html

<!DOCTYPE html>

<!--
* The copyright in this software is being made available under the following
* TNO license terms. This software may be subject to other third party and
* TNO intellectual property rights, including patent rights,
* and no such rights are granted under this license.
*
* Created by Jorrit van den Berg on 7/12/15.
* Copyright (c) 2016, TNO.
* All rights reserved.
*
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions are met:
*
*  * Redistributions of source code must retain the above copyright notice,
*    this list of conditions and the following disclaimer.
*  * Redistributions in binary form must reproduce the above copyright notice,
*    this list of conditions and the following disclaimer in the documentation
*    and/or other materials provided with the distribution.
*  * Neither the name of TNO nor the names of its employees may
*    be used to endorse or promote products derived from this software without
*    specific prior written permission.
*
* THIS SOFTWARE IS PROVIDED BY TNO "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES,
* INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND
* FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL TNO
* BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
* CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
* SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
* INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
* CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
* ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
* THE POSSIBILITY OF SUCH DAMAGE.
-->

<html>

<head>
  <meta charset="UTF-8">
  <title>DASH-SRD Player</title>

  <!--CSS-->
  <link rel="stylesheet" type="text/css" href="./public/srdplayerstyle.css">
  <link rel="stylesheet" type="text/css" href="./public/controlbar.css">

  <!--3rd Party JavaScript libs-->
  <script src="./build/dash.all.js"></script>
  <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src="./src/lib/hammer.min.js"></script>
  <script src="./src/lib/jquery.hammer.js"></script>
  <script src="./src/lib/timingsrc.js"></script>

  <!--SRD Player JavaScript -->
  <script src="./src/srdplayer/DashLauncher.js"></script>
  <script src="./src/srdplayer/Initializer.js"></script>
  <script src="./src/srdplayer/MPDAttacher.js"></script>
  <script src="./src/srdplayer/MPDManager.js"></script>
  <script src="./src/srdplayer/MPDParser.js"></script>
  <script src="./src/srdplayer/MPDRetriever.js"></script>
  <script src="./src/srdplayer/PlaybackControls.js"></script>
  <script src="./src/srdplayer/PlayerEventHandlers.js"></script>
  <script src="./src/srdplayer/UIEventHandlers.js"></script>
  <script src="./src/utils/ArrayTools.js"></script>
  <script src="./src/utils/BrowserDetector.js"></script>
  <script src="./src/utils/CrossOriginRequest.js"></script>
  <script src="./src/utils/DateTime.js"></script>
  <script src="./src/utils/Matchers.js"></script>
  <script src="./src/utils/ServiceBus.js"></script>
  <script src="./src/utils/xml2json.js"></script>

</head>


<body class="unselectable" onLoad="Dash.createAll()">

  <div id="SRDPlayer" class="unselectable">
    <div id="videoContainer">
      <div id="bannerbox">
      </div>
      <video id="fallBackLayer" width="1280" class="dashjs-player unselectable"></video>
      <table id="zoomLayer1" cellspacing="0" cellpadding="0">
        <tr>
          <td>
            <video id="video1" width="1280" class="dashjs-player unselectable"></video>
          </td>
          <td>
            <video id="video2" width="1280" class="dashjs-player unselectable"></video>
          </td>
        </tr>
        <tr>
          <td>
            <video id="video3" width="1280" class="dashjs-player unselectable"></video>
          </td>
          <td>
            <video id="video4" width="1280" class="dashjs-player"></video>
          </td>
        </tr>
      </table>

      <table id="zoomLayer2" cellspacing="0" cellpadding="0">
        <tr>
          <td>
            <video id="video5" width="1280" class="dashjs-player unselectable"></video>
          </td>
          <td>
            <video id="video6" width="1280" class="dashjs-player unselectable"></video>
          </td>
        </tr>
        <tr>
          <td>
            <video id="video7" width="1280" class="dashjs-player unselectable"></video>
          </td>
          <td>
            <video id="video8" width="1280" class="dashjs-player unselectable"></video>
          </td>
        </tr>
      </table>

    </div>

    <div id="videoController" class="video-controller unselectable">


      <div id="playPauseBtn" class="btn-play-pause" title="Play/Pause" onclick="playPause()">
        <span id="iconPlayPause" class="icon-play"></span>
      </div>
      <span id="videoTime" class="time-display">00:00:00</span>

      <div id="fullscreenBtn" class="btn-fullscreen" title="Fullscreen" onclick="switchScreenMode()">
        <span id="icon-fullscreen" class="icon-fullscreen-enter"></span>
      </div>
      <input type="range" id="volumebar" class="volumebar" value="1" min="0" max="1" step="0.01" />

      <div id="muteBtn" class="btn-mute" title="Mute" onclick="muteSound()">
        <span id="iconMute" class="icon-mute-off"></span>
      </div>

      <span id="videoDuration" class="duration-display">00:00:00</span>

      <div class="seekContainer">
        <input type="range" id="seekbar" value="0" class="seekbar" min="0" step="0.01" />
      </div>
    </div>
    <br>

    <div id="videoLoader">
      <input type="text" id="mpdURL"
        value="http://www.tnomedialab.nl/mmsys16/dash-srd/non-overlapping/Dancers/output.mpd">
      <input type="submit" name="Open video" id="mpdButton" onclick="openVideo()" value="Open video" />
    </div>
    <br>
    <br>
    <br>
    <p id="usageHint">Double click on a video zooms in or out. When zoomed in, the video can also be dragged.</p>
  </div>
  <br>
  <br>
  <br>
  <br>
</body>

</html>