Hbuilder打包注意事项 1,选好图标、权限 2,不要去除 mui的css js 文件 3,选择安卓程序进行打包 现有的bug:只能在打开app后选择一次房间id(直播),之后再选择id就无效了,不能改变房间id还是原来的id,
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet" />
<script type="text/javascript" charset="utf-8">
mui.init();
</script>
</head>
<body>
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active" id="live">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">直播</span>
</a>
<a class="mui-tab-item" id='whtch'>
<span class="mui-icon mui-icon-phone"></span>
<span class="mui-tab-label">观看</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon mui-icon-chatbubble"></span>
<span class="mui-tab-label">消息</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon mui-icon-gear"></span>
<span class="mui-tab-label">设置</span>
</a>
</nav>
</body>
<script type="text/javascript">
mui.init({
subpages: [{
url: 'live.html', //一进入app就显示main页面
id: 'live.html',
styles: {
top: '0px', //mui标题栏默认高度为45px；
bottom: '50px' //默认为0px，可不定义；
},
}],
});
document.getElementById('live').addEventListener('tap', function() {
mui.openWindow({
url: 'live.html',
id: 'live.html',
styles: {
top: '0px', //mui标题栏默认高度为45px；
bottom: '50px' //默认为0px，可不定义；
}
})
});
document.getElementById('whtch').addEventListener('tap', function() {
mui.openWindow({
url: 'video.html',
id: 'video.html',
styles: {
top: '0px', //mui标题栏默认高度为45px；
bottom: '50px' //默认为0px，可不定义；
}
})
});
</script>
</html>
live.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<title>我的直播间</title>
<link rel="stylesheet" type="text/css" href="css/mui.css" />
<script src="js/mui.js" type="text/javascript" charset="utf-8"></script>
</head>
<body style="margin:0;padding:0;text-align:center;">
我的直播
<br/>
<br/>
<style type="text/css">
#popover {
height: 80px;
100px;
}
</style>
<div id="popover" class="mui-popover">
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<span onclick="chose_id('0001')">0001</span>
</li>
<li class="mui-table-view-cell">
<span onclick="chose_id('0002')">0002</span>
</li>
<li class="mui-table-view-cell">
<span onclick="chose_id('0003')">0003</span>
</li>
<li class="mui-table-view-cell">
<span onclick="chose_id('0004')">0004</span>
</ul>
</div>
</div>
</div>
<a href="#popover" id="openPopover" class="mui-btn mui-btn-primary">选择房间id</a>
<button onclick="preview()">开始</button>
<button onclick="switchCamera()">切换摄像头</button>
<button onclick="stopPreview()" id='end'>结束直播</button>
<br/>
<br/>
<br/>
<span id='flag' style="float: left;margin-left:10px;">aaaa</span>
<br/>
<div id="pusher" style="100%;height:300px;background-color:#000000;margin:auto"></div>
</body>
<script type="text/javascript">
mui.init()
var Sdata = null
var live_id = null
var pusher = null;
mui.plusReady(function() {
Sdata = plus.webview.currentWebview();
console.log(JSON.stringify(Sdata));
if(Sdata.home_id) {
live_id = Sdata.home_id
} else {
live_id = '0001'
}
document.getElementById("flag").innerText = 'id:' + live_id //试了很多次只有这样才能解决js异步的问题
})
mui('.mui-scroll-wrapper').scroll()
document.addEventListener('plusready', plusReady, false);
// H5 plus事件处理
function plusReady() {
// 创建直播推流控件
pusher = new plus.video.LivePusher('pusher', {
url: 'rtmp://www.perfey.top:1935/live/' + live_id
});
}
// 预览
function preview() {
pusher.start();
// pusher.preview();
}
// 结束
function stopPreview() {
pusher.stop({
preview: false
});
pusher.close()
};
// 切换摄像头
function switchCamera() {
pusher.switchCamera();
}
function chose_id(id) {
mui.openWindow({
url: 'live.html',
id: 'live.html',
styles: {
top: '0px', //mui标题栏默认高度为45px；
bottom: '50px' //默认为0px，可不定义；
},
extras: {
"home_id": id
},
createNew: true
})
}
// console.log(id);
// live_id = id;
// document.getElementById("flag").innerText = 'id:' + live_id;
// pusher.stop({
// preview: false
// });
// pusher.options.url = 'rtmp://www.perfey.top:1935/live/' + live_id
// pusher = new plus.video.LivePusher('pusher', {
// url: 'rtmp://www.perfey.top:1935/live/' + live_id
// });
// console.log(JSON.stringify(pusher))
// pusher.start();
// }
// document.getElementById("openPopover").onclick = function(){
// mui.post('http://127.0.0.1:8000/live/get_id/', {
// }, function(data) {
//
// alert(1111)
// console.log(data);
//
// }, 'json');
//
// }
</script>
</html>
video.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<title>Video Example</title>
<link rel="stylesheet" type="text/css" href="css/mui.css" />
</head>
<body style="margin:0;padding:0;text-align:center;">
观看直播
<br/><br/>
<style type="text/css">
#popover {
height: 80px;
100px;
}
</style>
<div id="popover" class="mui-popover">
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<span onclick="chose_id('0001')">0001</span>
</li>
<li class="mui-table-view-cell">
<span onclick="chose_id('0002')">0002</span>
</li>
<li class="mui-table-view-cell">
<span onclick="chose_id('0003')">0003</span>
</li>
<li class="mui-table-view-cell">
<span onclick="chose_id('0004')">0004</span>
</ul>
</div>
</div>
</div>
<a href="#popover" id="openPopover" class="mui-btn mui-btn-primary">选择直播间</a>
<button onclick="playVideo()">播放视频</button>
<button onclick="closeVideo()">关闭视频</button>
<br/>
<span id='flag' style="float: left;margin-left:10px;"></span>
<br/>
<div id="video" style="100%;height:300px;background-color:#000000;margin:auto"></div>
</body>
<script src="js/mui.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
mui.init()
var Sdata = null
var live_id = null
mui.plusReady(function() {
Sdata = plus.webview.currentWebview();
console.log(JSON.stringify(Sdata));
if(Sdata.home_id) {
live_id = Sdata.home_id
} else {
live_id = '0001'
}
document.getElementById("flag").innerText = 'id:' + live_id //试了很多次只有这样才能解决js异步的问题
})
mui('.mui-scroll-wrapper').scroll()
var video = null;
// H5 plus事件处理
function plusReady() {
// 创建视频播放控件
video = new plus.video.VideoPlayer('video', {
// src:'http://www.perfey.top/media/video/1' 这个不行,地址发送的必须是mp4格式,我自己的是数据流,浏览器可以识别,这个却不行
//src: 'http://192.168.43.5:5000/myvideo' // 播放视频
src: 'rtmp://www.perfey.top/live/' + live_id //直播拉流,这个是可以的,123是直播间的房间id可以更改的,我这里没有设置防盗链,以后可以玩玩
//src: 'images/1.mp4'
});
}
document.addEventListener('plusready', plusReady, false);
// 播放视频
function playVideo() {
video.play();
};
// 关闭视频
function closeVideo() {
video.close();
}
function chose_id(id) {
mui.openWindow({
url: 'video.html',
id: 'video.html',
styles: {
top: '0px', //mui标题栏默认高度为45px；
bottom: '50px' //默认为0px，可不定义；
},
extras: {
"home_id": id
},
createNew: true
})
}
</script>
</html>