提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
这个H5大招,你会吗?
今年两会,各大媒体报业积极响应国家“两微一端”(即微博微信客户端),纷纷出了不少质量上乘的H5作品,其中一个H5成功吸引了我的注意:
流程如下:
这明明就是直播App的功能,居然完全给移植到了H5上,虽然前两个步骤是仿真的,但运行起来太流畅,完全没毛病!
这个H5背后的策划是人民日报的中央厨房(人民日报的全媒体平台),在两会期间更是被包括搜狐公众平台等各家媒体报道:用大众熟悉的“抢票”形式营造了一个极具真实感的两会现场,用户占座后就能看到CCTV-13的直播界面,不仅如此还可以发弹幕和送花参与互动。
"来自搜狐公众平台报道"
其实做起来不算难,只要你有电视台的直播流链接,把地址嵌套在脚本里,就可以做出一模一样的效果。
前期准备:
H5工具:Mugeda(www.mugeda.com)
浏览器:下载Chrome浏览器,这是对H5支持最好的,方便边做边调试
代码分享
步骤:
1:在舞台上使用绘图工具画一个物体
2:将这个方块命名为“container”
3:将下面这行代码复制进入脚本框
mugeda.addEventListener('renderReady', function () {
var scene = mugeda.scene;
var container = scene.getObjectByName('container');
var containerId = 'live_video_container';
container.dom.id = containerId;
var option = {
//修改下方"http://XXXX.m3u8"为你需要的视频流地址
"live_url": "http://XXXX.m3u8",
"width" : 320,
"height" : 260,
"x5_type": 'h5'
}
var player = new qcVideo.Player(containerId, option);
});
修改视频流地址
4:在文件-导入-JS脚本里,
导入这个脚本:
http://qzonestyle.gtimg.cn/open/qcloud/video/live/h5/live_connect.js
既可以在H5里实现直播功能
样例:
http://cn.mugeda.com/animation/edit/325ddf34
如果看完还不明白,建议点击这里看视频教程!
温馨提示:课程先免费报名后才可以看回播。
在目录中找到这节,点击可看回放
如果你想和我交流关于更多有关H5,可以加我微信songyue-daydayup。
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册