157 lines
4.8 KiB
HTML
157 lines
4.8 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Title</title>
|
||
<link type="text/css" href="../../js/core/layui2.7.6/css/layui.css">
|
||
<style>
|
||
.layui-layer {
|
||
background-color: rgba(0,0,0,0)!important;
|
||
}
|
||
#videoContent {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 100%;
|
||
height: 98%;
|
||
}
|
||
|
||
#video1 {
|
||
max-width: 100%;
|
||
max-height: 95%;
|
||
}
|
||
|
||
.layui-layer-title {
|
||
height: 50px;
|
||
line-height: 50px;
|
||
font-size: 18px;
|
||
color:white;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
padding: 0px 80px 0px 20px;
|
||
border-bottom: 1px solid rgb(240, 240, 240);
|
||
overflow: hidden;
|
||
border-radius: 2px 2px 0px 0px;
|
||
}
|
||
.layui-layer-setwin .layui-layer-min cite {
|
||
position: absolute;
|
||
width: 14px;
|
||
height: 2px;
|
||
left: 0;
|
||
top: 50%;
|
||
margin-top: -1px;
|
||
background-color: #ffffff;
|
||
cursor: pointer;
|
||
_overflow: hidden;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div id="videoContent">
|
||
<!-- 监控画面内容 -->
|
||
<video id="video1"></video>
|
||
</div>
|
||
|
||
<script src="../../js/core/jquery-3.6.0.js"></script>
|
||
<script>
|
||
window.onbeforeunload = function(){
|
||
localStorage.removeItem("puid_svg");
|
||
}
|
||
|
||
window.onunload = function(){
|
||
localStorage.removeItem("puid_svg");
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|
||
<script src="../../js/video/qx/include.js" type="text/javascript" charset="utf-8"></script>
|
||
<script type="text/javascript" src="../../js/video/qx/conf.js"></script>
|
||
<script src="../../js/video/qx/utility/flv.js" type="text/javascript" charset="utf-8"></script>
|
||
<script src="../../js/video/qx/utility/talk.js" type="text/javascript" charset="utf-8"></script>
|
||
<script src="../../js/video/qx/video-7.19.1.min.js" type="text/javascript" charset="utf-8"></script>
|
||
<script>
|
||
var puid = localStorage.getItem("puid_svg");
|
||
var token1 = localStorage.getItem("video_token1");
|
||
|
||
$(function () {
|
||
setTimeout(function () {
|
||
qxPlayVideo(puid,0);
|
||
},500)
|
||
})
|
||
|
||
function qxPlayVideo(puId, idx) {
|
||
setTimeout(function(){
|
||
readyPlay(puId, idx);
|
||
},500);
|
||
}
|
||
var myPlayer = null;
|
||
//开始播放视频
|
||
function readyPlay(puId, idx){
|
||
//若是清晰平台，删除连接对象
|
||
// mySet.delete(selectedScreen);
|
||
let url = _cf_1.q2http_url + "stream.flv?puid=" + puId + "&idx=0&stream=0&token=" + token1;
|
||
//循环视频播放列表
|
||
try{
|
||
myPlayer = flvjs.createPlayer({
|
||
type: 'flv',
|
||
url: url,
|
||
isLive: true,
|
||
hasAudio: false
|
||
}, {
|
||
enableWorker: false,
|
||
autoCleanupSourceBuffer: true, //清理缓冲区
|
||
enableStashBuffer: false,
|
||
stashInitialSize: 128, // 减少首桢显示等待时长
|
||
statisticsInfoReportInterval: 600
|
||
});
|
||
|
||
myPlayer.attachMediaElement(document.getElementById('video1'));
|
||
myPlayer.load();
|
||
setTimeout(function () {
|
||
myPlayer.play();
|
||
}, 200);
|
||
}catch(e){
|
||
alert("该视频不在线。。。");
|
||
}
|
||
}
|
||
window.onbeforeunload = function(e) {
|
||
myPlayer.pause();
|
||
myPlayer.unload();
|
||
myPlayer.detachMediaElement();
|
||
myPlayer.destroy();
|
||
myPlayer = null;
|
||
}
|
||
/**
|
||
*
|
||
* @param {*} player 播放控件对象
|
||
* @param {*} index playBallList 下标，第几个
|
||
* @param {*} type 类型 1切换窗口关闭视频，2主动关闭视频
|
||
*/
|
||
function stopVideo(player,index,type) {
|
||
if(type == 1){
|
||
player.unload();
|
||
player.detachMediaElement();
|
||
player.destroy();
|
||
player = null;
|
||
playBallList.splice(index, 1);
|
||
}else{
|
||
$.each(playBallList, function (index, item) {
|
||
if (!isEmpty(item)) {
|
||
if (selectedScreen === item.selectedScreen) {
|
||
let start = item.start;
|
||
let player = item.myPlayer;
|
||
if(start && player !== null){
|
||
player.unload();
|
||
player.detachMediaElement();
|
||
player.destroy();
|
||
player = null;
|
||
playBallList.splice(index, 1);
|
||
}
|
||
}
|
||
}
|
||
});
|
||
}
|
||
}
|
||
|
||
</script> |