2020-07-02 13:03:55 +08:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
|
|
|
|
|
<title>直播历史</title>
|
|
|
|
|
<link rel="stylesheet" href="css/reset.css">
|
|
|
|
|
<link rel="stylesheet" href="css/style.css">
|
|
|
|
|
<script src="js/rem.js"></script>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div id="app">
|
|
|
|
|
<div class="video">
|
2020-09-29 17:05:43 +08:00
|
|
|
<video :src="videoPath" id="video" controls controlslist="nodownload"></video>
|
2020-07-02 13:03:55 +08:00
|
|
|
</div>
|
|
|
|
|
<div class="video-list">
|
|
|
|
|
<ul v-cloak>
|
|
|
|
|
<li v-for="(liveRecord, index) in liveRecordList" @click="playVideo(liveRecord.recordFilePath)">{{index+1}}.{{liveRecord.recordFileName}}</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<script src="js/jquery-2.1.4.min.js"></script>
|
|
|
|
|
<script src="js/layer_mobile/layer.js"></script>
|
|
|
|
|
<script src="js/vue.js"></script>
|
2020-09-29 17:05:43 +08:00
|
|
|
<!-- <script src="js/flv.min.js"></script> -->
|
2020-07-02 13:03:55 +08:00
|
|
|
<script>
|
|
|
|
|
var vue = new Vue({
|
|
|
|
|
el: '#app',
|
|
|
|
|
data: {
|
|
|
|
|
liveUrl: null,
|
|
|
|
|
livePlanId: null,
|
|
|
|
|
liveRecordUrl: null,
|
|
|
|
|
liveRecordSrc: null,
|
|
|
|
|
liveRecordList: [],
|
|
|
|
|
currentPage: 1,
|
2020-09-29 17:05:43 +08:00
|
|
|
rows: 20,
|
|
|
|
|
videoPath: ''
|
2020-07-02 13:03:55 +08:00
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
playVideo: function(liveRecordSrc) {
|
2020-09-29 17:05:43 +08:00
|
|
|
this.videoPath = liveRecordSrc
|
2020-07-02 13:03:55 +08:00
|
|
|
},
|
|
|
|
|
getPathParams: function(url) {
|
|
|
|
|
var params = url.split('?')[1];
|
|
|
|
|
var paramsObj = {};
|
|
|
|
|
if (typeof (params) == 'undefined' || params == null) {
|
|
|
|
|
return paramsObj;
|
|
|
|
|
}
|
|
|
|
|
var paramsKVs = params.split('&');
|
|
|
|
|
for (var i = 0, item = null; item = paramsKVs[i++];) {
|
|
|
|
|
var kvs = item.split('=');
|
|
|
|
|
if (kvs.length == 1) {
|
|
|
|
|
paramsObj[kvs[0]] = null;
|
|
|
|
|
}
|
|
|
|
|
if (kvs.length == 2) {
|
|
|
|
|
paramsObj[kvs[0]] = decodeURI(kvs[1]);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
return paramsObj;
|
|
|
|
|
},
|
|
|
|
|
getLivePlanRecordList: function(page) {
|
|
|
|
|
var self = this;
|
|
|
|
|
var layIndex = null;
|
|
|
|
|
$.ajax({
|
|
|
|
|
url: self.liveUrl +'/app/liverecord/listpageliverecordrelease/'+ self.livePlanId,
|
|
|
|
|
type: 'GET',
|
|
|
|
|
contentType: "application/json;charset=utf-8",
|
|
|
|
|
headers: {},
|
|
|
|
|
data: 'page='+ page +'&rows='+ self.rows,
|
|
|
|
|
success: function (data, status, XMLHttpRequest) {
|
|
|
|
|
var responseCode = XMLHttpRequest.status;
|
|
|
|
|
if(data.rows.length === 0) {
|
|
|
|
|
layer.open({
|
|
|
|
|
content: '暂无数据',
|
|
|
|
|
skin: 'msg',
|
|
|
|
|
time: 2
|
|
|
|
|
})
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
self.currentPage = page;
|
|
|
|
|
var liveRecordArray = data.rows
|
|
|
|
|
if(page === 1) {
|
|
|
|
|
self.liveRecordList = liveRecordArray;
|
|
|
|
|
self.$nextTick(function() {
|
|
|
|
|
setTimeout(function() {
|
|
|
|
|
self.playVideo(self.liveRecordList[0].recordFilePath);
|
|
|
|
|
}, 500);
|
|
|
|
|
});
|
|
|
|
|
} else {
|
|
|
|
|
self.liveRecordList = self.liveRecordList.concat(liveRecordArray);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
error: function (XMLHttpRequest) {
|
|
|
|
|
var responseCode = XMLHttpRequest.status;
|
|
|
|
|
var responseData = JSON.parse(XMLHttpRequest.responseText);
|
|
|
|
|
layer.open({
|
|
|
|
|
content: responseData.msg,
|
|
|
|
|
shadeClose: false,
|
|
|
|
|
skin: 'msg',
|
|
|
|
|
time: 2
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
beforeSend: function (XMLHttpRequest) {
|
|
|
|
|
layIndex = layer.open({
|
|
|
|
|
type: 2,
|
|
|
|
|
shadeClose: false,
|
|
|
|
|
content: '加载中...'
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
complete: function (XMLHttpRequest, status) {
|
|
|
|
|
setTimeout(function() {
|
|
|
|
|
layer.close(layIndex);
|
|
|
|
|
}, 1000);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
mounted: function() {
|
|
|
|
|
var self = this;
|
|
|
|
|
var pathParams = this.getPathParams(window.location.href);
|
|
|
|
|
self.livePlanId = pathParams.livePlanId;
|
|
|
|
|
self.liveUrl = decodeURI(pathParams.liveUrl);
|
|
|
|
|
self.liveRecordUrl = decodeURI(pathParams.liveRecordUrl);
|
|
|
|
|
self.getLivePlanRecordList(1);
|
|
|
|
|
$(window).scroll(function(){
|
|
|
|
|
if ($(window).scrollTop() + $(window).height() == $(document).height()) {
|
|
|
|
|
self.getLivePlanRecordList(self.currentPage + 1);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
