Hbuilder的HTML5+规范确实给众多开发者带来了很多便利,目前直播应用比较多,测试了一下H5 plus的直播推流与观看API确实可用,但是比原生应用要逊色一些了,测试一下是可以的,如果要做成型的产品可能要斟酌一下了,实际测试声音还原不够好,另外推流后客户端播放使用rtmp协议是可以正常播放,如果使用m3u8则播放卡顿,而同样的播放客户端和视频直播服务器,用其他工具推流则不会出问题,不知道是不是设备兼容性问题,下面给出推流和播放的代码供参考。
推流代码
<!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>
<script type="text/javascript">
var pusher = null;
// H5 plus事件处理
function plusReady(){
// 创建直播推流控件
pusher = new plus.video.LivePusher('pusher',{
url:'rtmp://推流服务器地址',
mode:'FHD',
muted:false,
});
pusher.preview();
// 监听状态变化事件
pusher.addEventListener('statechange', function(e){
console.log('statechange: '+JSON.stringify(e));
}, false);
}
document.addEventListener('plusready', plusReady, false);
// 设置推流服务器
function updatePusher() {
var url= document.getElementById('pushurl').value;
pusher.setOptions({
url:url
});
}
// 开始推流
function startPusher() {
pusher.start();
}
// 切换摄像头
function switchCamera() {
pusher.switchCamera();
}
</script>
</head>
<body style="margin:0;padding:0;text-align:center;">
<div id="pusher" style="width:100%;height:300px;background-color:#000000;margin:auto"></div>
<br/>
<input type="text" id="pushurl" value="rtmp://推流服务器地址" style="width: 500px;"/> <br><br>
<button onclick="updatePusher()">更新推流服务器</button>
<br/><br>
<button onclick="startPusher()">开始推流</button> <br><br><button onclick="switchCamera()">切换摄像头</button>
<br/><br/>
</body>
</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>
<script type="text/javascript">
var src = '播放地址支持rtmp http等协议';
var video = null;
// H5 plus事件处理
function plusReady(){
// 创建视频播放控件
video = new plus.video.VideoPlayer('video',{
src:src
});
video.play();
}
document.addEventListener('plusready', plusReady, false);
// 切换视频地址
function switchVideo(src){
document.getElementById('content').innerHTML = src;
console.log(src);
video.setOptions({src:src});
video.play();
}
</script>
</head>
<body style="margin:0;padding:0;text-align:center;">
<span id="content" style="color:#0000FF">默认</span><br>
<div id="video" style="width:100%;height:300px;background-color:#ffffff;margin:auto;"></div>
<br>
<button onclick="switchVideo('播放地址1')">切换视频地址1</button><br /><br>
<button onclick="switchVideo('观看地址2')">观看直播2rtmp</button><br /><br>
<button onclick="switchVideo('观看地址3')">观看直播3m3u8</button><br />
</body>
</html>
-
本文导读:父亲也许总是不善言辞,也总是不像母亲一样亲切,但是他们对女儿的爱像山一样坚实,沉寂,他们有话对女儿说…福彩3D 体彩排列3 快乐8 彩票app … 对你不好的人,你不要太介怀,在你一生中,没有人有义务要对你好,除了我和你妈妈。至于那些对你好的人,你除了要珍惜、感恩外,也请多防备一点,因为,每个人做每件事,总有一个原因,他对你好,未必真的是因为喜欢你,请你必须搞清楚,而不必太快将对方看作真朋友。(0) 回复 (0)
-
讨债公司/蓝月传奇辅助/蓝月辅助(0) 回复 (0)
-
太棒了,感谢楼主分享的资源SG时时彩 幸运时时彩 SG飞艇(0) 回复 (0)
-
讨债公司 搬家公司 蓝月传奇辅助(0) 回复 (0)