直播业务指南

注意HBuilder正式版更新频率没有HBuilderX快,很多问题在HBuilderX不存在但HBuilder还未更新

引言

\n

直播是很多开发者的需求。
HTML5的video,虽然可以播放流媒体,但不支持rtmp等常用直播格式。更无法实现推流,就是实时流式上传视频。
HBuilder 9.1起给开发者提供了完整的直播解决方案。
HTML5Plus的规范新增了video规范,提供了原生的视频播放和推流录制上传。

HTML5Plus的规范是通行规范,可支持任何厂商的直播服务器。
但又拍云公司作为HTML5中国产业联盟成员,为HTML5plus的开发者提供了更多完善服务。
1. 注册优惠
点此链接注册,可得众多优惠。
a) 认证完毕后赠送 61 元免费代金券;
b) 首次充值后,奖励充值金额 10% 代金券
c) 一周后再赠送200元的代金劵
以上优惠不是三选一,是全都有。有效期1个月时间。
2. 便捷的服务器搭建
无需关心rtmp服务器的搭建和网络cdn的优化,注册后提供自己的直播推流和播放的域名,做cname映射到又拍云的服务器,然后自己随便定义二级目录地址就可以用了。
详见又拍云文档http://docs.upyun.com/live/guide/

代码示例-推流上传

\n

HBuilder 9.1自带的Hello H5+真机运行,可以看到video示例,里面有推流和播放的示例代码。
这里简单描述下代码逻辑。

直播推流控件会调用手机摄像头采集视频流,编码后通过rtmp协议提交到直播服务器。

  • 创建直播推流控件
    在页面中直播推流控件需要绑定div确定位置及大小,创建直播推流控件需要传入div的id,示例如下:
\n
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>Hello H5+</title>
<script type="text/javascript">
var pusher = null;
// H5 plus事件处理
function plusReady(){
// 创建直播推流控件
pusher = new plus.video.LivePusher('pusher',{url:'rtmp://testlivesdk.v0.upaiyun.com/live/upyunb'});
// 监听状态变化事件
pusher.addEventListener('statechange', function(e){
console.log('statechange: '+JSON.stringify(e));
}, false);
}
document.addEventListener('plusready', plusReady, false);
</script>
</head>
<body>
<br/>
<div id="pusher" style="width:300px;height:400px;background-color:#000000;margin:auto"></div>
</body>
</html>
\n

其中new plus.video.LivePusher()第一个参数'pusher'为绑定div的id值,第二个参数中的url属性值为直播推流服务器地址,必须为rtmp协议。创建后返回直播推流控件(LivePusher)对象,后续可通过此对象进行操作控制。

  • 采集直播推流提交到服务器
    创建直播推流控件后可通过setOptions方法更新直播控件参数,如下更新直播推流服务器地址:
\n
pusher.setOptions({url:'rtmp://新的直播推流服务器地址'});
\n

配置完成后调用start方法开始采集直播流提交到服务器:

pusher.start();
\n

推流时支持美颜、摄像头切换。不支持其他特效滤镜。
目前不支持录屏直播,无法实现手机录制。除非使用原生sdk自行开发离线打包。
目前暂不支持直播连麦功能。

更多API参考文档http://www.html5plus.org/doc/zh_cn/video.html#plus.video.LivePusher
推流到直播服务器后可通过原生视频播放控件进行播放。

代码示例-使用视频播放控件播放直播视频流

\n

HTML5plus扩展的原生视频播放控件支持视频格式包括mp4和flv,视频传输协议支持http/https和rtmp/hls/rtsp(直播流)

  • 创建视频播放控件
    在页面中视频播放控件需要绑定div确定位置及大小,创建视频播放控件需要传入div的id,示例如下:
\n
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>Hello H5+</title>
<script type="text/javascript">
var video = null;
// H5 plus事件处理
function plusReady(){
// 创建视频播放控件
video = new plus.video.VideoPlayer('video',{
src:'rtmp://live.hkstv.hk.lxdns.com/live/hks'
});
}
document.addEventListener('plusready', plusReady, false);
</script>
</head>
<body>
<br/>
<div id="video" style="width:98%;height:300px;background-color:#000000;margin:auto"></div>
</body>
</html>
\n

其中new plus.video.VideoPlayer()第一个参数'video'为绑定div的id值,第二个参数中的src属性值为要播放的直播视频地址,直播视频必须为rtmp协议。创建后返回视频播放控件(VideoPlayer)对象,后续可通过此对象进行操作控制。

  • 播放视频流
    创建视频播放控件后可通过setOptions方法更新播放控件参数,如下更新视频服务器地址:
\n
video.setOptions({src:'新的视频服务器地址'});
\n

用户可以点击播放控件上的播放按钮进行播放,也可调用play方法进行播放:

video.play();
\n

如果想在视频上绘制一些内容,可以在上面创建一个透明webview,具体代码在Hello H5+的video示例里有。
包括防盗播的跑马灯也可以这么做。
如果是uni-app项目,把上面盖的webview换成plus.nativeObj.view。

更多API参考文档http://www.html5plus.org/doc/zh_cn/video.html#plus.video.VideoPlayer

如果需要在uni-app里使用直播,还需结合参考此文使用:http://ask.dcloud.net.cn/article/35036

觉得这个更新给力,就赞助下我们辛苦加班的工程师吧:)
赞助链接


9 分享 关注
DCloud_客服_Trust qq820805144 霸王 835582871@qq.com 461338425@qq.com Ayumi 高司令 夫子 416867448@qq.com
416225569@qq.com

416225569@qq.com

小米6X 手机直播 非常模糊 对接腾讯云 怎么解决
0 赞 2019-01-03 14:38
627271099@qq.com

627271099@qq.com

methods:{
// 创建直播推流控件
createLivePusher:function() {
var pages = getCurrentPages();
var page = pages[pages.length - 1];
var currentWebview = page.$getAppWebview();
var pusher = plus.video.createLivePusher('sdfe', {
url:'rtmp://live.80511.net/live/c2fb2431d1?bizid=39334&txSecret=d697af7b7d55001c8f7238a86be954fa&txTime=5C1FB0FF',
top:'100px',
left:'0px',
width: '100%',
height: '100%',
position: 'static',
beauty:'1',
whiteness:'5',
mode:'SD'
});
currentWebview.append(pusher);
},
},
请问这样写有问题吗 为什么无法推流
0 赞 2018-12-23 17:31
DCloud_heavensoft

DCloud_heavensoft 回复 1823127286@qq.com

云服务肯定是收费的,不管用又拍云还是其他家,都没有免费让你用的
0 赞 2018-11-28 21:53
1823127286@qq.com

1823127286@qq.com 回复 guoshunfeng@sina.com

我的怎么推不上去啊,大佬,求指教啊,还有那个直播服务是收费的吧
0 赞 2018-11-27 15:52
1823127286@qq.com

1823127286@qq.com

这个直播服务,是收费的吧,大佬们
0 赞 2018-11-27 15:02
Mike_li

Mike_li

推流能设置码率吗?
0 赞 2018-11-08 15:48
937869175@qq.com

937869175@qq.com

请问不支持 手机录制,不支持连麦功能 意思是 就是主播录制的功能 要自己另外开发是吗
0 赞 2018-11-05 10:43
DCloud_heavensoft

DCloud_heavensoft 回复 Lspring

支持离线打包
0 赞 2018-10-31 04:52
243724806@qq.com

243724806@qq.com 回复 878898167@qq.com

同问 解决了么
0 赞 2018-09-15 21:12
Lspring

Lspring

请问离线打包能提供直播的sdk吗
0 赞 2018-09-12 16:01
ouweican@126.com

ouweican@126.com

为什么我在创建推流控件的时候只能在参数里面放url参数,只要加一些其他参数就推流不了。比如静音美颜那些都没用
0 赞 2018-09-10 15:39
guoshunfeng@sina.com

guoshunfeng@sina.com

我的延时在5秒左右大家的有延时没用的阿里云服务
0 赞 2018-08-07 12:17
一路格桑花

一路格桑花 回复 qq820805144

要求可不少啊
0 赞 2018-08-03 09:28
835582871@qq.com

835582871@qq.com 回复 281960910@qq.com

我也没有看到效果
0 赞 2018-07-30 14:43
Ayumi

Ayumi

正在关注 直播
0 赞 2018-07-27 10:49
DCloud_App_Array

DCloud_App_Array 回复 835582871@qq.com

VideoPlayer播放控件可以创建多个。
0 赞 2018-07-20 17:40
835582871@qq.com

835582871@qq.com 回复 835582871@qq.com

好多改了没有用
0 赞 2018-07-20 13:54
835582871@qq.com

835582871@qq.com

options在直播过程中能改吗?
0 赞 2018-07-20 11:43
835582871@qq.com

835582871@qq.com

一个页面只能定义一个播放吗?我想在页面里放置多个视频
0 赞 2018-07-18 15:21
qq820805144

qq820805144 回复 DCloud_App_Array

非全屏模式像爱奇艺APP那样固定在顶部。
0 赞 2018-07-18 13:14
qq820805144

qq820805144 回复 DCloud_App_Array

对啊,还有如何判断是播放连续剧,放完一集自动播放下一集和判断出是连续剧播放器上有点下一集的按钮,还有那个加载中转圈那个可以修改个好看点的样子吗
0 赞 2018-07-18 11:49
DCloud_App_Array

DCloud_App_Array 回复 qq820805144

非全模式怎么还需要返回按钮呢?这种情况下返回按钮应该是页面的才对呀
0 赞 2018-07-16 11:13
qq820805144

qq820805144

如果载入连续剧在播放器里面有没有点一集的按钮,还有播放器不是全屏的时候没有返回按钮
1 赞 2018-07-15 01:41
海阔天空_94

海阔天空_94

怎么下载9.1 版本?
0 赞 2018-07-14 16:05
qq820805144

qq820805144

希望可以缓冲,比如用户网络不好暂停的时候可以缓冲视频还有预加载
0 赞 2018-07-11 00:11
37797427@qq.com

37797427@qq.com 回复 37797427@qq.com

而且要卡屏
0 赞 2018-07-07 12:54
37797427@qq.com

37797427@qq.com

还有就是不播放m3u8 资源吗?
0 赞 2018-07-07 12:53
37797427@qq.com

37797427@qq.com

安卓8.0 又BUG 返回主页要从0秒开始播放
0 赞 2018-07-07 12:52
454609449@qq.com

454609449@qq.com

异常:show-progress:播放时无法没有进度条
0 赞 2018-06-28 17:23
itxiaoxiao

itxiaoxiao

视频在竖屏下没法拖动改变音量和亮度
0 赞 2018-06-27 09:59
itxiaoxiao

itxiaoxiao

阿里视频防盗链问题怎么解决,毕竟app页面没有referer
0 赞 2018-06-27 09:56
qq820805144

qq820805144

视频传输协议建议增加支持ftp协议的
0 赞 2018-06-26 22:09
DCloud_Android_zl

DCloud_Android_zl 回复 878898167@qq.com

{"initial-time":"30",
"autoplay":"true",
"objectFit":'fill',
"show-fullscreen-btn":"true",
"show-play-btn":"true",
"show-progress":"true",
"show-center-play-btn":"true",
"enable-progress-gesture":"true"}
VideoPlayerOptions参照上面设置,属性名称用引号括起来
1 赞 2018-06-26 12:30
281960910@qq.com

281960910@qq.com

美颜、美白的值范围是多少 感觉设置了不起作用
1 赞 2018-06-25 18:51
281960910@qq.com

281960910@qq.com 回复 DCloud_heavensoft

还有个问题,进入拉流控件屏幕就自动暗了下来怎么回事儿,后面也不能恢复了。要退出app重新进去app页面才会恢复,再进去拉流播放页面又暗了,手机的自动调节屏幕亮度都不行
0 赞 2018-06-25 10:50
281960910@qq.com

281960910@qq.com 回复 DCloud_heavensoft

是的,我已经解决了,就是和你说的一样。
0 赞 2018-06-25 10:46
qq820805144

qq820805144

播放器的封面截图怎么弄呢
0 赞 2018-06-25 06:59
DCloud_heavensoft

DCloud_heavensoft 回复 281960910@qq.com

不是调视频的全屏功能,而是把视频的占位div设成全屏大,然后在参考Hello H5+里的示例,创建一个新的半透明webview在上面,显示那些元素。元素点击交互需要跨webview通信
1 赞 2018-06-23 20:53
mqcmqc@21cn.com

mqcmqc@21cn.com

厉害 希望越来越牛逼
0 赞 2018-06-23 16:38
菜鸡

菜鸡

性能怎么样...
0 赞 2018-06-23 16:31
281960910@qq.com

281960910@qq.com

要在全屏视频上加推流控制的按钮比如 开始推流 暂停推流怎么弄 现在一开始推流这些在上层的元素都被视频覆盖了 看不见了 点还是能点到
0 赞 2018-06-23 15:07
281960910@qq.com

281960910@qq.com 回复 878898167@qq.com

是有问题我也发现了 例如 show-progress 改成 show_progress
0 赞 2018-06-23 14:30
健健

健健 回复 878898167@qq.com

我怎么 没有更新呢?
0 赞 2018-06-22 17:27
健健

健健

赞赞赞
0 赞 2018-06-22 13:23
878898167@qq.com

878898167@qq.com 回复 DCloud_heavensoft

调试正常,离线打包出错了,还有一点希望能在setOptions加上视频标题及返回上一页按钮
0 赞 2018-06-22 02:28
DCloud_客服_Trust

DCloud_客服_Trust 回复 王者地带

HBuilder 发版后,新建最新的 hello h5+ 模板,里面有示例哦。
0 赞 2018-06-21 21:48
王者地带

王者地带 回复 DCloud_heavensoft

可以做个dome 更新到 Hello mui 上
0 赞 2018-06-21 21:44
王者地带

王者地带

要在线打包,才能体验吗?
0 赞 2018-06-21 20:10
回梦無痕

回梦無痕

很好,明天试一下这个播放器。
0 赞 2018-06-21 19:48

要回复文章请先登录注册