今年两会，各大媒体报业积极响应国家“两微一端”（即微博微信客户端），纷纷出了不少质量上乘的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。