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

news2024/11/15 6:44:56

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或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);
    }

设置清晰度视频源

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

在这里插入图片描述


@漏刻有时

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1229352.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【cpolar】搭建我的世界Java版服务器,公网远程联机

&#x1f3a5; 个人主页&#xff1a;深鱼~&#x1f525;收录专栏&#xff1a;cpolar&#x1f304;欢迎 &#x1f44d;点赞✍评论⭐收藏 目录 前言&#xff1a; 1. 搭建我的世界服务器 1.1 服务器安装java环境 1.2 配置服务端 2. 测试局域网联机 3. 公网远程联机 3.1 安…

【Java程序员面试专栏 专业技能篇】Java SE核心面试指引(一):基础知识考察

关于Java SE部分的核心知识进行一网打尽,包括四部分:基础知识考察、面向对象思想、核心机制策略、Java新特性,通过一篇文章串联面试重点,并且帮助加强日常基础知识的理解,全局思维导图如下所示 本篇Blog为第一部分:基础知识考察,子节点表示追问或同级提问 基本概念 …

数据仓库高级面试题

数仓高内聚低耦合是怎么做的 定义 高内聚&#xff1a;强调模块内部的相对独立性&#xff0c;要求模块内部的元素尽可能的完成一个功能&#xff0c;不混杂其他功能&#xff0c;从而使模块保持简洁&#xff0c;易于理解和管理。 低耦合&#xff1a;模块之间的耦合度要尽可能的…

壹基金为爱同行走进绿水青山,为乡村儿童送去健康水

壹基金为爱同行公益践行活动发起于2013年,截至2022年底,累计有63,319名线下参与队员,走过了8个城市。2023年,为爱同行的“壹家人”再次出发,走进“绿水青山就是金山银山”理念诞生地——浙江安吉余村,徒步18公里,为乡村儿童喝上足量、干净的饮用水筹集善款。本次活动获得了当地…

CorelDraw2024(CDR)- 矢量图制作软件介绍

在当今数字化时代&#xff0c;平面设计已成为营销、品牌推广和创意表达中不可或缺的元素。平面设计必备三大软件Adebo PhotoShop、CorelDraw、Adobe illustrator, 今天小编就详细介绍其中之一的CorelDraw软件。为什么这款软件在设计界赢得了声誉&#xff0c;并成为了设计师的无…

深度学习之基于YoloV5-Pose的人体姿态检测可视化系统

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 文章目录 一项目简介 深度学习之基于 YOLOv5-Pose 的人体姿态检测可视化系统介绍YOLOv5-Pose 简介系统特点系统架构使用方法 二、功能三、系统四. 总结 一项目简介 深度学习之基…

大白话解释什么类加载机制

大家好&#xff0c;我是伍六七。 今天我们来聊聊一个 Java 面试必考基础题目&#xff1a;类加载机制和双亲委派机制。 Java 类的加载机制是 Java 虚拟机&#xff08;JVM&#xff09;中类加载&#xff08;Class Loading&#xff09;和链接&#xff08;Linking&#xff09;的过…

大学生如何免费认证,下载,安装MATLAB

下载 打开学校图书馆官网 选择版本后&#xff0c;点击下载 注册绑定个人认证 前提&#xff01;需要有学校邮箱【以edu.cn结尾的】 进入mathworks官网 注册账户 安装 下载完后&#xff0c;打开 选择&#xff1a;setup 安装程序 勾选&#xff1a;是&#xff1b;选择&#xf…

【汇编】数据在哪里?有多长、div指令实现除法、dup设置内存空间

文章目录 前言一、汇编语言中数据位置的表达1.1 汇编中有哪几种数1.立即数&#xff08;idata&#xff09;&#xff1a;2.寄存器&#xff08;Register&#xff09;&#xff1a;3.内存&#xff08;Memory&#xff09;&#xff1a;4.段地址&#xff08;Segment Address&#xff0c…

卫生纸标准及鉴别

一、标准分类及含义 &#xff08;1&#xff09;标准分类 ①GB——国家强制标准&#xff08;即最低标准&#xff09; ②GB/T——国家推荐标准 ③QB——轻工行业标准 ④QB/T——轻工行业推荐标准 &#xff08;2&#xff09;含义 ①国家标准是指国家标准化主管机构批准发布的。…

RT-DETR优化改进:SEAM、MultiSEAM分割物与物相互遮挡、分割小目标性能

🚀🚀🚀本文改进:SEAM、MultiSEAM分割物体与物体相互遮挡性能 🚀🚀🚀SEAM、MultiSEAM分割物与物相互遮挡、分割小目标性能 🚀🚀🚀RT-DETR改进创新专栏:http://t.csdnimg.cn/vuQTz 学姐带你学习YOLOv8,从入门到创新,轻轻松松搞定科研; RT-DETR模型创新…

[和ChatGPT学编程]Python Requests 简介

requests 是一个流行的 Python 库&#xff0c;用于发送 HTTP 请求。它提供了简洁而友好的 API&#xff0c;使得发送 HTTP 请求变得简单而直观。requests 具有许多强大的功能&#xff0c;适用于各种 HTTP 请求场景&#xff0c;包括 GET、POST、PUT、DELETE 等。 目录 requests 库…

Tomcat 启动 HTTP状态 404 - 未找到

Tomcat 启动 HTTP状态 404 - 未找到 tomcat启动的项目访问地址实际是根据应用程序上下文的目录来决定的&#xff0c;而不是服务器那边配置的URL的地址来决定的

nginx学习(3)Nginx 负载均衡

Nginx 负载均衡 实战案例 实现效果 浏览器地址栏输入地址 http://172.31.0.99/oa/a.html&#xff0c;负载均衡效果&#xff0c;平均在 8083 和 8084 端口中&#xff0c;刷新浏览器&#xff0c;显示不同 一、配置 1、先创建2个文件夹tomcat8083和tomcat8084&#xff0c;并将…

JSP 四大域对象

我们来说说JSP的四大域对象 首先 我们要了解他们是四种保存范围 第一种 是 Page范围 只作用于当前界面 只要页面跳转了 其他页面就拿不到了 第二种 request范围 在一次请求中有效 就是 我们服务端指向某个界面 并传递数据给他 那么 如果你是客户端跳转就不生效了 第三种 sessi…

internet download manager2024中文绿色版(IDM下载器)

在现代互联网时代&#xff0c;文件下载已经成为我们日常生活中必不可少的一项技能。无论是下载软件、音乐、视频还是其他文件&#xff0c;一个高效的下载方法能够为我们节省时间和精力。本文将为您提供一份简明扼要的下载教程&#xff0c;让您轻松掌握文件下载的技巧。 intern…

2021年3月青少年软件编程(Python)等级考试试卷(一级)

2021年3月青少年软件编程&#xff08;Python&#xff09;等级考试试卷&#xff08;一级&#xff09; 分数&#xff1a;100.00 题数&#xff1a;37一、单选题&#xff08;共25题&#xff0c;每题2分&#xff0c;共50分&#xff09;二、判断题&#xff08;共10题&#xff0c;每题…

vue2通信方法(最全)

前言 数据传递是框架的核心要素之一,也是在业务开发中极其重要的技术.熟练掌握所有的通信方法,是开发者必须具备的技能。 这篇文章我将会把vue2所有的通信的方法都形成简单易懂的demo。 在我的分类中,通信方法有两种大类型: 1.vue框架提供的通信方法 2.插件及其他通信方法…

指针学习(五)

一.函数指针数组 定义&#xff1a;函数指针放进数组中&#xff0c;就叫函数指针数组&#xff0c;准确的说&#xff0c;将一个函数的地址存到⼀个数组中 那这个数组就叫函数指针数组。 int (*pi[5])(int); 解读&#xff1a;pi先和[]结合&#xff0c;因此是数组&#xff0c;加i…

Leetcode—5.最长回文子串【中等】

2023每日刷题&#xff08;三十五&#xff09; Leetcode—5.最长回文子串 中心扩展法算法思想 可以使用一种叫作“中心扩展法”的算法。由回文的性质可以知道&#xff0c;回文一定有一个中心点&#xff0c;从中心点向左和向右所形成的字符序列是一样的&#xff0c;并且如果字符…