扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
主要是广告问题,html5屏蔽了相当大的一部分广告插件。而且很多直播网站并不希望去进行技术升级。
成都创新互联是专业的相城网站建设公司,相城接单;提供网站设计制作、成都网站制作,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行相城网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!
div id="a1"/div
script type="text/javascript" src="ckplayer/ckplayer.js" charset="utf-8"/script
script type="text/javascript"
var flashvars={
p:1,
e:1
};
var video=['http:// movie.ks.js.cn/flv/other/1_0.mp4-video/mp4','http:// www .ckplayer.com/webm/0.webm-video/webm','http:// www .ckplayer.com/webm/0.ogv-video/ogg'];
var support=['all'];
CKobject.embedHTML5('a1','ckplayer_a1',600,400,video,flashvars,support);
/script1234567891011
HTML
CKobject.embedHTML5('放置播放器的容器的ID',
'播放器ID',
'宽高,支持百分比',
'高度,支持百分比',
视频地址,数组,因为不同的平台支持的视频格式不同,所以需要尽量多的视频格式来兼容,
初始化配置参数,比如默认是否播放,
在哪些平台上使用,all是指全部平台都调用
);
哔哩哔哩切换播放器,需要在播放的页面里选择,才可以切换到html5播放器,切换播放器的的具体步骤为:
1、首先打开哔哩哔哩直播间。
2、然后在直播页面的任意地点点击鼠标右键。
3、选择bilibili HTML5 Live Player,然后点击鼠标左键,即可切换到HTML5播放。
[img]虎牙主播小辣椒因为自身原因退网了。
虎牙直播星秀颜值人气美女主播,舞蹈性感撩人,可嘻哈可御姐的酷酷女孩,自称是被跳舞耽误的唱歌主播,为人真诚坦率,将直播当成自己所爱好的事情。
小辣椒的长相偏向于御姐风,日常打扮穿着也偏向于酷酷的风格,将直播当成爱好,并且在努力让自己变得越来越好。
小辣椒的微博简介是:真诚对待每个人,用心做好每件事,希望把快乐带给你们,感谢支持我的人。
自2014年11月虎牙直播成立以来,虎牙直播一直采取精品化内容战略,随着电竞赛事的发展,虎牙直播汇聚了众多世界冠军级战队和主播,引入国内外赛事的直播版权,深耕独家IP赛事。
此外,虎牙直播还通过明星主播化等方式展开泛娱乐直播,启动全明星主播战略,许多娱乐明星的直播处女秀均是在虎牙直播完成。
虎牙直播也是国内首家全网启用HTML5直播技术的平台,用户不再需要安装插件,打开虎牙直播即可享受“远离卡顿发烫,1秒即开看直播”的畅快体验。
这一技术的革新与优化,不仅让国内的直播行业迎来了一个崭新的时代,也是对外证明了中国的技术达到了世界领先的水平。
功能模块概述
通过obs客户端推流到nginx流媒体服务器上,对流媒体用ffmpeg将流剪切为若干段ts流文件并保存到临时目录中,通过访问m3u8格式拼接ts流文件段来观看直播。
推流端
采用开源工具OBS客户端进行推流
根据项目的推流地址,填入OBS客户端(下载地址)中,并设置场景,保存后重启,便可开始推流。
为更加稳定的推流,建议使用以上链接中的v0.625稳定版本,按提示安装完成后,打开设定.在广播设定中,伺服器统一填写我们项目的流媒体接收流地址:
rtmp://127.0.0.1:1935/hls/
以上这几个数据都是可以更改的。
127.0.0.1——你的流媒体服务器ip
1935——你的rtmp端口号
hls——你的直播nginx配置模块
具体在下文中也有详细介绍
配置地址
回到主界面,右键来源,选择添加视频捕捉设备或获取窗口等(相关设置默认即可),点击开始串流,便可开始直播。
添加场景
图为添加视频捕捉设备后的直播画面:
直播中
流媒体服务器
Nginx接收推流模块
rtmp_auto_push on;
rtmp {
server {
listen 1935;
application hls {
live on;
hls on;
hls_path /tmp/hls;
on_publish 项目地址/liveOnPublish;
on_publish_done 项目地址/liveOnDone;
notify_method get;
}
}
}
配上我在word上的注解
注解1
Nginx处理直播流模块
http {
server {
listen 80;
server_name localhost;
location /hls {
secure_link $arg_st,$arg_e;
secure_link_md5 key$arg_e;
subs_filter .ts '.ts?st=$arg_ste=$arg_eclentip=$remote_addr';
subs_filter_types application/vnd.apple.mpegurl;
if ($secure_link = "") {
return 402;
}
if ($secure_link = "0") {
return 403;
}
# Serve HLS fragments
types {
application/vnd.apple.mpegurl m3u8;
video/mp2t ts;
}
root /tmp;
add_header Cache-Control no-cache;
}
}
}
注解2
项目部署服务器
流媒体服务器不通过项目服务器,整个直播过程的推流和处理流都在流媒体服务器上进行。项目服务器主要进行直播地址加密处理意见推流开始和结束触发的方法(liveOnPublish(),liveOnDone())已及对直播地址加密.
播放端
直接通过HTML5中的video标签设置src来播放直播流。如:
video src="pro/live.m3u8?st=UM/L8jdfTlY2b1j1F6XSxA==e=1468548530
" controls="controls"/video
存在的问题
延迟待测试(不科学的数据是安卓手机普遍在30-40s,苹果手机在20-30s)
并发待测试
掉帧待测试(网速影响大,网络好几乎不掉帧,网络差掉一半,用户体验差)
现在还是有少部分Java,不过之后会越来越少,毕竟flash已经快停止提供服务了,现在是非转H5不可的情况,现在的话虎牙已经完全不用flash了。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流