现在国内各界站长用的最多的在线播放器应该就是CKPlayer了吧!
CKPlayer优点在于,因为是国人开发的,所以在使用过程中查阅相关资料比较方便,特别是对于英语水平不高的站长来说,国产的东西确实是再好不过的了,而且CKPlayer的实用性和易用性也不可否认,做的确实也相当好了。
今天推荐一款国外的HTML5在线播放器JWPlayer,相比很多人都知道,或者说用过,再或者说正在用。
之所以推荐这款播放器,原因在于JWPlayer作为一款支持多终端多媒体视频播放器,在易用性以及兼容性方面都做的非常好,而且在开发插件方面也非常方便。
在国外,做在线播放,这款播放器基本上是在首选之列。
播放器支持H.264编码的MP4视频文件的播放,同时也支持FLV(需要调用flashplayer)。
就目前而言,为了更好的适应移动端播放,建议网站视频使用MP4格式。
下面给出一段JWPlayer基础代码,使用这段代码就可以很轻松的的实现播放器的输出。在没有web环境下也适用(前提是你下载了JWPlayer的源码,文章结尾处下载)。
<script type="text/javascript" src="jwplayer.js"></script> <script>jwplayer.key="4sNBpozdkb2Gv+IYeWyd+CID9tW2NXdJE5GeSg==";//修改为自己的key</script> <div id="player"> Loading... </div> <script type="text/javascript"> jwplayer("player").setup({ "file": "jwplayer-30s.mp4",//视频文件路径 "aspectratio": "16:9",//播放器自适应比例 "height": "360",//播放器高度 "type":"mp4",//播放文件类型(可选) "title": "测试标题",//标题(可选) "description": "测试视频描述",//描述(可选) "image": "http://ww4.sinaimg.cn/large/b6839357jw1e3val80tknj20dw099jsb.jpg",//视频封面(可选) "repeat":"true",//重复播放(留空则不重复播放) "autostart":"true",//自动播放(留空则不启用自动播放) }); </script>
上面代码都已经添加了注释,可根据需要自行修改。
JWPlayer默认是调用远程官方文件的,为了避免这个问题,我把js里面的路劲修改了一下,完全本地化了,因为是相对路径,所以在测试的时候需要注意。
压缩包里面同样有demo文件,下载解压之后可以直接打开demo文件查看效果,提供的版本为官方目前最新稳定版本7.9.1。
后续我会更新一些JWPlayer更高级的用法,比如:如何插入视频广告、如何设置清晰度、如何添加控制条缩略图还有怎么播放VR视频等等相关的教程和demo。