| src/main/resources/public/css/controles.css | ●●●●● patch | view | raw | blame | history | |
| src/main/resources/public/css/history/historyStyle.css | ●●●●● patch | view | raw | blame | history | |
| src/main/resources/public/monitor/history.html | ●●●●● patch | view | raw | blame | history | |
| src/main/resources/public/monitor/live.html | ●●●●● patch | view | raw | blame | history |
src/main/resources/public/css/controles.css
@@ -1,7 +1,7 @@ /* 去掉全屏时显示的自带控制条 */ /*!* 去掉全屏时显示的自带控制条 *! video::-webkit-media-controls{ display:none !important; } }*/ .wrap h3{ text-align: center; height: 100px; src/main/resources/public/css/history/historyStyle.css
New file @@ -0,0 +1,19 @@ /*#jessibucaContainerHistory{ position: absolute; left:50%; top:50%; transform: translate(-60%, -80%); }*/ .player-wrapper { width: 900px; height: 500px; /*overflow-y: auto;*/ margin: 80px auto -100px auto ; text-align: center; } #container{ background-color: #0D0E1B; top:50%; } src/main/resources/public/monitor/history.html
@@ -6,31 +6,19 @@ <title>Jessibuca【回放】</title> <meta charset="utf-8"/> <link rel="stylesheet" href="../css/progressTime.css"> <link rel="stylesheet" href="../css/history/historyStyle.css"> <style> .player-wrapper { width: 900px; height: 500px; /*overflow-y: auto;*/ margin: 0 auto; text-align: center; } /* .player-wrapper canvas { width: 100%; height: 100%; }*/ </style> </head> <body> <!-- 播放器 --> <div class="player-wrapper" id="container" style="background-color: #0D0E1B;"></div> <!-- 时间轴 --> <div id="progressTime"></div> <div id="jessibucaContainerHistory"> <!-- 播放器 --> <div class="player-wrapper" id="container"></div> <!-- 时间轴 --> <div id="progressTime"></div> </div> <script src="../js/renderer.js"></script> @@ -92,12 +80,10 @@ }); function queryParam(name, url) { var search = window.location.search; var qArr = ''; var key = {}; if (url) { qArr = url.split("?")[1].split("&") @@ -107,13 +93,11 @@ } qArr = search.substr(1).split("&") } for (var i = 0; i < qArr.length; i++) { var firstPos = qArr[i].indexOf('='); key[qArr[i].slice(0, firstPos)] = qArr[i].slice(firstPos + 1) } if (name) { return key[name] } else { @@ -125,6 +109,44 @@ } } function play_video(video_url) { window.rtsp = video_url; window.streamPath = ""; $.ajax({ type: "get", url: "../../webapi/media/historical?param=" + video_url+"&startTime="+currentTimer, timeout: 5000, async: false, success: function (result) { //$("#iframeSon").attr("src", "../../data/video/public/test.html?url=" + result.jessica); var container = document.getElementById("playerContainer"); jessibuca = new Jessibuca({ container, decoder: "../../data/video/public/ff.js", videoBuffer: 1, isResize: false }); jessibuca.onLoad = function () { this.play(result.jessica); } $("#close_video").attr("onclick", "close_videoDiv(\"" + result.streamPath + "\")"); window.streamPath = result.streamPath; } }); } function close_video(streamPath) { jessibuca.destroy(); if (streamPath) { $.ajax({ type: "get", url: "../../webapi/media/stop?param=" + streamPath, async: false, success: function (result) { } }); } } </script> </body> src/main/resources/public/monitor/live.html
@@ -24,6 +24,9 @@ <script> var video_id; var stream_path; var $play = document.getElementById('play'); var $stop = document.getElementById('stop'); @@ -41,7 +44,7 @@ var h5lc = new Jessibuca({container, decoder: "../js/jessibuca/ff.js", videoBuffer: 0}); h5lc.onLoad = function () { this.play("ws://172.16.30.113:8082/live/ff80808178af424e0178af44e677000343616d657261.flv") //this.play("ws://172.16.30.113:8082/live/ff80808178af424e0178af44e677000343616d657261.flv") //this.play("ws://pull3.afb1188.com/live/" + stream + ".flv") } h5lc.onPlay = function () { @@ -95,53 +98,33 @@ } function play_video(video_url) { window.rtsp = video_url; window.streamPath = ""; //播放 function play_video(video_id) { windows.video_id = video_id; $.ajax({ type: "get", url: "../../webapi/equipment/getPlayUrl?url=" + video_url, url: "../../webapi/media/live?param=" + video_id, timeout: 5000, async: false, success: function (result) { //$("#iframeSon").attr("src", "../../data/video/public/test.html?url=" + result.jessica); var container = document.getElementById("playerContainer"); jessibuca = new Jessibuca({ container, decoder: "../../data/video/public/ff.js", videoBuffer: 1, isResize: false }); jessibuca.onLoad = function () { h5lc.onLoad = function () { this.play(result.jessica); } $("#close_video").attr("onclick", "close_videoDiv(\"" + result.streamPath + "\")"); window.streamPath = result.streamPath; window.stream_path = result.streamPath; } }); switch_layer(); } //关闭 function close_video(streamPath) { jessibuca.destroy(); if (streamPath) { $.ajax({ type: "delete", url: "../../webapi/equipment/deleteStream?streamPath=" + streamPath, type: "get", url: "../../webapi/media/stop?param=" + stream_path, async: false, success: function (result) { layer_flag = 'open'; $('.aside-right').css('left', '81%'); $('.aside-right').css('transition', 'left 2s'); $('.aside-left').css('left', '1%'); $('.aside-left').css('transition', 'left 2s'); $('#switch_CloseOpen').text("隐藏图层"); setTimeout(function () { $(".main .main-center .main-center-right").css('display', 'flex'); $(".main .main-center .main-center-left").css('display', 'flex'); $(".main .main-center .main-base-container").css("display", "none"); }, 900); $jessibucaContainer.style.display = 'none'; } }); }
