ckplayer自己定义风格播放器的开发记录

CKplayer是一款基于Flash和HTML5技术的开源视频播放器,支持多种格式的音视频播放,并且具有优秀的兼容性和扩展性。

它不仅可以在网页上播放本地或者网络上的视频,还可以通过代码嵌入到网页中,实现更加个性化的播放效果。CKplayer全称为超酷flv播放器,它是一款用于网页上播放视频的软件,支持的格式有:http协议上的flv,f4v,mp4格式,同时支持rtmp视频流格式播放。

此播放器的特点在于用户可以自己定义播放器的风格,诸如播放/暂停按钮,静音按钮,全屏按钮都是以外部图片接口形式调用,用户根据自己的需要制作出播放器风格所需要使用的各个按钮图片然后替换掉原始风格里相应的图片就可以制作出自己的风格了。

引入外部库

html 复制代码
    <title>ckplayer调用演示-PC版</title>
    <script type="text/javascript" src="ckplayer/hls.js/hls.min.js"></script>
    <link rel="stylesheet" type="text/css" href="ckplayer/css/ckplayer.css">
    <script type="text/javascript" src="ckplayer/js/ckplayer.js"></script>

创建自适应DOM容器

html 复制代码
<div class="video" style="width: 100vw;height: 100vh;"></div>

ckplayer封装函数

javascript 复制代码
function getHlsVideo(url) {
        var videoObject = {
            container: '.video', //容器的ID或className
            plug: '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);
    }

设置清晰度视频源

javascript 复制代码
 video: [
                [url, 'video/m3u8', '标清', 0],
                ['05cacb4e02f9d9e.mp4', 'video/mp4', '高清', 0]
            ]

避免入坑

HLS播放兼容性

  • HLS(HTTP Live
    streaming),是基于HTTP的流媒体传输协议,由apple公司所提出的一种由于传输音视频的协议交互方式,当前HLS被广泛应用于视频点直播领域。
    HLS采用HTTP协议传输音视频数据,HLS通过将音视频流切割成一个个小的TS切片及生成m3u8的播放列表文件,播放客户端通过HTTP协议下载播放列表文件,按照播放列表文件制定的顺序下载切片文件并播放,从而实现便下载边播放
  • HLS协议下,苹果设备可以直接播放.m3u8的视频,但是其他浏览器不能直接播放;
  • 使用ckplayer开发播放器后,苹果设备和手机端,无法直接播放;
  • 在chrome浏览器预览视频时,即便设置了自动播放,也需要点击播放按钮。

@漏刻有时

相关推荐
wanfeng_099 天前
视频m3u8形式播放 -- python and html
python·html·video·hls·m3u8
superconvert18 天前
smart_web 管理端基本说明
websocket·nginx·ffmpeg·webrtc·rtmp·hls·srt·m3u8·obs·flv·vmix
爱码少年24 天前
TVbox 手机、智能电视节目一网打尽
apk·直播·点播
黄金右肾1 个月前
Qt之FFmpeg播放器设计(十七)
qt·ffmpeg·播放器
黄金右肾1 个月前
Qt之简易音视频播放器设计(十五)
qt·播放器·qmediaplayer
却道天凉_好个秋1 个月前
音视频学习(二十四):hls协议
音视频·hls
音视频牛哥2 个月前
[2015~2024]SmartMediaKit音视频直播技术演进之路
音视频开发·视频编码·直播
音视频牛哥2 个月前
Windows平台Unity3D下RTMP播放器低延迟设计探讨
音视频开发·视频编码·直播
音视频牛哥2 个月前
Windows平台Unity3D下如何低延迟低资源占用播放RTMP或RTSP流?
音视频开发·视频编码·直播
音视频牛哥2 个月前
Android平台GB28181设备接入模块动态文字图片水印技术探究
音视频开发·视频编码·直播