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浏览器预览视频时,即便设置了自动播放,也需要点击播放按钮。

@漏刻有时

相关推荐
眠りたいです12 小时前
基于脚手架微服务的视频点播系统-播放控制部分
c++·qt·ui·微服务·云原生·架构·播放器
AKAMAI5 天前
部署在用户身边,将直播延迟压缩至毫秒级
人工智能·云计算·直播
音视频牛哥7 天前
RTSP流端口占用详解:TCP模式与UDP模式的对比
音视频开发·视频编码·直播
遥感-GIS16 天前
遥感时序分析的基石:深度剖析Harmonized Landsat Sentinel-2 (HLS) 数据集的诞生、原理、特点与应用
机器学习·时序分析·hls·数据融合·landsat·sentinel-2
音视频牛哥16 天前
RTSP/RTMP vs WebRTC:实时视频技术选型的务实之路
音视频开发·视频编码·直播
音视频牛哥16 天前
跨平台 RTSP/RTMP 播放器工程化实践:低延迟与高稳定性的挑战与突破
音视频开发·视频编码·直播
音视频牛哥21 天前
从 H.264/H.265 到 H.266:RTSP播放器的跨代际演进
音视频开发·视频编码·直播
阿赵3D22 天前
Unity引擎播放HLS自适应码率流媒体视频
unity·游戏引擎·音视频·流媒体·hls
音视频牛哥1 个月前
跨平台轻量级RTSP服务模块技术详解与内网低延迟直播实践
音视频开发·视频编码·直播
aqi001 个月前
FFmpeg开发笔记(八十)使用百变魔音AiSound实现变声特效
android·ffmpeg·音视频·直播·流媒体