当前位置: 首页 > news >正文

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技术的开源视频播放器&#xff0c;支持多种格式的音视频播放&#xff0c;并且具有优秀的兼容性和扩展性。 它不仅可以在网页上播放本地或者网络上的视频&#xff0c;还可以通过代码嵌入到网页中&#xff0c;实现更加个性化的播放效果。CKplayer…...

全网最全Django面试题整理(一)

Django 中的 MTV 是什么意思&#xff1f; 在Django中&#xff0c;MTV指的是“Model-Template-View”&#xff0c;而不是常见的MVC&#xff08;Model-View-Controller&#xff09;架构。Django的设计理念是基于MTV的 Model&#xff08;模型&#xff09; 模型代表数据存取层&am…...

vue统一登录

说明&#xff1a; 统一登录其实就是前端去判断Url地址的token 之后如果有token未过期就直接跳转到首页。 说到浏览器输入url地址&#xff0c;那从浏览器输入地址一共发生了几件事大致如下&#xff1a; DNS解析域名&#xff0c;获取IP地址 --》 建立TCP连接&#xff08;三次握…...

MVSNet论文笔记

MVSNet论文笔记 摘要1 引言2 相关基础2.1 多视图立体视觉重建&#xff08;MVS Reconstruction&#xff09;2.2 基于学习的立体视觉&#xff08;Learned Stereo&#xff09;2.3 基于学习的多视图的立体视觉&#xff08;Learned MVS&#xff09; 3 MVSNet3.1 网络架构3.2 提取图片…...

大型 APP 的性能优化思路

做客户端开发都基本都做过性能优化&#xff0c;比如提升自己所负责的业务的速度或流畅性&#xff0c;优化内存占用等等。但是大部分开发者所做的性能优化可能都是针对中小型 APP 的&#xff0c;大型 APP 的性能优化经验并不会太多&#xff0c;毕竟大型 APP 就只有那么几个&…...

K8S配置资源管理

这里写目录标题 K8S配置资源管理一.Secret1.介绍2.Secret 有四种类型3.创建 Secret4.使用方式 二.ConfigMap1.介绍2.创建 ConfigMap3.Pod 中使用 ConfigMap4.用 ConfigMap 设置命令行参数5.通过数据卷插件使用ConfigMap6.ConfigMap 的热更新7.ConfigMap 更新后滚动更新 Pod K8S…...

Redis 的集群模式实现高可用

来源&#xff1a;Redis高可用&#xff1a;武林秘籍存在集群里&#xff0c;那稳了~ (qq.com) 1. 引言 前面我们已经聊过 Redis 的主从同步&#xff08;复制&#xff09;和哨兵机制&#xff0c;这期我们来聊 Redis 的集群模式。 但是在超大规模的互联网应用中&#xff0c;业务规…...

21、嵌套路由实战操作

1、创建内嵌子路由&#xff0c;你需要添加一个vue文件&#xff0c;同时添加一个与该文件同名的目录用来存放子视图组件。 2、在父组件&#xff08;.vue&#xff09;内增加用于显示子视图内容 新建文件 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的逻辑运算符&#xff0c;都为保留字。通常情况下&#xff0c;在没有括号影响&#xff0c;and和or的优先级中and在代码的逻辑运算过程中会相对优先一些&#xff0c;及在同一行的Python代码中&#xff0c;and会优先与or执行。下面将通…...

数据结构与算法编程题2

逆置线性表&#xff0c;使空间复杂度为 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和循环技巧

简单介绍 在我们今天的学习中&#xff0c;让我们简要了解一下Python的控制流程。考虑到我们作为有着丰富Java开发经验的程序员&#xff0c;我们将跳过一些基础概念&#xff0c;如变量和数据类型。如果遇到不熟悉的内容&#xff0c;可以随时查阅文档。但在编写程序或逻辑时&…...

二进制部署k8s集群-过程中的问题总结(接上篇的部署)

1、kube-apiserver部署过程中的问题 kube-apiserver.conf配置文件更改 2、calico的下载地址 curl https://docs.projectcalico.org/v3.20/manifests/calico.yaml -O 这里如果kubernetes的节点服务器为多网卡配置会产生报错 修改calino.yaml配置文件 解决方法&#xff1a; 调…...

IOS 关于CoreText的笔记

放大 一.CoreText计算attributeString显示所占区域 百度搜索有三种方法&#xff1a; 1.方法 - (CGRect)boundingRectWithSize:(CGSize)size options:(NSStringDrawingOptions)options context:(nullable NSStringDrawingContext *)context 2.使用CTFrameRef 的 CTFrameGetLin…...

基础课6——开放领域对话系统架构

开放领域对话系统是指针对非特定领域或行业的对话系统&#xff0c;它可以与用户进行自由的对话&#xff0c;不受特定领域或行业的知识和规则的限制。开放领域对话系统需要具备更广泛的语言理解和生成能力&#xff0c;以便与用户进行自然、流畅的对话。 与垂直领域对话系统相比…...

Hive常见的面试题(十二道)

Hive 1. Hive SQL 的执行流程 ⾸先客户端通过shell或者Beeline等⽅式向Hive提交SQL语句,之后sql在driver中经过 解析器&#xff08;SQL Parser&#xff09;&#xff1a;将 SQL 字符串转换成抽象语法树 AST&#xff0c;这一步一般都用第三方工具库完成&#xff0c;比如 ANTLR&…...

1688商品详情API跨境专用接口php java

一、引言 随着全球电子商务的快速发展&#xff0c;跨境电子商务已经成为一种重要的国际贸易形式。1688作为全球最大的B2B电子商务平台之一&#xff0c;不仅拥有大量的商品资源&#xff0c;还为商家提供了丰富的API接口&#xff0c;以实现更高效、更便捷的电子商务活动。其中&a…...

h264流播放

参考文章&#xff1a; Android MediaCodec硬解码H264文件-CSDN博客...

02-1解析xpath

我是在edge浏览器中安装的xpath&#xff0c;需要安装的朋友可以参考下面这篇博客最新版edge浏览器中安装xpath插件 一、xpathd的使用 安装lxml pip install lxml ‐i https://pypi.douban.com/simple导入lxml.etree from lxml import etreeetree.parse() 解析本地文件 htm…...

Python算法——树的镜像

Python中的树的镜像算法详解 树的镜像是指将树的每个节点的左右子树交换&#xff0c;得到一棵新的树。在本文中&#xff0c;我们将深入讨论如何实现树的镜像算法&#xff0c;提供Python代码实现&#xff0c;并详细说明算法的原理和步骤。 树的镜像算法 树的镜像可以通过递归…...

电子设计竞赛必备:RC、运放、TTL信号处理电路实战指南(附避坑技巧)

电子设计竞赛信号处理电路实战&#xff1a;从RC滤波到TTL脉冲的进阶技巧 第一次参加电子设计竞赛时&#xff0c;我在信号处理环节浪费了整整两天时间——原本清晰的方波经过电路后变得面目全非&#xff0c;放大后的信号带着令人头疼的振荡&#xff0c;而评委要求的脉冲宽度总是…...

LosslessCut:解锁无损视频编辑的5个专业技巧

LosslessCut&#xff1a;解锁无损视频编辑的5个专业技巧 【免费下载链接】lossless-cut The swiss army knife of lossless video/audio editing 项目地址: https://gitcode.com/gh_mirrors/lo/lossless-cut 在数字内容创作领域&#xff0c;视频质量与处理效率往往难以兼…...

Wan2.2-I2V-A14B开源大模型部署:PyTorch 2.4+CUDA 12.4兼容性验证

Wan2.2-I2V-A14B开源大模型部署&#xff1a;PyTorch 2.4CUDA 12.4兼容性验证 1. 镜像概述与核心价值 Wan2.2-I2V-A14B是一款专注于文本到视频生成的开源大模型&#xff0c;其私有部署镜像经过深度优化&#xff0c;能够充分发挥RTX 4090D显卡的性能优势。这个镜像最大的特点在…...

深入浅出MIPI D-PHY:对比HS高速模式与LP低功耗模式,揭秘手机摄像头省电又流畅的底层原理

解密MIPI D-PHY&#xff1a;手机摄像头如何实现高速与低功耗的完美平衡 当你用手机拍摄4K视频时&#xff0c;是否想过为什么画面如此流畅&#xff0c;而电量消耗却相对可控&#xff1f;这背后隐藏着一项关键技术——MIPI D-PHY物理层协议。作为现代移动设备图像传输的核心通道&…...

BGE-Large-Zh前沿探索:量子计算语义编码实验

BGE-Large-Zh前沿探索&#xff1a;量子计算语义编码实验 引言 量子计算正在重新定义计算的边界&#xff0c;而自然语言处理作为人工智能的核心领域&#xff0c;也迎来了与量子技术融合的历史性机遇。我们进行了一项创新实验&#xff1a;将BGE-Large-Zh这一强大的语义编码模型…...

ED-最优设计实战:如何用Python实现鲁棒实验设计(附完整代码)

ED-最优设计实战&#xff1a;如何用Python实现鲁棒实验设计&#xff08;附完整代码&#xff09; 在数据科学和工程领域&#xff0c;实验设计是优化参数估计和模型性能的关键环节。传统D-最优设计虽然经典&#xff0c;但在面对参数不确定性时往往表现不佳。本文将带你深入理解ED…...

掌握LSLib:解锁《神界原罪》与《博德之门3》MOD制作的神器

掌握LSLib&#xff1a;解锁《神界原罪》与《博德之门3》MOD制作的神器 【免费下载链接】lslib Tools for manipulating Divinity Original Sin and Baldurs Gate 3 files 项目地址: https://gitcode.com/gh_mirrors/ls/lslib LSLib是一个功能强大的开源工具集&#xff0…...

Pixel Epic动态卷轴效果展示:从空白屏幕到完整研报的实时生成录屏

Pixel Epic动态卷轴效果展示&#xff1a;从空白屏幕到完整研报的实时生成录屏 1. 引言&#xff1a;当科研遇上像素冒险 在传统的研究报告撰写过程中&#xff0c;我们常常面对冰冷的界面和机械化的交互体验。Pixel Epic彻底改变了这一现状&#xff0c;将严肃的学术研究变成了一…...

大麦网自动购票工具:技术原理与多场景应用指南

大麦网自动购票工具&#xff1a;技术原理与多场景应用指南 【免费下载链接】Automatic_ticket_purchase 大麦网抢票脚本 项目地址: https://gitcode.com/GitHub_Trending/au/Automatic_ticket_purchase 在数字化票务时代&#xff0c;热门演出门票往往在开票瞬间售罄&…...

索尼A6000/A7相机APP免费安装保姆级教程(含最新pmca工具下载)

索尼A6000/A7相机APP免费安装全流程指南&#xff08;2024最新版&#xff09; 作为一名长期使用索尼微单的摄影师&#xff0c;我深刻理解官方应用商店里那些本应内置的功能被拆分成付费APP的无奈。延时摄影、多重曝光这些基础功能&#xff0c;在二代机型上居然要额外付费解锁&am…...