【原】在Hbuilder中使用MUI以及HTML5+构建支持流媒体的应用

一、引言:

前段时间有个开发流媒体应用的需求,本人对Java和Objective-C的接触不是很深,又要求iOS和Android同时支持该应用,想了想还是使用MUI框架以及HTML5+去做;构建应用的途中发现,好像官方并未提供构建流媒体应用的相关资料,搞得我也挺无奈,,后来发现,既然整个APP页面都是用HTML5+CSS3构建的,那么直接使用HTML5的流媒体播放器罢了,于是有了这篇文章。

二、前期准备:

1、Hbuilder开发工具。

2、一个视频源,推荐采取Nginx方案,视频格式H.264的MP4。

3、CKplayer播放器。(测了一些其他的H5播放器,感觉都没它好用;官网:http://www.ckplayer.com/)

三、实现步骤:

1、新建一个含MUI以及ckplayer.js的HTML文件,并创建一个DIV(id=”test”)。

2、body中创建一个script标签,内容如下:

var flashvars={
p:1,
e:1
};
var video=[‘http://192.168.XX.XX/201511/jiandangweiye.mp4->video/mp4’];
var support=[‘all’];
CKobject.embedHTML5(‘test’,’ckplayer_a1′,320,240,video,flashvars,support);

3、保存,运行即可。

四、注意问题:

1、如果不支持托拉拽等功能,请检查你的视频源,是否添加关键帧(若不会添加关键帧,请看“附2”)、元数据。

2、如果长时间加载不出视频,请核实你的无线网络情况并且是否把元数据放在第一帧。(若不会修改元数据位置,请看“附1”)

3、经个人测试,编写完成后,在iOS与Android端均可使用(测试机型:iPhone 5S、小米、三星I9300),但Android端使用播放器的全屏功能时无法横屏,可能需要监听事件并使用HTML5+进行处理,暂时没去尝试,后期如果解决了会来补充的(iOS没有此类问题)。

附:

1、如果需要修改元数据位置,推荐使用工具:qt-faststart

2、在转码的途中添加关键帧,比如在FFMPEG中的keyint参数就是添加关键帧的,转码时记得加上这个参数,keyint=25(每25帧添加一个关键帧)

 

效果截图就不上了,你们懂得。  😀