ckplayer自己定义风格播放器的开发记录
CKplayer是一款基于Flash和HTML5技术的开源视频播放器,支持多种格式的音视频播放,并且具有优秀的兼容性和扩展性。
它不仅可以在网页上播放本地或者网络上的视频,还可以通过代码嵌入到网页中,实现更加个性化的播放效果。CKplayer全称为超酷flv播放器,它是一款用于网页上播放视频的软件,支持的格式有:http协议上的flv,f4v,mp4格式,同时支持rtmp视频流格式播放。
此播放器的特点在于用户可以自己定义播放器的风格,诸如播放/暂停按钮,静音按钮,全屏按钮都是以外部图片接口形式调用,用户根据自己的需要制作出播放器风格所需要使用的各个按钮图片然后替换掉原始风格里相应的图片就可以制作出自己的风格了。

引入外部库
<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容器
<div class="video" style="width: 100vw;height: 100vh;"></div>
ckplayer封装函数
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播放兼容性
- HLS(HTTP Live
streaming),是基于HTTP的流媒体传输协议,由apple公司所提出的一种由于传输音视频的协议交互方式,当前HLS被广泛应用于视频点直播领域。
HLS采用HTTP协议传输音视频数据,HLS通过将音视频流切割成一个个小的TS切片及生成m3u8的播放列表文件,播放客户端通过HTTP协议下载播放列表文件,按照播放列表文件制定的顺序下载切片文件并播放,从而实现便下载边播放 - HLS协议下,苹果设备可以直接播放.m3u8的视频,但是其他浏览器不能直接播放;
- 使用ckplayer开发播放器后,苹果设备和手机端,无法直接播放;
- 在chrome浏览器预览视频时,即便设置了自动播放,也需要点击播放按钮。

@漏刻有时
相关文章:
ckplayer自己定义风格播放器的开发记录
CKplayer是一款基于Flash和HTML5技术的开源视频播放器,支持多种格式的音视频播放,并且具有优秀的兼容性和扩展性。 它不仅可以在网页上播放本地或者网络上的视频,还可以通过代码嵌入到网页中,实现更加个性化的播放效果。CKplayer…...
全网最全Django面试题整理(一)
Django 中的 MTV 是什么意思? 在Django中,MTV指的是“Model-Template-View”,而不是常见的MVC(Model-View-Controller)架构。Django的设计理念是基于MTV的 Model(模型) 模型代表数据存取层&am…...
vue统一登录
说明: 统一登录其实就是前端去判断Url地址的token 之后如果有token未过期就直接跳转到首页。 说到浏览器输入url地址,那从浏览器输入地址一共发生了几件事大致如下: DNS解析域名,获取IP地址 --》 建立TCP连接(三次握…...
MVSNet论文笔记
MVSNet论文笔记 摘要1 引言2 相关基础2.1 多视图立体视觉重建(MVS Reconstruction)2.2 基于学习的立体视觉(Learned Stereo)2.3 基于学习的多视图的立体视觉(Learned MVS) 3 MVSNet3.1 网络架构3.2 提取图片…...
大型 APP 的性能优化思路
做客户端开发都基本都做过性能优化,比如提升自己所负责的业务的速度或流畅性,优化内存占用等等。但是大部分开发者所做的性能优化可能都是针对中小型 APP 的,大型 APP 的性能优化经验并不会太多,毕竟大型 APP 就只有那么几个&…...
K8S配置资源管理
这里写目录标题 K8S配置资源管理一.Secret1.介绍2.Secret 有四种类型3.创建 Secret4.使用方式 二.ConfigMap1.介绍2.创建 ConfigMap3.Pod 中使用 ConfigMap4.用 ConfigMap 设置命令行参数5.通过数据卷插件使用ConfigMap6.ConfigMap 的热更新7.ConfigMap 更新后滚动更新 Pod K8S…...
Redis 的集群模式实现高可用
来源:Redis高可用:武林秘籍存在集群里,那稳了~ (qq.com) 1. 引言 前面我们已经聊过 Redis 的主从同步(复制)和哨兵机制,这期我们来聊 Redis 的集群模式。 但是在超大规模的互联网应用中,业务规…...
21、嵌套路由实战操作
1、创建内嵌子路由,你需要添加一个vue文件,同时添加一个与该文件同名的目录用来存放子视图组件。 2、在父组件(.vue)内增加用于显示子视图内容 新建文件 pages\index_id.vue 生成的对应路由 {path: "/",component: _…...
WPF 控件的缩放和移动
WPF 控件的缩放和移动 1.页面代码 <ContentControl ClipToBounds"True" Cursor"SizeAll"><Viewboxx:Name"viewbox"MouseDown"viewbox_MouseDown"MouseMove"viewbox_MouseMove"MouseWheel"Viewbox_MouseWhee…...
Python and和or的优先级实例比较
Python and和or的优先级 and和or都是Python的逻辑运算符,都为保留字。通常情况下,在没有括号影响,and和or的优先级中and在代码的逻辑运算过程中会相对优先一些,及在同一行的Python代码中,and会优先与or执行。下面将通…...
数据结构与算法编程题2
逆置线性表,使空间复杂度为 O(1) #include <iostream> using namespace std;typedef int ElemType; #define Maxsize 100 #define OK 1 #define ERROR 0 typedef struct SqList {ElemType data[Maxsize];int length; }SqList;void Init_SqList(SqList& …...
Java开发者的Python快速进修指南:控制之if-else和循环技巧
简单介绍 在我们今天的学习中,让我们简要了解一下Python的控制流程。考虑到我们作为有着丰富Java开发经验的程序员,我们将跳过一些基础概念,如变量和数据类型。如果遇到不熟悉的内容,可以随时查阅文档。但在编写程序或逻辑时&…...
二进制部署k8s集群-过程中的问题总结(接上篇的部署)
1、kube-apiserver部署过程中的问题 kube-apiserver.conf配置文件更改 2、calico的下载地址 curl https://docs.projectcalico.org/v3.20/manifests/calico.yaml -O 这里如果kubernetes的节点服务器为多网卡配置会产生报错 修改calino.yaml配置文件 解决方法: 调…...
IOS 关于CoreText的笔记
放大 一.CoreText计算attributeString显示所占区域 百度搜索有三种方法: 1.方法 - (CGRect)boundingRectWithSize:(CGSize)size options:(NSStringDrawingOptions)options context:(nullable NSStringDrawingContext *)context 2.使用CTFrameRef 的 CTFrameGetLin…...
基础课6——开放领域对话系统架构
开放领域对话系统是指针对非特定领域或行业的对话系统,它可以与用户进行自由的对话,不受特定领域或行业的知识和规则的限制。开放领域对话系统需要具备更广泛的语言理解和生成能力,以便与用户进行自然、流畅的对话。 与垂直领域对话系统相比…...
Hive常见的面试题(十二道)
Hive 1. Hive SQL 的执行流程 ⾸先客户端通过shell或者Beeline等⽅式向Hive提交SQL语句,之后sql在driver中经过 解析器(SQL Parser):将 SQL 字符串转换成抽象语法树 AST,这一步一般都用第三方工具库完成,比如 ANTLR&…...
1688商品详情API跨境专用接口php java
一、引言 随着全球电子商务的快速发展,跨境电子商务已经成为一种重要的国际贸易形式。1688作为全球最大的B2B电子商务平台之一,不仅拥有大量的商品资源,还为商家提供了丰富的API接口,以实现更高效、更便捷的电子商务活动。其中&a…...
h264流播放
参考文章: Android MediaCodec硬解码H264文件-CSDN博客...
02-1解析xpath
我是在edge浏览器中安装的xpath,需要安装的朋友可以参考下面这篇博客最新版edge浏览器中安装xpath插件 一、xpathd的使用 安装lxml pip install lxml ‐i https://pypi.douban.com/simple导入lxml.etree from lxml import etreeetree.parse() 解析本地文件 htm…...
Python算法——树的镜像
Python中的树的镜像算法详解 树的镜像是指将树的每个节点的左右子树交换,得到一棵新的树。在本文中,我们将深入讨论如何实现树的镜像算法,提供Python代码实现,并详细说明算法的原理和步骤。 树的镜像算法 树的镜像可以通过递归…...
Ubuntu下Minicom与Kermit串口工具对比:哪个更适合你的嵌入式开发?
Ubuntu下Minicom与Kermit串口工具深度评测:嵌入式开发者的终极选择指南 在嵌入式开发领域,串口通信如同开发者的"听诊器",是调试硬件、监控系统状态的核心工具。Ubuntu作为最受开发者欢迎的Linux发行版之一,其生态中Mi…...
ThingsBoard生产环境部署选型指南:安装包 vs 源码,内存队列 vs RabbitMQ,如何根据项目规模做选择?
ThingsBoard生产环境部署架构选型实战指南 当技术团队准备将ThingsBoard投入实际生产环境时,面临的第一个关键决策往往不是"如何安装",而是"以什么架构安装"。这个选择将直接影响未来三年的系统稳定性、扩展性和运维成本。作为经历过…...
FastAPI CSP:实现配置的终极指南
FastAPI CSP:实现配置的终极指南 【免费下载链接】fastapi FastAPI framework, high performance, easy to learn, fast to code, ready for production 项目地址: https://gitcode.com/GitHub_Trending/fa/fastapi FastAPI是一个高性能、易于学习、快速编码…...
Hotkey Detective:3步快速解决Windows热键冲突,找出占用快捷键的幕后黑手
Hotkey Detective:3步快速解决Windows热键冲突,找出占用快捷键的幕后黑手 【免费下载链接】hotkey-detective A small program for investigating stolen key combinations under Windows 7 and later. 项目地址: https://gitcode.com/gh_mirrors/ho/h…...
智能票务自动化工具:提升大型活动门票获取效率的全流程解决方案
智能票务自动化工具:提升大型活动门票获取效率的全流程解决方案 【免费下载链接】Automatic_ticket_purchase 大麦网抢票脚本 项目地址: https://gitcode.com/GitHub_Trending/au/Automatic_ticket_purchase 在数字化时代,大型展会、体育赛事等热…...
通义千问1.5-1.8B-Chat-GPTQ-Int4实战:微信小程序集成AI对话功能开发指南
通义千问1.5-1.8B-Chat-GPTQ-Int4实战:微信小程序集成AI对话功能开发指南 最近在做一个宠物社区的小程序,想加个智能客服功能,让用户能随时问问养宠问题。一开始觉得这事儿挺复杂,得自己搞个大模型服务器,成本高不说&…...
基于计算机视觉的AI头像质量评估系统
基于计算机视觉的AI头像质量评估系统 1. 引言 在数字社交时代,头像已经成为个人形象的重要代表。无论是社交平台、专业网站还是在线会议,一个高质量的头像都能显著提升个人形象和可信度。然而,如何快速评估头像的质量一直是个难题——什么样…...
轻量化之路:使用模型剪枝与量化技术压缩卡证检测模型
轻量化之路:使用模型剪枝与量化技术压缩卡证检测模型 1. 引言 你有没有遇到过这样的场景?想把一个识别身份证、银行卡的AI模型塞进手机App里,或者部署到一台小小的工控机上,结果发现模型动辄几百兆,跑起来慢吞吞&…...
Qwen2.5-7B入门实战:从Docker到网页服务的全流程解析
Qwen2.5-7B入门实战:从Docker到网页服务的全流程解析 1. 引言:为什么选择Qwen2.5-7B Qwen2.5-7B是阿里最新开源的大语言模型,相比前代版本在知识量、编程能力和数学能力上有显著提升。对于想要快速体验大模型能力的开发者来说,通…...
突破三维建模效率瓶颈:Blender对齐工具重新定义精准操作流程
突破三维建模效率瓶颈:Blender对齐工具重新定义精准操作流程 【免费下载链接】quicksnap Blender addon to quickly snap objects/vertices/points to object origins/vertices/points 项目地址: https://gitcode.com/gh_mirrors/qu/quicksnap 在复杂的三维建…...
