初探HLS流媒体-用七牛云快速实现M3U8 TS流点播

前段时间在尝试做视频时遇到了一些坎儿,发现在网上播放视频用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>



成功播放视频。

测试地址:www.mr158.cn/m3u8test

 React ES6 + Webpack2搭建项目环境
那个暑假,人生的第一份工作 
上一篇:React ES6 + Webpack2搭建项目环境
下一篇:那个暑假,人生的第一份工作


如果我的文章对你有帮助,或许可以打赏一下呀!

支付宝
微信
QQ