init
This commit is contained in:
yutou
170
Web/html/body/bilibili/video.html
Normal file
170
Web/html/body/bilibili/video.html
Normal file
@@ -0,0 +1,170 @@
|
||||
<!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>
|
||||
</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}
|
||||
, {field: 'fileName', title: '文件名', width: 300}
|
||||
, {field: 'fileSize', title: '大小', width: 80}
|
||||
, {field: "right", width: 120, toolbar: '#listTools'}
|
||||
]]
|
||||
});
|
||||
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;
|
||||
}
|
||||
})
|
||||
|
||||
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
|
||||
, content: '<div><video id="' + id + '" style="height: 100%;width: 100%">' +
|
||||
'</video><a href="javascript:;" class="layui-btn layui-btn-xs" id="pause">暂停/播放</a>' +
|
||||
'</video><a href="javascript:;" class="layui-btn layui-btn-xs" id="reset">重播</a>' +
|
||||
'</video><a href="javascript:;" class="layui-btn layui-btn-xs" id="danmu">弹幕</a>' +
|
||||
'</video><a href="javascript:;" class="layui-btn layui-btn-xs" id="volume">静音</a>' +
|
||||
'</video><a href="javascript:;" class="layui-btn layui-btn-xs" id="seekDown">-10s</a>' +
|
||||
'</video><a href="javascript:;" class="layui-btn layui-btn-xs" id="seekUp">+10s</a>' +
|
||||
'</div>'
|
||||
, success: function (layero, index) {
|
||||
|
||||
layer.setTop(layero);
|
||||
let videoElement = document.getElementById(id);
|
||||
videoElement.onended=function (){
|
||||
layer.close(index)
|
||||
};
|
||||
let playerConfig = {
|
||||
enableWorker: false,
|
||||
deferLoadAfterSourceOpen: true,
|
||||
stashInitialSize: 512 * 1024,
|
||||
enableStashBuffer: true
|
||||
}
|
||||
flvPlayer = flvjs.createPlayer({
|
||||
type: 'flv',
|
||||
url: url
|
||||
},playerConfig)
|
||||
|
||||
flvPlayer.attachMediaElement(videoElement);
|
||||
flvPlayer.load();
|
||||
flvPlayer.play();
|
||||
$('#pause').click(function () {
|
||||
if (isPlay) {
|
||||
flvPlayer.pause();
|
||||
} else {
|
||||
flvPlayer.play();
|
||||
}
|
||||
isPlay=!isPlay;
|
||||
})
|
||||
$('#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>
|
||||
Reference in New Issue
Block a user