<!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 - 8px);
|
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(width, height)
|
}
|
function init() {
|
var code = GetQueryString("code");
|
// 设置播放容器的宽高并监听窗口大小变化
|
window.addEventListener('resize', () => {
|
setSize()
|
})
|
createPlayer();
|
if (code) {
|
$.ajax({
|
url: "http://10.10.4.116:8086/getCamerasInfo?cameraIndexCode=" + code, success: function (result) {
|
try {
|
var data = JSON.parse(result);
|
realplay(data.data.url);
|
} catch (e) {
|
|
}
|
}
|
});
|
}
|
}
|
function createPlayer() {
|
player = new window.JSPlugin({
|
szId: 'player',
|
szBasePath: "./",
|
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); alert("视频请求失败！") }
|
)
|
}
|
$(function () {
|
init();
|
});
|
</script>
|
</body>
|
|
</html>
|
