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="100%;height:300px;background-color:#000000;margin:auto"></div>
<br/>
<input type="text" id="pushurl" value="rtmp://推流服务器地址" style=" 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="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>