165 lines
4.6 KiB
HTML
165 lines
4.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
<title>Document</title>
|
|
<style>
|
|
*{
|
|
margin:0;
|
|
padding:0;
|
|
}
|
|
html,body{
|
|
width:100%;
|
|
height:100%;
|
|
margin:0;
|
|
border:0
|
|
}
|
|
#player{
|
|
height:100%;
|
|
width:100%;
|
|
background:#000;
|
|
}
|
|
|
|
body:hover .videoNav{
|
|
display: block;
|
|
}
|
|
.videoNav{
|
|
display: none;
|
|
}
|
|
|
|
.videoNav{
|
|
position:absolute;
|
|
width:100%;
|
|
bottom:0px;
|
|
left:0;
|
|
z-index:9999999;
|
|
}
|
|
.videoNav>p{
|
|
float:left;
|
|
height:30px;
|
|
line-height:30px;
|
|
background:rgba(0, 0, 0, 0.44);
|
|
width:100%;
|
|
|
|
}
|
|
.videoNav>p>img{
|
|
height:18px;
|
|
padding:3px 5px;
|
|
border-radius: 3px;
|
|
border:1px solid #ccc;
|
|
}
|
|
.videoNav>p>img:last-child{
|
|
margin:7px;
|
|
padding:2px;
|
|
float:left;
|
|
}
|
|
|
|
.videoNav>p>img:first-child{
|
|
margin-left:5px;
|
|
}
|
|
.videoNav>p:last-child>img{
|
|
border:0;
|
|
padding:0;
|
|
}
|
|
.videoNav>p:last-child>span{
|
|
color:#fff;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="player"></div>
|
|
|
|
<!--视频操作-->
|
|
<div class="videoNav">
|
|
<p class="nav">
|
|
<img src="../image/exit.png" alt="" class="videoExit" title="退出"/>
|
|
</p>
|
|
</div>
|
|
|
|
<script src="./axios.min.js"></script>
|
|
<script src="./jquery-3.4.1.min.js"></script>
|
|
<script src="./h5player.min.js"></script>
|
|
<script>
|
|
//接受url的值,进行解析
|
|
function getParams(key) {
|
|
var reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)");
|
|
var r = window.location.search.substr(1).match(reg);
|
|
if (r != null) {
|
|
return unescape(r[2]);
|
|
}
|
|
return null;
|
|
};
|
|
var cameraIndexCode=getParams("cameraIndexCode");
|
|
getVideoWs();
|
|
function getVideoWs(){
|
|
var data={
|
|
cameraIndexCode:cameraIndexCode
|
|
}
|
|
axios({
|
|
method: 'post',
|
|
url:"https://www.lonsungsh.com:8083/firectrl/hik/device/preview",
|
|
data: data
|
|
}).then(res=>{
|
|
var code=res["data"]["code"];
|
|
if(code==0){
|
|
var data=JSON.parse(res["data"]["data"]);
|
|
var playURL=data["data"]["url"];
|
|
var IS_MOVE_DEVICE = document.body.clientWidth < 992 // 是否移动设备
|
|
var MSE_IS_SUPPORT = !!window.MediaSource // 是否支持mse
|
|
var player = new window.JSPlugin({
|
|
szId: 'player',
|
|
szBasePath: "./",
|
|
iMaxSplit: 1,
|
|
iCurrentSplit: IS_MOVE_DEVICE ? 1 : 2,
|
|
openDebug: true,
|
|
oStyle: {
|
|
borderSelect: IS_MOVE_DEVICE ? '#000' : '#FFCC00',
|
|
}
|
|
})
|
|
|
|
var index=2;
|
|
playVideo();
|
|
function playVideo(){
|
|
player.JS_Play(playURL, { playURL:playURL, mode:1 }, 0).then(
|
|
() => { console.log('realplay success') },
|
|
e => {
|
|
|
|
console.log("网络流中断")
|
|
|
|
index--;
|
|
if(index<=0){
|
|
return;
|
|
}
|
|
var inUrl="192.168.10.240:559"
|
|
var outUrl="218.76.54.20:559";
|
|
playURL=playURL.replace(outUrl,inUrl)
|
|
playVideo();
|
|
}
|
|
)
|
|
}
|
|
|
|
}else{
|
|
alert("播放失败")
|
|
}
|
|
})
|
|
}
|
|
|
|
|
|
|
|
|
|
$(".nav>img").on('click',function(){
|
|
var param = {
|
|
"sender":"children",
|
|
"receiver":"parent",
|
|
"deviceid":cameraIndexCode,
|
|
"cmd":"closePage"
|
|
};
|
|
window.parent.postMessage(param,'*');
|
|
window.close();
|
|
})
|
|
</script>
|
|
</body>
|
|
</html> |