针对jessibuca进行初始化

xc

2021-04-19 a4e316ec1c94247b0d3c7c3a587302c6cd64eff7

针对jessibuca进行初始化

 src/main/resources/public/css/controles.css

@@ -21,7 +21,7 @@

.player .control{
    position: absolute;
    background: rgba(255,255,0,0.3);
    background: rgba(255, 255, 255, 0.3);
    width: 680px;
    height: 40px;
    border-radius: 5px;
@@ -37,18 +37,18 @@
    color: #fff;
}
.player .control .play_pause,.player .control .expand{
    color: rgb(255, 221, 44);
    color: rgb(246, 255, 249);
}
.player .control div:nth-child(2){
    width: 460px;
    height: 10px;
    background-color: rgba(255,255,255,0.3);
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 5px;
    overflow: hidden;
}
.player .control .progress{
    display: block;
    width: 10%;
    width: 100%;
    height: 10px;
    background: #fff;
}

 src/main/resources/public/css/index.css

@@ -1,4 +1,4 @@
* {
 {
    margin: 0;
    padding: 0;
    list-style: none;

 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>


 src/main/resources/public/index2.html

@@ -83,7 +83,9 @@
                <div class="player-wrapper" id="container" style="background-color: #0D0E1B;width:900px;height:500px">
                </div>
                <div class="control">
                    <div class="fa fa-play play_pause"></div>
                    <!-- <div class="fa fa-play play_pause"></div> -->
                    <div class="fa fa-pause"></div>
					
                    <div>
                        <span class="progress"></span>
                    </div>