新增flv的webview访问页面
This commit is contained in:
parent
0bc207bda3
commit
e416e4fddb
@ -6,107 +6,19 @@ Page({
|
|||||||
* 页面的初始数据
|
* 页面的初始数据
|
||||||
*/
|
*/
|
||||||
data: {
|
data: {
|
||||||
|
liveRecordContentUrl: app.newsContentUrl,
|
||||||
liveUrl: app.liveUrl,
|
liveUrl: app.liveUrl,
|
||||||
liveRecordUrl: app.liveRecordUrl,
|
liveRecordUrl: app.liveRecordUrl,
|
||||||
liveRecordSrc: null,
|
livePlanId: null,
|
||||||
livePlanId: '',
|
|
||||||
liveRecoreList: [],
|
|
||||||
videoContext: null,
|
|
||||||
currentPage: 1,
|
|
||||||
rows: 20,
|
|
||||||
isPlay: false
|
|
||||||
},
|
|
||||||
getLivePlanRecordList: function(page) {
|
|
||||||
var self = this;
|
|
||||||
app.dialog.loading('正在加载');
|
|
||||||
app.restAjax.get(app.restAjax.path('{liveUrl}/app/liverecord/listpageliverecordrelease/{planId}', [self.data.liveUrl, self.data.livePlanId]), {
|
|
||||||
page: page,
|
|
||||||
rows: self.data.rows
|
|
||||||
}, null, function(code, data) {
|
|
||||||
if(data.rows.length == 0) {
|
|
||||||
app.dialog.msg('暂无数据');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
var liveRecoreArray;
|
|
||||||
if(page <= 1) {
|
|
||||||
liveRecoreArray = data.rows;
|
|
||||||
} else {
|
|
||||||
liveRecoreArray = self.data.liveRecoreList;
|
|
||||||
liveRecoreArray = liveRecoreArray.concat(data.rows);
|
|
||||||
}
|
|
||||||
self.setData({
|
|
||||||
currentPage: page,
|
|
||||||
'liveRecoreList': liveRecoreArray
|
|
||||||
})
|
|
||||||
}, function(code, data) {
|
|
||||||
app.dialog.msg(data.msg);
|
|
||||||
}, function() {
|
|
||||||
wx.stopPullDownRefresh();
|
|
||||||
wx.hideLoading();
|
|
||||||
})
|
|
||||||
},
|
|
||||||
doChangeSrc: function(event) {
|
|
||||||
var self = this;
|
|
||||||
self.setData({
|
|
||||||
liveRecordSrc: event.currentTarget.dataset.liveRecordSrc
|
|
||||||
})
|
|
||||||
self.videoContext.play({
|
|
||||||
success: function() {
|
|
||||||
self.setData({
|
|
||||||
isPlay: true
|
|
||||||
})
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
onPlayStateChange: function(event) {
|
|
||||||
console.log(event.detail.code)
|
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
* 生命周期函数--监听页面加载
|
* 生命周期函数--监听页面加载
|
||||||
*/
|
*/
|
||||||
onLoad: function (options) {
|
onLoad: function (options) {
|
||||||
this.videoContext = wx.createLivePlayerContext('liveRecordVideo');
|
|
||||||
this.setData({
|
this.setData({
|
||||||
livePlanId: options.livePlanId
|
livePlanId: options.livePlanId
|
||||||
})
|
})
|
||||||
this.getLivePlanRecordList(1);
|
// this.getLivePlanRecordList(1);
|
||||||
},
|
|
||||||
doPlay: function() {
|
|
||||||
var self = this;
|
|
||||||
if(!self.data.liveRecordSrc) {
|
|
||||||
if(self.data.liveRecoreList.length == 0) {
|
|
||||||
app.dialog.msg('无播放内容');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
self.setData({
|
|
||||||
liveRecordSrc : self.data.liveRecoreList[0].recordFilePath
|
|
||||||
});
|
|
||||||
self.videoContext.play({
|
|
||||||
success: function() {
|
|
||||||
self.setData({
|
|
||||||
isPlay: true
|
|
||||||
})
|
|
||||||
}
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
self.videoContext.play({
|
|
||||||
success: function() {
|
|
||||||
self.setData({
|
|
||||||
isPlay: true
|
|
||||||
})
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
},
|
|
||||||
doStop: function() {
|
|
||||||
var self = this;
|
|
||||||
self.videoContext.pause({
|
|
||||||
success: function() {
|
|
||||||
self.setData({
|
|
||||||
isPlay: false
|
|
||||||
})
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
* 生命周期函数--监听页面初次渲染完成
|
* 生命周期函数--监听页面初次渲染完成
|
||||||
|
|||||||
@ -1,9 +1 @@
|
|||||||
<view class="broadcast">
|
<web-view src="{{liveRecordContentUrl}}/flv/index.html?livePlanId={{livePlanId}}&liveUrl={{liveUrl}}&liveRecordUrl={{liveRecordUrl}}" wx:if="{{livePlanId}}"></web-view>
|
||||||
<view class="play-button-box" wx:if="{{!isPlay}}" bindtap="doPlay">
|
|
||||||
<view class="play-button"></view>
|
|
||||||
</view>
|
|
||||||
<live-player id="liveRecordVideo" bindtap="doStop" max-cache="20" src="{{liveRecordUrl}}/{{liveRecordSrc}}" bindstatechange="onPlayStateChange" mode="live" object-fit="contain" style="width: 100%; height: 400rpx;" wx:if="{{liveRecordSrc}}"/>
|
|
||||||
</view>
|
|
||||||
<view class="broadcast-list">
|
|
||||||
<view class="broadcast-title" bindtap="doChangeSrc" data-live-record-src="{{item.recordFilePath}}" wx:for="{{liveRecoreList}}" wx:for-index="index" wx:for-item="item" wx:key="liveRecoreList">{{index + 1}}.{{item.recordFileName}}</view>
|
|
||||||
</view>
|
|
||||||
1
webview/flv/css/reset.css
Normal file
1
webview/flv/css/reset.css
Normal file
@ -0,0 +1 @@
|
|||||||
|
@charset "utf-8";a,body,dd,div,dl,dt,em,form,h1,h2,h3,h4,h5,h6,img,input,li,ol,option,p,select,span,strong,table,td,textarea,th,ul,var{margin:0;padding:0}body,html{font:400 100% "微软雅黑",Arail,Tabhoma;text-align:left;color:#535353;-webkit-font-smoothing:antialiased;line-height:normal}ol,ul{list-style:none}img{border:0;vertical-align:top}input,select,textarea{outline:0}textarea{resize:none}table{border-collapse:collapse;border-spacing:0}em,strong,th,var{font-weight:400;font-style:normal}a{text-decoration:none;color:#555}a,input{-webkit-tap-highlight-color:transparent}[v-cloak]{display: none}
|
||||||
27
webview/flv/css/style.css
Normal file
27
webview/flv/css/style.css
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
.video{
|
||||||
|
width: 100%;
|
||||||
|
height: 4.75rem;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
.video video{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: #000;
|
||||||
|
}
|
||||||
|
.video-list{
|
||||||
|
margin-top: 4.75rem;
|
||||||
|
}
|
||||||
|
.video-list ul li{
|
||||||
|
padding: 0 .2rem;
|
||||||
|
line-height: 1rem;
|
||||||
|
border-bottom: 1px solid #DEDEDE;
|
||||||
|
font-size: .32rem;
|
||||||
|
color: #000;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
[v-cloak] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
147
webview/flv/index.html
Normal file
147
webview/flv/index.html
Normal file
@ -0,0 +1,147 @@
|
|||||||
|
<!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">
|
||||||
|
<video src="" id="video" controls></video>
|
||||||
|
</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>
|
||||||
|
<script src="js/flv.min.js"></script>
|
||||||
|
<script>
|
||||||
|
var vue = new Vue({
|
||||||
|
el: '#app',
|
||||||
|
data: {
|
||||||
|
liveUrl: null,
|
||||||
|
livePlanId: null,
|
||||||
|
liveRecordUrl: null,
|
||||||
|
liveRecordSrc: null,
|
||||||
|
liveRecordList: [],
|
||||||
|
currentPage: 1,
|
||||||
|
rows: 20
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
playVideo: function(liveRecordSrc) {
|
||||||
|
this.initFlvPlayer(this.liveRecordUrl + '/' + liveRecordSrc);
|
||||||
|
},
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
initFlvPlayer: function(videoUrl) {
|
||||||
|
var self = this;
|
||||||
|
if (flvjs.isSupported()) {
|
||||||
|
var videoElement = document.getElementById('video');
|
||||||
|
var flvPlayer = flvjs.createPlayer({
|
||||||
|
type: 'flv',
|
||||||
|
url: videoUrl
|
||||||
|
});
|
||||||
|
flvPlayer.attachMediaElement(videoElement);
|
||||||
|
flvPlayer.load();
|
||||||
|
flvPlayer.play();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
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>
|
||||||
7
webview/flv/js/flv.min.js
vendored
Normal file
7
webview/flv/js/flv.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
3
webview/flv/js/jquery-2.1.4.min.js
vendored
Normal file
3
webview/flv/js/jquery-2.1.4.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
2
webview/flv/js/layer_mobile/layer.js
Normal file
2
webview/flv/js/layer_mobile/layer.js
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
/*! layer mobile-v2.0 弹层组件移动版 License LGPL http://layer.layui.com/mobile By 贤心 */
|
||||||
|
;!function(a){"use strict";var b=document,c="querySelectorAll",d="getElementsByClassName",e=function(a){return b[c](a)},f={type:0,shade:!0,shadeClose:!0,fixed:!0,anim:"scale"},g={extend:function(a){var b=JSON.parse(JSON.stringify(f));for(var c in a)b[c]=a[c];return b},timer:{},end:{}};g.touch=function(a,b){a.addEventListener("click",function(a){b.call(this,a)},!1)};var h=0,i=["layui-m-layer"],j=function(a){var b=this;b.config=g.extend(a),b.view()};j.prototype.view=function(){var a=this,c=a.config,f=b.createElement("div");a.id=f.id=i[0]+h,f.setAttribute("class",i[0]+" "+i[0]+(c.type||0)),f.setAttribute("index",h);var g=function(){var a="object"==typeof c.title;return c.title?'<h3 style="'+(a?c.title[1]:"")+'">'+(a?c.title[0]:c.title)+"</h3>":""}(),j=function(){"string"==typeof c.btn&&(c.btn=[c.btn]);var a,b=(c.btn||[]).length;return 0!==b&&c.btn?(a='<span yes type="1">'+c.btn[0]+"</span>",2===b&&(a='<span no type="0">'+c.btn[1]+"</span>"+a),'<div class="layui-m-layerbtn">'+a+"</div>"):""}();if(c.fixed||(c.top=c.hasOwnProperty("top")?c.top:100,c.style=c.style||"",c.style+=" top:"+(b.body.scrollTop+c.top)+"px"),2===c.type&&(c.content='<i></i><i class="layui-m-layerload"></i><i></i><p>'+(c.content||"")+"</p>"),c.skin&&(c.anim="up"),"msg"===c.skin&&(c.shade=!1),f.innerHTML=(c.shade?"<div "+("string"==typeof c.shade?'style="'+c.shade+'"':"")+' class="layui-m-layershade"></div>':"")+'<div class="layui-m-layermain" '+(c.fixed?"":'style="position:static;"')+'><div class="layui-m-layersection"><div class="layui-m-layerchild '+(c.skin?"layui-m-layer-"+c.skin+" ":"")+(c.className?c.className:"")+" "+(c.anim?"layui-m-anim-"+c.anim:"")+'" '+(c.style?'style="'+c.style+'"':"")+">"+g+'<div class="layui-m-layercont">'+c.content+"</div>"+j+"</div></div></div>",!c.type||2===c.type){var k=b[d](i[0]+c.type),l=k.length;l>=1&&layer.close(k[0].getAttribute("index"))}document.body.appendChild(f);var m=a.elem=e("#"+a.id)[0];c.success&&c.success(m),a.index=h++,a.action(c,m)},j.prototype.action=function(a,b){var c=this;a.time&&(g.timer[c.index]=setTimeout(function(){layer.close(c.index)},1e3*a.time));var e=function(){var b=this.getAttribute("type");0==b?(a.no&&a.no(),layer.close(c.index)):a.yes?a.yes(c.index):layer.close(c.index)};if(a.btn)for(var f=b[d]("layui-m-layerbtn")[0].children,h=f.length,i=0;h>i;i++)g.touch(f[i],e);if(a.shade&&a.shadeClose){var j=b[d]("layui-m-layershade")[0];g.touch(j,function(){layer.close(c.index,a.end)})}a.end&&(g.end[c.index]=a.end)},a.layer={v:"2.0",index:h,open:function(a){var b=new j(a||{});return b.index},close:function(a){var c=e("#"+i[0]+a)[0];c&&(c.innerHTML="",b.body.removeChild(c),clearTimeout(g.timer[a]),delete g.timer[a],"function"==typeof g.end[a]&&g.end[a](),delete g.end[a])},closeAll:function(){for(var a=b[d](i[0]),c=0,e=a.length;e>c;c++)layer.close(0|a[0].getAttribute("index"))}},"function"==typeof define?define(function(){return layer}):function(){var a=document.scripts,c=a[a.length-1],d=c.src,e=d.substring(0,d.lastIndexOf("/")+1);c.getAttribute("merge")||document.head.appendChild(function(){var a=b.createElement("link");return a.href=e+"need/layer.css?2.0",a.type="text/css",a.rel="styleSheet",a.id="layermcss",a}())}()}(window);
|
||||||
1
webview/flv/js/layer_mobile/need/layer.css
Normal file
1
webview/flv/js/layer_mobile/need/layer.css
Normal file
File diff suppressed because one or more lines are too long
12
webview/flv/js/rem.js
Normal file
12
webview/flv/js/rem.js
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
function setPage() {
|
||||||
|
var html = document.getElementsByTagName('html')[0];
|
||||||
|
var deviceWidth = document.documentElement.clientWidth;
|
||||||
|
var scale = deviceWidth / 750;//psd图上的宽度
|
||||||
|
html.style.fontSize = scale * 100 + 'px';
|
||||||
|
}
|
||||||
|
|
||||||
|
setPage();
|
||||||
|
|
||||||
|
window.onresize = function () {
|
||||||
|
setPage();
|
||||||
|
}
|
||||||
10947
webview/flv/js/vue.js
Normal file
10947
webview/flv/js/vue.js
Normal file
File diff suppressed because it is too large
Load Diff
1
webview/flv/readme.txt
Normal file
1
webview/flv/readme.txt
Normal file
@ -0,0 +1 @@
|
|||||||
|
直播历史，将此文件夹发布到远程web容器当中
|
||||||
Loading…
Reference in New Issue
Block a user