前段时间在尝试做视频时遇到了一些坎儿,发现在网上播放视频用ajax传blob数据类型的视频时,没法边下边播。
在网上搜了些相关资料后,发现一直用的七牛云是支持hls流媒体的,下面是一些步骤:
在七牛云处理视频文件
在七牛云用多媒体处理,新建作业,设置预设规格为hls,码率看自己要求。
目标文件名后缀写成m3u8。
待处理完成后,在空间里能看到被切片的ts视频文件和m3u8格式的列表文件
播放m3u8视频
将m3u8的地址扔进播放器就可以播放了。
这里我用的播放器是ckplayer,更详细的配置可以进官方文档看。
<script src="jquery/jquery.min.js"></script> <script src="ckplayer/ckplayer.js"></script> <div id="video"></div> <script> var flashvars={ f:'ckplayer/m3u8.swf', a:"video_src.m3u8", s:4, c:0, p:1, lv:0 //0是点播,1是直播 }; var params={bgcolor:'#FFF',allowFullScreen:true,allowScriptAccess:'always',wmode:'transparent',menu:false}; var video=["video_src.m3u8"]; CKobject.embed('ckplayer/ckplayer.swf','video','ckplayer_video','720px','405px',false,flashvars,video,params); </script>
成功播放视频。