123 lines
3.1 KiB
HTML
123 lines
3.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
|
|
<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 class="layui-bg-gray">
|
|
<div id="header"></div>
|
|
<div class="layui-row">
|
|
<div class="layui-col-xs2">
|
|
<div class="grid-demo grid-demo-bg1">
|
|
<div class="layui-panel" style="width: auto; margin: 16px;">
|
|
<ul class="layui-menu" id="menusss">
|
|
<div id="menuView"></div>
|
|
</ul>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-xs9">
|
|
<div class="grid-demo">
|
|
<video id="videoElement" style="width: 80%; margin-top: 16px;" controls></video>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</body>
|
|
<script id="menulist" type="text/html">
|
|
<ul class="layui-tab-title">
|
|
|
|
{{# layui.each(Object.keys(d), function(index, item){ }}
|
|
<li class="layui-menu-item-group layui-menu-item-down" lay-options="{type: 'group'}">
|
|
<div class="layui-menu-body-title">
|
|
{{= item}} <i class="layui-icon layui-icon-up"></i>
|
|
</div>
|
|
<ul>
|
|
{{# layui.each(d[item], function(index, video){ }}
|
|
<li lay-options="{id: {{= video.path}} }">
|
|
<div class="layui-menu-body-title">{{= video.name}}</div>
|
|
</li>
|
|
|
|
{{# }); }}
|
|
|
|
</ul>
|
|
</li>
|
|
|
|
|
|
{{# }); }}
|
|
|
|
</ul>
|
|
</script>
|
|
<script src="/js/jquery-3.2.1.js"></script>
|
|
<script src="/js/CommonConfig.js"></script>
|
|
<script src="/js/httpUtils.js"></script>
|
|
<script src="/layui/layui.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/hls.js@1"></script>
|
|
|
|
|
|
<script>
|
|
headerModel = 2;
|
|
$('#header').load("/html/header.html");
|
|
</script>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
var roomId = '17961';
|
|
layui.use(['dropdown', 'laytpl'], function () {
|
|
var dropdown = layui.dropdown;
|
|
var layer = layui.layer;
|
|
var laytpl = layui.laytpl;
|
|
function initTabs() {
|
|
getVideo(roomId, 0, 0)
|
|
.then(data => {
|
|
initMenu(data.data.children)
|
|
})
|
|
|
|
}
|
|
dropdown.on('click(menusss)', function (options) {
|
|
console.log(options);
|
|
// playVideo()
|
|
getPlayerVideo(roomId, options.id)
|
|
.then(data => {
|
|
playVideo(data.data)
|
|
})
|
|
|
|
});
|
|
function initMenu(data) {
|
|
var view = $("#menuView").get(0);
|
|
laytpl($('#menulist').get(0).innerHTML).render(data, function (html) {
|
|
console.log(html)
|
|
view.innerHTML = html;
|
|
});
|
|
}
|
|
|
|
function init() {
|
|
initTabs()
|
|
|
|
}
|
|
function playVideo(url) {
|
|
var video = document.getElementById('videoElement');
|
|
var videoSrc = url;
|
|
var hls = new Hls();
|
|
hls.loadSource(videoSrc);
|
|
hls.attachMedia(video);
|
|
}
|
|
init()
|
|
|
|
})
|
|
|
|
</script>
|
|
|
|
<style>
|
|
|
|
</style>
|
|
|
|
</html> |