src/page/test/subscribe360/index.html

<!doctype html>
{{> license}}
<html>
  <head>
    {{> meta title='Subscriber 360 Test'}}
    {{> header-scripts}}
    {{> header-stylesheets}}
    <style>
      #red5pro-subscriber {
        position: absolute;
        left: 0;
      }
      #canvas-container {
        position: absolute;
        display: inline-block;
        left: 0;
        width: 100%;
        height: 480px;
        background-color: #000;
      }
      #button-control-container {
        position: absolute;
        box-sizing: border-box;
        padding: 20px;
        width: 100%;
        text-align: right;
        z-index: 101;
        bottom: 60px;
      }
      #canvas {
        width: 100%;
        height: 100%;
      }

      .ui-button {
        padding: 20px 0px!important;
      }

      .z-order-below {
        z-index: 0;
      }
      .z-order-above {
        z-index: 1;
      }
      .fixed-height {
        height: 480px;
      }
      .red5pro-media-control-bar {
        z-index: 100;
      }
    </style>
  </head>
  <body>
    {{> top-bar }}
    <div id="app">
      {{> settings-link}}
      {{> test-info testTitle='Subscriber 360 Test'}}
      {{> status-field-subscriber}}
      {{> statistics-field packets_field='Packets Received'}}
      <div class="centered fixed-height" style="position: relative">
          <video id="red5pro-subscriber"
                  controls="controls" autoplay="autoplay" playsinline
                  class="red5pro-subscriber red5pro-media red5pro-media-background z-order-above"
                  width="640" height="480">
          </video>
      </div>
    </div>
    {{> footer}}
    {{> body-scripts}}
    {{> mobile-subscriber-util}}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/103/three.min.js"></script>
    <script src="renderer-360.js"></script>
    <script src="index.js"></script>
  </body>
</html>