建设部门网站,wordpress批量移动产品,网页设计图片自适应,二维码生成器制作CKplayer是一款基于Flash和HTML5技术的开源视频播放器#xff0c;支持多种格式的音视频播放#xff0c;并且具有优秀的兼容性和扩展性。
它不仅可以在网页上播放本地或者网络上的视频#xff0c;还可以通过代码嵌入到网页中#xff0c;实现更加个性化的播放效果。CKplayer…CKplayer是一款基于Flash和HTML5技术的开源视频播放器支持多种格式的音视频播放并且具有优秀的兼容性和扩展性。
它不仅可以在网页上播放本地或者网络上的视频还可以通过代码嵌入到网页中实现更加个性化的播放效果。CKplayer全称为超酷flv播放器它是一款用于网页上播放视频的软件支持的格式有http协议上的flvf4vmp4格式同时支持rtmp视频流格式播放。
此播放器的特点在于用户可以自己定义播放器的风格诸如播放/暂停按钮静音按钮全屏按钮都是以外部图片接口形式调用用户根据自己的需要制作出播放器风格所需要使用的各个按钮图片然后替换掉原始风格里相应的图片就可以制作出自己的风格了。 引入外部库 titleckplayer调用演示-PC版/titlescript typetext/javascript srcckplayer/hls.js/hls.min.js/scriptlink relstylesheet typetext/css hrefckplayer/css/ckplayer.cssscript typetext/javascript srcckplayer/js/ckplayer.js/script创建自适应DOM容器
div classvideo stylewidth: 100vw;height: 100vh;/divckplayer封装函数
function getHlsVideo(url) {var videoObject {container: .video, //容器的ID或classNameplug: hls.js,//设置使用hls插件screenshot: true,//截图live: false,//直播 true false//backLive: false,rightBar: true,//右边控制栏//smallWindows: true,//小窗口//webFull:true,//全屏//theatre:true,//剧场模式//controls:true,autoplay: true,title: HLS视频展示联播,volume: 0.5,//默认音量为logo: logo.png,//video: url};new ckplayer(videoObject);}设置清晰度视频源 video: [[url, video/m3u8, 标清, 0],[05cacb4e02f9d9e.mp4, video/mp4, 高清, 0]]避免入坑
HLS播放兼容性
HLSHTTP Live streaming是基于HTTP的流媒体传输协议由apple公司所提出的一种由于传输音视频的协议交互方式当前HLS被广泛应用于视频点直播领域。 HLS采用HTTP协议传输音视频数据HLS通过将音视频流切割成一个个小的TS切片及生成m3u8的播放列表文件播放客户端通过HTTP协议下载播放列表文件按照播放列表文件制定的顺序下载切片文件并播放从而实现便下载边播放HLS协议下苹果设备可以直接播放.m3u8的视频但是其他浏览器不能直接播放使用ckplayer开发播放器后苹果设备和手机端无法直接播放在chrome浏览器预览视频时即便设置了自动播放也需要点击播放按钮。 漏刻有时
