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>
|