video1.html 2.19 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46
<html>
  <body>

    <div id="video-container">
      <div class="overlay"></div>
      <video id="video" width="100%" height="100%" poster="images/video1_poster.png">

        <source src="https://cdn-storage.br.de/MUJIuUOVBwQIbtC2uKJDM6OhuLnC_2rc5H1S/_AJS/_A4f5y4p9U1S/89a94450e10911e7a0b0984be10adece_B.mp4" type="video/mp4">
          <p>Error: your browser doesn't support HTML5 video.</p>
        </video>

        <div id="video-controls">
          <div class="controls">
            <button type="button" id="play-pause" class="icon play"><span class="icon-play" aria-hidden="true"></span></button>
            <p id="timeDisplay" class="time"><span id="timeCurrent" class="current">00:00:00</span> / <span id="timeDuration" class="duration">00:00:00</span></p>
            <div class="seek-bar-wrapper" id="seek-bar-wrapper">
              <input id="seek-bar" type="range" value="0" step="0.001">
            </div>
            <button type="button" id="mute" class="text mute">100</button>
            <input type="range" id="volume-bar" value="100">
            <button type="button" class="icon full-screen" id="fullscreen">
              <img class="icon-screen" src=images/icon_fullscreen.png>
              <!-- <span class="icon-screen" aria-hidden="true"></span> -->
            </button>
            <div class="clearfix"></div>
          </div>
        </div>
    </div>

    <div class="description">
      <h2>Josef Albers - Ehrung des Quadrats: Gelbe Zentrum (1954)</h2>
      <p class="prose-big">Bla bla</p>
      Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla
      Bla bla bla Bla bla bla Bla bla bla
      Bla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla bla
      Bla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla bla
      Bla bla bla Bla bla bla Bla bla bla
      Bla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla bla
      Bla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla bla
      Bla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla bla
    </div>
    </content>
    </div>

  </body>
</html>