Monica视频监控处理程序
xc
2021-04-23 daa2210ce3aedfd425865aaff246bd4946179647
直播流组件
3 files modified
1 files added
54 ■■■■ changed files
src/main/resources/public/css/controles.css 4 ●●●● patch | view | raw | blame | history
src/main/resources/public/css/live/liveStyle.css 6 ●●●●● patch | view | raw | blame | history
src/main/resources/public/js/live/livepler.js 20 ●●●●● patch | view | raw | blame | history
src/main/resources/public/monitor/live.html 24 ●●●●● patch | view | raw | blame | history
src/main/resources/public/css/controles.css
@@ -1,7 +1,3 @@
*{
    margin: 0;
    padding: 0;
}
/* 去掉全屏时显示的自带控制条 */
video::-webkit-media-controls{
    display:none !important;
src/main/resources/public/css/live/liveStyle.css
New file
@@ -0,0 +1,6 @@
#jessibucaContainer{
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-60%, -80%);
}
src/main/resources/public/js/live/livepler.js
@@ -1,5 +1,23 @@
!(function () {
    window.onkeydown = function () {
        h5lc.fullscreen = false
    }
    let _content = $("<div class=\"content\">\n" +
        "        <div class=\"player\" onmouseover=\"$('.player .control').css('display', 'block')\" onmouseout=\"$('.player .control').css('display', 'none')\">\n" +
        "            <div class=\"player-wrapper\" id=\"container\" style=\"background-color: #0D0E1B;\">\n" +
        "            </div>\n" +
        "            <div class=\"control\">\n" +
        "                <div class=\"fa fa-play\" id=\"play\"></div>\n" +
        "                <div class=\"fa fa-stop\" id=\"stop\" style=\"display: none\"></div>\n" +
        "                <div class=\"timer\">\n" +
        "                    <span class=\"progress_timer\">00:00:00</span>\n" +
        "                    <span class=\"duration_timer\">00:00:00</span>\n" +
        "                </div>\n" +
        "                <div class=\"fa fa-expand expand\" onclick=\"h5lc.fullscreen=true\"></div>\n" +
        "            </div>\n" +
        "        </div>\n" +
        "    </div>");
    $("#jessibucaContainer").append(_content);
})();
src/main/resources/public/monitor/live.html
@@ -9,6 +9,7 @@
    <link rel="stylesheet" href="../css/controles.css">
    <link rel="stylesheet" href="../css/live/liveStyle.css">
</head>
<body>
@@ -23,33 +24,12 @@
<script>
    window.onkeydown = function () {
        h5lc.fullscreen = false
    }
    let _content = $("<div class=\"content\">\n" +
        "        <div class=\"player\" onmouseover=\"$('.player .control').css('display', 'block')\" onmouseout=\"$('.player .control').css('display', 'none')\">\n" +
        "            <div class=\"player-wrapper\" id=\"container\" style=\"background-color: #0D0E1B;\">\n" +
        "            </div>\n" +
        "            <div class=\"control\">\n" +
        "                <div class=\"fa fa-play\" id=\"play\"></div>\n" +
        "                <div class=\"fa fa-stop\" id=\"stop\" style=\"display: none\"></div>\n" +
        "                <div class=\"timer\">\n" +
        "                    <span class=\"progress_timer\">00:00:00</span>\n" +
        "                    <span class=\"duration_timer\">00:00:00</span>\n" +
        "                </div>\n" +
        "                <div class=\"fa fa-expand expand\" onclick=\"h5lc.fullscreen=true\"></div>\n" +
        "            </div>\n" +
        "        </div>\n" +
        "    </div>");
    $("#jessibucaContainer").append(_content);
    var $play = document.getElementById('play');
    var $stop = document.getElementById('stop');
    var container = document.getElementById("container");
    //入参 flv播放流
    //入参
    let url = getQueryVariable("url");
    var isPlaying = false;