vue项目视频播放ckplayer使用

news2024/11/25 5:17:52

ckplayer 官方网址,点击访问

1,打开网页后能看到这里,我现在使用的是最新 X3版手册

在这里插入图片描述

2,这个ckplayer不是npm 插件,要下载安装包解压到项目里面使用

安装包网址 通过gitee下载
在这里插入图片描述

3,解析安装包到项目中 public文件夹下面,在index.html下引入

在这里插入图片描述
在这里插入图片描述

4,在项目中使用

<template>
    <div class="video-container">
      <div class="video" style="width: 100%;height:100%;"></div>
      <p id="state"></p>
    </div>
  
  </template>

 mounted() {
      //定义一个变量:videoObject,用来做为视频初始化配置
      var videoObject = {
        container: '.video', //“#”代表容器的ID,“.”或“”代表容器的class
        video: 'http:视频地址.mp4'//视频地址
      };
      var player = new ckplayer();//初始化播放器
      player.add(videoObject);//
      }
      player.play(function () {
          document.getElementById('state').innerHTML = '监听到播放';
      });
    }

一个初始化的视频安装完毕

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

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

相关文章

leetcode 不同路径

62. 不同路径 问题描述 一个机器人位于一个 m x n 网格的左上角 &#xff08;起始点在下图中标记为 “Start” &#xff09;。 机器人每次只能向下或者向右移动一步。机器人试图达到网格的右下角&#xff08;在下图中标记为 “Finish” &#xff09;。 问总共有多少条不同的…

仿真黑科技EasyGo DeskSim 2022

DeskSim2022的FPGA支持多种solver的混合应用&#xff0c;对于每一种solver可以采用不同的仿真步长&#xff0c;以下图模型为例&#xff0c;模型运行在FPGA上&#xff0c;FPGA解算方式采用的是Power Electronic & FPGA Coder解算&#xff0c;其中电力电子电路部分采用了两种…

SD-WAN支持的多种线路类型

SD-WAN技术的崛起为企业网络带来了全新的可能性&#xff0c;尤其是在连接选项的多样性方面。通过SD-WAN方案&#xff0c;企业可以根据自身需求来选择最适合的连接类型&#xff0c;以实现性能优化和成本效益的平衡。下面&#xff0c;让我们深入了解SD-WAN所支持的各种线路类型。…

【御控物联】JavaScript JSON结构转换(12):对象To数组——键值互换属性重组

文章目录 一、JSON结构转换是什么&#xff1f;二、核心构件之转换映射三、案例之《JSON对象 To JSON数组》四、代码实现五、在线转换工具六、技术资料 一、JSON结构转换是什么&#xff1f; JSON结构转换指的是将一个JSON对象或JSON数组按照一定规则进行重组、筛选、映射或转换…

vue+elementUI实现表格组件的封装

效果图&#xff1a; 在父组件使用表格组件 <table-listref"table":stripe"true":loading"loading":set-table-h"slotProps.setMainCardBodyH":table-data"tableData":columns"columns.tableList || []":ra…

JAVAEE——多线程进阶,锁策略

文章目录 锁策略乐观锁和悲观锁乐观锁悲观锁两者的比较 读写锁重量级锁和轻量级锁重量级锁轻量级锁 自旋锁公平锁和非公平锁公平锁非公平锁 可重入锁和不可重入锁可重入锁不可重入锁 锁策略 乐观锁和悲观锁 乐观锁 什么是乐观锁呢&#xff1f;我们可以认为乐观锁比较自信&am…

MySQL 连接池的实现

池化技术 池化技术能够减少资源对象的创建次数&#xff0c;提高程序的响应性能&#xff0c;特别是在高并发下这种提高更明显。共同特征 对象创建时间长。对象创建需要大量资源。对象创建后可被重复使用。 数据库连接池 数据库连接池&#xff08;Connection pooling&#xff…

linux C:变量、运算符

linux C 文章目录 变量运算符 一、变量 [存储类型] 数据类型 标识符 值 标识符&#xff1a;由数字、字母、下划线组成的序列&#xff0c;不能以数字开头。 数据类型&#xff1a;基本数据类型构造类型 存储类型&#xff1a;auto static…

2.4_2 死锁的处理策略——预防死锁

2.4_2 死锁的处理策略——预防死锁 知识总览 #mermaid-svg-z0noPuUcH4CJsxb7 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-z0noPuUcH4CJsxb7 .error-icon{fill:#552222;}#mermaid-svg-z0noPuUcH4CJsxb7 .error-t…

【BlossomRPC】接入注册中心

文章目录 NacosZookeeper自研配置中心 RPC项目 配置中心项目 网关项目 这是BlossomRPC项目的最后一篇文章了&#xff0c;接入完毕注册中心&#xff0c;一个完整的RPC框架就设计完成了。 对于项目对注册中心的整合&#xff0c;其实我们只需要再服务启动的时候将ip/port/servic…

商城业务-检索服务

文章目录 前言一、搭建页面环境1.1 静态界面搭建1.2 Nginx 动静分离1.3 Windows 上传文件1.4 引入 thymeleaf 依赖1.5 Nginx 反向代理1.4 Nginx 配置1.5 gateway 网关配置 二、调整页面跳转2.1 引入依赖2.2 页面跳转 三、检索查询参数模型分析抽取3.1 检索业务分析3.2 检索语句…

齿轮“红宝书”

​在齿轮行业&#xff0c;有两本书被广大从业者尊称为“红宝书”。这两部作品深入剖析了齿轮技术的精髓&#xff0c;为从业者提供了宝贵的指导和启示。它们犹如行业的明灯&#xff0c;照亮了齿轮制造的每一个角落&#xff0c;使得从业者在探索中不再迷茫。 这两本红宝书的内容…

遥感动态监测技术

很多人对动态监测和动态检测两个名词有疑惑。我们可以这样理解&#xff0c;动态监测是一个广义的名词&#xff0c;泛指数据预处理、变化信息发现与提取、变化信息挖掘与应用等&#xff0c;以对整个流程的叙述。动态检测是一个狭义的名词&#xff0c;主要指部分数据预处理、变化…

【御控物联】JavaScript JSON结构转换(7):数组To数组——键值互换属性重组

文章目录 一、JSON结构转换是什么&#xff1f;二、案例之《JSON数组 To JSON数组》三、代码实现四、在线转换工具五、技术资料 一、JSON结构转换是什么&#xff1f; JSON结构转换指的是将一个JSON对象或JSON数组按照一定规则进行重组、筛选、映射或转换&#xff0c;生成新的JS…

前端(三)React踩坑记录

一、引言 作者最近新的平台项目是需要用react的&#xff0c;和vue区别还是比较大的&#xff0c;这里记录下踩坑和使用经验。 二、环境 框架&#xff1a;antd 依赖&#xff1a; "dependencies": {"ant-design/icons": "^4.7.0","ant-desig…

Linux使用Docker部署RStudio Server结合内网穿透实现公网访问本地服务

文章目录 前言1. 安装RStudio Server2. 本地访问3. Linux 安装cpolar4. 配置RStudio server公网访问地址5. 公网远程访问RStudio6. 固定RStudio公网地址 前言 RStudio Server 使你能够在 Linux 服务器上运行你所熟悉和喜爱的 RStudio IDE&#xff0c;并通过 Web 浏览器进行访问…

卷积层+多个输入通道

卷积层多输入输出通道 在深度学习中&#xff0c;卷积神经网络&#xff08;CNN&#xff09;通常用于处理具有多个输入通道的数据。当输入数据具有多个通道&#xff08;例如彩色图像的RGB通道&#xff09;时&#xff0c;卷积操作可以同时在每个通道上进行&#xff0c;并将各通道的…

【成功案例】间隔数月双团伙先后利用某ERP0day实施入侵和勒索的解密恢复项目

1.背景 在2024年3月23日&#xff0c;我们的Solar应急响应团队&#xff08;以下简称Solar团队&#xff09;应某公司之邀&#xff0c;介入处理了一起财务系统服务器遭受黑客攻击的事件。该事件导致服务器上大量文件被加密。我们的团队迅速获取了一个被加密的文件&#xff0c;并立…

面试题:MySQL 优化篇

定位慢查询 &#x1f496; 开源工具 调试工具&#xff1a;Arthas&#xff08;阿尔萨斯&#xff09;运维工具&#xff1a;Prometheus&#xff08;普罗米修斯&#xff09;、Skywalking &#x1f496; MySQL 慢查询日志 # 开启 MySQL 慢查询日志开关 slow_query_log1 # 设置慢…