直播与回放分布

xc

2021-04-19 c5a2db78bb0b955916c203a7889799d6a1bc28a7

 src/main/resources/public/index.html

@@ -71,71 +71,6 @@
            overflow-y: auto;
            padding: 5px;
        }
		
      /* ================ 播放器控制面板样式 start ================ */
      .controls-container {
          width: 720px;
          height: 40px;
          position: absolute;
          left: 0px;
          bottom: -40px;
          background-color: #000;
      }
		
      /* 播放/暂停 */
      .controls-container .switch {
          width: 20px;
          height: 20px;
          display: block;
          font-size: 20px;
          color: #fff;
          position: absolute;
          left: 10px;
          top: 10px;
      }
      /* 全屏 */
      .controls-container .expand {
          width: 20px;
          height: 20px;
          display: block;
          font-size: 20px;
          color: #fff;
          position: absolute;
          right: 10px;
          top: 10px;
      }
      /* 进度条 */
      .controls-container .progress {
          width: 430px;
          height: 10px;
          position: absolute;
          left: 40px;
          bottom: 15px;
          background-color: #555;
      }
      .controls-container .progress .bar {
          /*width: 100%;*/
          width: 430px;
          height: 100%;
          border-radius: 3px;
          cursor: pointer;
          position: absolute;
          left: 0;
          top: 0;
          opacity: 0;
          z-index: 999;
      }
      .controls-container .progress .loaded {
          width: 60%; /* 视频缓存的进度, 后期可动态变化 */
          height: 100%;
          background-color: #999;
          border-radius: 3px;
          position: absolute;
          left: 0;
          top: 0;
          z-index: 2;
      }
      /* ================ 播放器控制面板样式 end ================ */
    </style>
</head>

@@ -158,8 +93,8 @@
</div>

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="./ajax.js"></script>
<script src="./renderer.js"></script>
<script src="js/ajax.js"></script>
<script src="js/renderer.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.progressTime.js"></script>