<!DOCTYPE html>
|
<html lang="en">
|
|
<head>
|
<meta charset="UTF-8">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<title>H5playerVue</title>
|
<link rel="stylesheet" href="./static/css/antd.min.css">
|
|
<style>
|
html,
|
body {
|
height: 100%;
|
width: 100%;
|
margin: 0px;
|
padding: 0px;
|
overflow: hidden;
|
}
|
|
::-webkit-media-controls {
|
display: none !important;
|
}
|
|
@media screen and (max-width: 991px) {
|
#player {
|
width: calc(100vw - 16px);
|
height: calc((100vw - 16px) * 5 / 8);
|
}
|
}
|
|
@media screen and (min-width: 992px) {
|
#player {
|
width: calc(50vw - 8/px);
|
height: calc((50vw - 8px) * 5 / 8);
|
}
|
}
|
</style>
|
</head>
|
|
<body>
|
<div id="player"></div>
|
|
<!-- <script src="./static/js/moment.js"></script>
|
<script src="./static/js/moment.js"></script>
|
<script src="./static/js/vue.js"></script>
|
<script src="./static/js/antd.min.js"></script>
|
<script src="./static/js/antd-with-locales.min.js"></script> -->
|
<script src="./static/js/jquery-1.12.4.min.js"></script>
|
<script src="./h5player.min.js"></script>
|
<script>
|
|
var player = null;
|
function GetQueryString(name) {
|
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
|
var r = window.location.search.substr(1).match(reg);
|
if (r != null) return unescape(r[2]); return null;
|
}
|
function setSize() {
|
var width = $(window).width();
|
var height = $(window).height();
|
$("#player").width(width);
|
$("#player").height(height);
|
player && player.JS_Resize()
|
}
|
function init() {
|
var code = GetQueryString("code");
|
// 设置播放容器的宽高并监听窗口大小变化
|
window.addEventListener('resize', () => {
|
setSize()
|
})
|
createPlayer();
|
if (code) {
|
$.ajax({
|
url: "https://skyzt.bda.gov.cn/BEApi/getCamerasInfo?cameraIndexCode=" + code, success: function (result) {
|
try {
|
var data = JSON.parse(result);
|
let res;
|
if (data.data.url.includes("41")) {
|
res = data.data.url.replace("ws://10.117.5.41:559/", "wss://skyzt.bda.gov.cn:443/")
|
} else if (data.data.url.includes("42")) {
|
res = data.data.url.replace("ws://10.117.5.42:559/", "wss://skyzt.bda.gov.cn:443/")
|
} else if (data.data.url.includes("43")) {
|
res = data.data.url.replace("ws://10.117.5.43:559/", "wss://skyzt.bda.gov.cn:443/")
|
} else if (data.data.url.includes("45")) {
|
res = data.data.url.replace("ws://10.117.5.45:559/", "wss://skyzt.bda.gov.cn:443/")
|
} else if (data.data.url.includes("46")) {
|
res = data.data.url.replace("ws://10.117.5.46:559/", "wss://skyzt.bda.gov.cn:443/")
|
} else if (data.data.url.includes("47")) {
|
res = data.data.url.replace("ws://10.117.5.47:559/", "wss://skyzt.bda.gov.cn:443/")
|
} else if (data.data.url.includes("28")) {
|
res = data.data.url.replace("ws://10.117.5.28:559/", "wss://skyzt.bda.gov.cn:443/")//视频最新返回地址
|
}
|
realplay(res);
|
|
} catch (e) { }
|
}
|
});
|
}
|
}
|
function createPlayer() {
|
player = new window.JSPlugin({
|
szId: 'player',
|
szBasePath: "./",
|
// 当容器div#play_window有固定宽高时，可不传iWidth和iHeight，窗口大小将自适应容器宽高
|
iWidth: 600,
|
iHeight: 400,
|
iMaxSplit: 1,
|
iCurrentSplit: 1,
|
openDebug: true,
|
oStyle: {
|
borderSelect: '#000',
|
}
|
})
|
setSize()
|
}
|
// function arrangeWindow() {
|
// let splitNum = 1
|
// this.player.JS_ArrangeWindow(splitNum).then(
|
// () => { console.log(`arrangeWindow to ${splitNum}x${splitNum} success`) },
|
// e => { console.error(e) }
|
// )
|
// }
|
// function wholeFullScreen() {
|
// this.player.JS_FullScreenDisplay(true).then(
|
// () => { console.log(`wholeFullScreen success`) },
|
// e => { console.error(e) }
|
// )
|
// }
|
/* 预览&对讲 */
|
function realplay(url) {
|
var mode = 1;
|
var index = player.currentWindowIndex;
|
var playURL = url;
|
player.JS_Play(playURL, { playURL, mode }, index).then(
|
() => {
|
console.log('realplay success')
|
},
|
e => {
|
console.error(e);
|
}
|
)
|
}
|
$(function () {
|
init();
|
});
|
</script>
|
</body>
|
|
</html>
|
