From 9b516646acbc7392d7647e2619383a45f8db2978 Mon Sep 17 00:00:00 2001
From: xc <double72cheng@gmail.com>
Date: Wed, 28 Apr 2021 15:55:51 +0800
Subject: [PATCH] 直播插件沉浸式修改
---
src/main/resources/public/css/controles.css | 17 ++------
src/main/resources/public/monitor/history.html | 14 +++---
src/main/resources/public/js/live/liveComponent.js | 42 ++++++++++-----------
src/main/resources/public/js/renderer.js | 9 ++--
src/main/resources/public/monitor/live.html | 25 ++++++------
5 files changed, 50 insertions(+), 57 deletions(-)
diff --git a/src/main/resources/public/css/controles.css b/src/main/resources/public/css/controles.css
index 4d2bd45..d865c42 100644
--- a/src/main/resources/public/css/controles.css
+++ b/src/main/resources/public/css/controles.css
@@ -26,29 +26,22 @@
.player .control{
position: absolute;
background: rgba(255, 255, 255, 0.3);
- width: 680px;
+ width: 120px;
height: 40px;
border-radius: 10px;
left: 60%;
- bottom: -10px;
- transform: translateX(-48%);
+ bottom: -60px;
+ transform: translateX(-50%);
+ display: none;
}
.player .control div{
- display: inline-block;
line-height: 40px;
- margin-left: 14px;
font-size: 18px;
color: #fff;
+ margin: 0px 11px 0px 9px;
}
.player .control .play_pause,.player .control .expand{
color: rgb(246, 255, 249);
-}
-.player .control div:nth-child(2){
- width: 460px;
- height: 10px;
- background-color: rgba(255, 255, 255, 0.5);
- border-radius: 5px;
- overflow: hidden;
}
.player .control .progress{
display: block;
diff --git a/src/main/resources/public/js/live/liveComponent.js b/src/main/resources/public/js/live/liveComponent.js
index 592c507..9dc466d 100755
--- a/src/main/resources/public/js/live/liveComponent.js
+++ b/src/main/resources/public/js/live/liveComponent.js
@@ -16,10 +16,8 @@
let rtspUrl = opt.rtspUrl;
this.container = document.getElementById("container");
- let $play = document.getElementById('play');
- let $stop = document.getElementById('stop');
- let h5lc = new Jessibuca({container, decoder: "js/jessibuca/ff.js", videoBuffer: 0});
+ let h5lc = new Jessibuca({container, decoder: "../js/jessibuca/ff.js", videoBuffer: 0});
//rtspURL不为空 走rtsp rtspURL为空 走平台摄像头id
if (opt.rtspUrl){
@@ -30,18 +28,16 @@
this.play(jessicaURL);
}
stream_path = result.streamPath;
- $play.style.display = 'none';
- $stop.style.display = 'inline';
});
}else {
this.playVideo(cameraId, function (result) {
+ //视频画面完全填充canvas区域
+ h5lc.setScaleMode(0);
h5lc.onLoad = function () {
let jessicaURL = result.jessicaURL;
this.play(jessicaURL);
}
stream_path = result.streamPath;
- $play.style.display = 'none';
- $stop.style.display = 'inline';
});
}
@@ -54,7 +50,7 @@
h5lc.destroy();
than.closeVideo(stream_path)
than.elem.style.display = 'none';
- }, false);
+ });
//全屏
let $expand = document.getElementById('expand');
@@ -62,27 +58,29 @@
h5lc.fullscreen=true
}, false);
+ //截图
+ let $screenshot = document.getElementById('screenshot');
+ $screenshot.addEventListener('click', function () {
+ h5lc.screenshot(null,"png",0.5)
+ h5lc.fullscreen=false
+ }, false);
+
}
function appendContent(element) {
- 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" +
+ let _content = " <div class=\"content\">\n" +
+ " <div class=\"player\" id=\"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=\"fa fa-expand expand\" id=\"expand\"></div>\n" +
- " <div class=\"fa fa-close\" id=\"close\"></div>\n" +
+ " <div class=\"control\">\n" +
+ " <div class=\"fa fa-expand expand\" id=\"expand\"></div>\n" +
+ " <div class=\"fa fa-camera\" id=\"screenshot\"></div>\n" +
+ " <div class=\"fa fa-close\" id=\"close\"></div>\n" +
+ " </div>\n" +
" </div>\n" +
- " </div>\n" +
- " </div>";
+ " </div>";
element.innerHTML=_content;
}
diff --git a/src/main/resources/public/js/renderer.js b/src/main/resources/public/js/renderer.js
index 9111b83..949a676 100755
--- a/src/main/resources/public/js/renderer.js
+++ b/src/main/resources/public/js/renderer.js
@@ -45,11 +45,11 @@
this._opt.isDebug = opt.debug === true;
this._opt.timeout = typeof opt.timeout === 'number' ? opt.timeout : 30;
this._opt.supportDblclickFullscreen = opt.supportDblclickFullscreen === true;
- //this._opt.showBandwidth = opt.showBandwidth === true;
- opt.showBandwidth = true;
+ this._opt.showBandwidth = opt.showBandwidth === true;
+ opt.showBandwidth = false;
this._opt.operateBtns = Object.assign({
- fullscreen: true,
- screenshot: true,
+ fullscreen: false,
+ screenshot: false,
play: false,
audio: false
}, opt.operateBtns || {});
@@ -1357,6 +1357,7 @@
this._trigger('fullscreen', value);
}
this._fullscreen = value;
+ //解决在预览模式页面无法全屏情况
if(this._fullscreen==true){
this.resize()
}
diff --git a/src/main/resources/public/monitor/history.html b/src/main/resources/public/monitor/history.html
index ee25407..c615542 100755
--- a/src/main/resources/public/monitor/history.html
+++ b/src/main/resources/public/monitor/history.html
@@ -5,8 +5,8 @@
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Jessibuca【回放】</title>
<meta charset="utf-8"/>
- <link rel="stylesheet" href="css/progressTime.css">
- <link rel="stylesheet" href="css/history/historyStyle.css">
+ <link rel="stylesheet" href="../css/progressTime.css">
+ <link rel="stylesheet" href="../css/history/historyStyle.css">
</head>
@@ -16,11 +16,11 @@
<div id="jessibucaContainerHistory"></div>
-<script src="js/jquery.min.js"></script>
-<script src="js/ajax.js"></script>
-<script src="js/renderer.js"></script>
-<script src="js/jquery.progressTime.js"></script>
-<script src="js/history/historyComponent.js"></script>
+<script src="../js/jquery.min.js"></script>
+<script src="../js/ajax.js"></script>
+<script src="../js/renderer.js"></script>
+<script src="../js/jquery.progressTime.js"></script>
+<script src="../js/history/historyComponent.js"></script>
<script>
diff --git a/src/main/resources/public/monitor/live.html b/src/main/resources/public/monitor/live.html
index a97c41a..9a0f512 100755
--- a/src/main/resources/public/monitor/live.html
+++ b/src/main/resources/public/monitor/live.html
@@ -5,9 +5,9 @@
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Jessibuca【直播】</title>
<meta charset="utf-8"/>
- <link rel="stylesheet" href="css/font-awesome.min.css">
- <link rel="stylesheet" href="css/controles.css">
- <link rel="stylesheet" href="css/live/liveStyle.css">
+ <link rel="stylesheet" href="../css/font-awesome.min.css">
+ <link rel="stylesheet" href="../css/controles.css">
+ <link rel="stylesheet" href="../css/live/liveStyle.css">
</head>
@@ -15,19 +15,20 @@
<body>
<!-- jessiebuca播放器 -->
-<div id="jessibucaContainer"></div>
+<div id="jessibucaContainer">
+</div>
-<script src="js/jquery.min.js"></script>
-<script src="js/ajax.js"></script>
-<script src="js/renderer.js"></script>
-<script src="js/live/liveComponent.js"></script>
+<script src="../js/jquery.min.js"></script>
+<script src="../js/ajax.js"></script>
+<script src="../js/renderer.js"></script>
+<script src="../js/live/liveComponent.js"></script>
<script>
- let liveComponent =new LiveComponent({
- elem:"jessibucaContainer",
- cameraId:"ff80808178af424e0178af44e677000343616d657261",
- rtspUrl:"rtsp://admin:12345...@192.168.1.201:554/Streaming/Channels/301",
+ let liveComponent = new LiveComponent({
+ elem: "jessibucaContainer",
+ cameraId: "ff80808178af424e0178af44e677000343616d657261",
+ rtspUrl: "rtsp://admin:12345...@192.168.1.201:554/Streaming/Channels/301",
});
//关闭流
//liveComponent.close();
--
Gitblit v1.9.1