新增flv的webview访问页面
This commit is contained in:
parent
0bc207bda3
commit
e416e4fddb
@ -6,107 +6,19 @@ Page({
|
||||
* 页面的初始数据
|
||||
*/
|
||||
data: {
|
||||
liveRecordContentUrl: app.newsContentUrl,
|
||||
liveUrl: app.liveUrl,
|
||||
liveRecordUrl: app.liveRecordUrl,
|
||||
liveRecordSrc: 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)
|
||||
livePlanId: null,
|
||||
},
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad: function (options) {
|
||||
this.videoContext = wx.createLivePlayerContext('liveRecordVideo');
|
||||
this.setData({
|
||||
livePlanId: options.livePlanId
|
||||
})
|
||||
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
|
||||
})
|
||||
}
|
||||
});
|
||||
// this.getLivePlanRecordList(1);
|
||||
},
|
||||
/**
|
||||
* 生命周期函数--监听页面初次渲染完成
|
||||
|
||||
@ -1,9 +1 @@
|
||||
<view class="broadcast">
|
||||
<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>
|
||||
<web-view src="{{liveRecordContentUrl}}/flv/index.html?livePlanId={{livePlanId}}&liveUrl={{liveUrl}}&liveRecordUrl={{liveRecordUrl}}" wx:if="{{livePlanId}}"></web-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