HTML5技术

ckplayer 如何在PC上完美支持 m3u8播放 - 冒雨ing

字号+ 作者:H5之家 来源:博客园 2016-07-27 11:00 我要评论( )

使用过ckplayer的同学都知道,相对jwplayer等,它非常的容易配置和使用。功能也是基本满足我们的需求的。 一般情况我们都使用普通的视频格式比如mp4,flv等播放,但如果视频文件过大,会加载较慢。 于是我们可以将视频转成m3u8格式来解决这个问题(可以百度m3

使用过ckplayer的同学都知道,相对jwplayer等,它非常的容易配置和使用。功能也是基本满足我们的需求的。

一般情况我们都使用普通的视频格式比如mp4,flv等播放,但如果视频文件过大,会加载较慢。

于是我们可以将视频转成m3u8格式来解决这个问题(可以百度m3u8来了解原理,简单点说他就是把视频切成若干个切片,每个切片都可以独立播放而且大小很小,然后利用一个文件索引来依次播放这些文件,所以很快)

如何转m3u8格式?可以参考我上一篇博文。

=======================

但是PC上使用video 播放m3u8 是不支持的。幸好的是ckplayer有支持m3u8在PC播放的插件。

但注意了。有个巨坑,千万不要根据ckplayer官网的说明去安装配置这个插件!会出现各种错误!

 

其实很简单,下载插件:m3u8.swf ?mod=viewthread&tid=18168 

下载后解压,将m3u8.swf文件拷贝至你的服务器任意目录,可以访问到就好,为了方便我是放在了ckplyer插件文件夹里。

OK!配置成功! 是不是很简单?就拷贝过来就OK啦!

接下来是js:

showPlayer('http://static.guojiang.tv/pc/video/sound/1/playlist.m3u8','videoWrap') function showPlayer(src, id){ //player var flashvars={ f : 'http://static.guojiang.tv/pc/js/ckplayer/m3u8.swf', a : src, c : 0, s:4, lv:0//注意,如果是直播,需设置lv:1 }; var params={bgcolor:'#FFF',allowFullScreen:true,allowScriptAccess:'always',wmode:'transparent'}; var video=[src]; CKobject.embed('http://static.guojiang.tv/pc/js/ckplayer/ckplayer.swf',id ,'ck-video','100%','100%',false, flashvars ,video, params); }

  f: m3u8.swf 的地址

  a: 你要播放的m3u8视频地址

至此,大功告成!

============================

切记:不要跟着官网的步骤做!切记!

 

 

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 如何在 ASP.NET Core 中发送邮件 - Savorboard

    如何在 ASP.NET Core 中发送邮件 - Savorboard

    2017-05-02 08:02

  • 完美解决微信下拉上拉 - wangweisheng

    完美解决微信下拉上拉 - wangweisheng

    2017-04-09 17:04

  • 如何在页面上输出html标签:符号实体 - Aqiaoba

    如何在页面上输出html标签:符号实体 - Aqiaoba

    2017-02-26 12:04

  • 自已开发完美的触摸屏网页版仿app弹窗型滚动列表选择器/日期选择器 - j.king

    自已开发完美的触摸屏网页版仿app弹窗型滚动列表选择器/日期选择器 -

    2016-10-30 15:00

网友点评
l