2021-04-01 14:44:02 +08:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
|
|
|
|
<title>录播管理</title>
|
|
|
|
|
<link rel="stylesheet" href="/layui/css/layui.css">
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
<div class="layui-layout layui-layout-admin">
|
|
|
|
|
<div id="header"></div>
|
|
|
|
|
<div class="layui-body" style="left: 0px;">
|
|
|
|
|
<div style="width: 50%;margin-left: 25%; margin-top: 2%;">
|
|
|
|
|
<div class="layui-card">
|
|
|
|
|
<div class="layui-card-header">录像管理</div>
|
|
|
|
|
<div class="layui-card-body">
|
|
|
|
|
<table id="bili_video" lay-filter="listTools"></table>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
<div id="footer"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<script type="text/html" id="listTools">
|
|
|
|
|
<a class="layui-btn layui-btn-xs" lay-event="play">播放</a>
|
|
|
|
|
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="download">下载</a>
|
2021-04-01 18:47:14 +08:00
|
|
|
<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="ffmpeg">转码</a>
|
2021-04-01 14:44:02 +08:00
|
|
|
</script>
|
|
|
|
|
<script src="/layui/layui.js"></script>
|
|
|
|
|
<script src="/js/jquery-3.2.1.js"></script>
|
|
|
|
|
<script src="/js/flv.min.js"></script>
|
|
|
|
|
<script>
|
|
|
|
|
layui.use(['layer', 'form', 'element', 'table'], function () {
|
|
|
|
|
let layer = layui.layer
|
|
|
|
|
, form = layui.form
|
|
|
|
|
, table = layui.table
|
|
|
|
|
, element = layui.element;
|
|
|
|
|
table.render({
|
|
|
|
|
elem: '#bili_video'
|
|
|
|
|
, height: 700
|
|
|
|
|
, url: '/bili/video/get/list.do' //数据接口
|
|
|
|
|
, page: true //开启分页
|
|
|
|
|
, cols: [[ //表头
|
|
|
|
|
{field: 'name', title: 'UP主/房间号', width: 150, sort: true, fixed: 'left'}
|
|
|
|
|
, {field: 'date', title: '日期', width: 120, sort: true}
|
|
|
|
|
, {field: 'time', title: '时间', width: 80, sort: true}
|
2021-04-01 18:47:14 +08:00
|
|
|
, {field: 'fileName', title: '文件名', width: 250}
|
2021-04-01 14:44:02 +08:00
|
|
|
, {field: 'fileSize', title: '大小', width: 80}
|
2021-04-01 18:47:14 +08:00
|
|
|
, {field: "right", width: 170, toolbar: '#listTools'}
|
2021-04-01 14:44:02 +08:00
|
|
|
]]
|
|
|
|
|
});
|
|
|
|
|
table.on('tool(listTools)', function (obj) {
|
|
|
|
|
console.log(obj.data)
|
|
|
|
|
switch (obj.event) {
|
|
|
|
|
case 'download':
|
|
|
|
|
window.open("/bili/video/download/get.do?fileName=" + encodeURI(obj.data.fileName))
|
|
|
|
|
break;
|
|
|
|
|
case 'play':
|
|
|
|
|
play("/download/" + obj.data.date + "/" + encodeURI(obj.data.fileName), obj.data.fileName);
|
|
|
|
|
break;
|
2021-04-01 18:47:14 +08:00
|
|
|
case 'ffmpeg':
|
|
|
|
|
$.post('/bili/video/set/ffmpeg.do',{fileName:encodeURI(obj.data.fileName)},function (json) {
|
|
|
|
|
if (json.code === undefined || json.code !== 0) {
|
|
|
|
|
layer.msg("您无权操作")
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
layer.msg(json.msg)
|
|
|
|
|
})
|
|
|
|
|
break;
|
2021-04-01 14:44:02 +08:00
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
function play(url, fileName) {
|
|
|
|
|
if (flvjs.isSupported()) {
|
|
|
|
|
let id = 'video_' + fileName
|
|
|
|
|
let volume = 1;
|
|
|
|
|
let isPlay = true;
|
|
|
|
|
let flvPlayer;
|
|
|
|
|
layer.open({
|
|
|
|
|
title: fileName
|
|
|
|
|
, type: 1
|
|
|
|
|
, shade: 0
|
|
|
|
|
, maxWidth: 680
|
|
|
|
|
, zIndex: layer.zIndex
|
|
|
|
|
, area: ['640px', '480px']
|
|
|
|
|
, maxmin: false
|
|
|
|
|
, resize: false
|
2021-04-01 18:47:14 +08:00
|
|
|
, content: '<div><video id="' + id + '" style="height: 100%;width: 100%" controls>' +
|
2021-04-01 14:44:02 +08:00
|
|
|
'</video><a href="javascript:;" class="layui-btn layui-btn-xs" id="reset">重播</a>' +
|
2021-04-01 18:47:14 +08:00
|
|
|
'<a href="javascript:;" class="layui-btn layui-btn-xs" id="danmu">弹幕</a>' +
|
|
|
|
|
'<a href="javascript:;" class="layui-btn layui-btn-xs" id="seekDown">-10s</a>' +
|
|
|
|
|
'<a href="javascript:;" class="layui-btn layui-btn-xs" id="seekUp">+10s</a>' +
|
2021-04-01 14:44:02 +08:00
|
|
|
'</div>'
|
|
|
|
|
, success: function (layero, index) {
|
|
|
|
|
|
|
|
|
|
layer.setTop(layero);
|
|
|
|
|
let videoElement = document.getElementById(id);
|
2021-04-01 18:47:14 +08:00
|
|
|
videoElement.onended = function () {
|
|
|
|
|
layer.close(index)
|
2021-04-01 14:44:02 +08:00
|
|
|
};
|
|
|
|
|
let playerConfig = {
|
|
|
|
|
enableWorker: false,
|
|
|
|
|
deferLoadAfterSourceOpen: true,
|
|
|
|
|
stashInitialSize: 512 * 1024,
|
|
|
|
|
enableStashBuffer: true
|
|
|
|
|
}
|
2022-04-11 13:17:45 +08:00
|
|
|
let playType = 'mp4'
|
2021-04-01 18:47:14 +08:00
|
|
|
if (url.indexOf('_ffmpeg') !== -1) {
|
|
|
|
|
playType = 'mp4'
|
|
|
|
|
}
|
2021-04-01 14:44:02 +08:00
|
|
|
flvPlayer = flvjs.createPlayer({
|
2021-04-01 18:47:14 +08:00
|
|
|
type: playType,
|
2021-04-01 14:44:02 +08:00
|
|
|
url: url
|
2021-04-01 18:47:14 +08:00
|
|
|
}, playerConfig)
|
2021-04-01 14:44:02 +08:00
|
|
|
|
|
|
|
|
flvPlayer.attachMediaElement(videoElement);
|
|
|
|
|
flvPlayer.load();
|
|
|
|
|
flvPlayer.play();
|
|
|
|
|
$('#pause').click(function () {
|
|
|
|
|
if (isPlay) {
|
|
|
|
|
flvPlayer.pause();
|
|
|
|
|
} else {
|
|
|
|
|
flvPlayer.play();
|
|
|
|
|
}
|
2021-04-01 18:47:14 +08:00
|
|
|
isPlay = !isPlay;
|
2021-04-01 14:44:02 +08:00
|
|
|
})
|
|
|
|
|
$('#reset').click(function () {
|
|
|
|
|
flvPlayer.unload();
|
|
|
|
|
flvPlayer.load();
|
|
|
|
|
flvPlayer.play();
|
|
|
|
|
})
|
|
|
|
|
$('#danmu').click(function () {
|
|
|
|
|
layer.msg("鸽了")
|
|
|
|
|
})
|
|
|
|
|
$('#seekDown').click(function () {
|
|
|
|
|
flvPlayer.currentTime = flvPlayer.currentTime - 10
|
|
|
|
|
})
|
|
|
|
|
$('#seekUp').click(function () {
|
|
|
|
|
flvPlayer.currentTime = flvPlayer.currentTime + 10
|
|
|
|
|
})
|
|
|
|
|
$('#volume').click(function () {
|
|
|
|
|
if (volume === 0) {
|
|
|
|
|
volume = 1;
|
|
|
|
|
} else {
|
|
|
|
|
volume = 0;
|
|
|
|
|
}
|
|
|
|
|
console.log(flvPlayer)
|
|
|
|
|
flvPlayer.volume = volume;
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
, cancel: function (index) {
|
|
|
|
|
flvPlayer.unload();
|
|
|
|
|
flvPlayer.detachMediaElement();
|
|
|
|
|
flvPlayer.destroy();
|
|
|
|
|
flvPlayer = null;
|
|
|
|
|
layer.close(index)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
$('#header').load("/html/header.html");
|
|
|
|
|
$('#footer').load("/html/footer.html");
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
<style>
|
|
|
|
|
.layui-body {
|
|
|
|
|
position: relative;
|
|
|
|
|
z-index: 0;
|
|
|
|
|
background-color: #F2F2F2;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</style>
|
|
|
|
|
</html>
|
