vue项目视频播放ckplayer使用

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,“.”或“”代表容器的classvideo: 'http:视频地址.mp4'//视频地址};var player = new ckplayer();//初始化播放器player.add(videoObject);//}player.play(function () {document.getElementById('state').innerHTML = '监听到播放';});}

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

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

护眼台灯哪个牌子最好,护眼台灯五大品牌墙裂分享

近视在儿童中愈发普遍&#xff0c;许多家长开始认识到&#xff0c;除了学业成绩之外&#xff0c;孩子的视力健康同样重要。毕竟&#xff0c;学业的落后可以逐渐弥补&#xff0c;而一旦孩子近视&#xff0c;眼镜便可能成为长期伴随。因此&#xff0c;专业的护眼台灯对于每个家庭…

【zlm】音视频流与音频流合并的设计

目录 设想一 设想二 方案三 关键技术 测试语句 测试脚本 参考文档 设想一 //开始录制_option.mp4_save_path custom_path;_option.mp4_max_second max_second;vector<Track::Ptr> mytracks getTracks();auto src MediaSource::find( DEFAULT_VHOST, "1&quo…

今天起,ChatGPT无需注册就能用了!

就在刚刚&#xff0c;OpenAI狠狠地open了一把&#xff1a; 从今天起&#xff0c;ChatGPT打开即用&#xff0c;无需再注册帐号和登录了&#xff01; 像这样&#xff0c;直接登录网站&#xff0c;然后就可以开启对话&#xff1a; OpenAI对发布这个“超自由版ChatGPT”的解释是&am…

将 EDI 从 VAN 迁移到知行之桥:EDI 成本降低 90%

G公司帮助零售商在网上和实体店取得成功&#xff0c;是来自300家顶级制造商网络中包含狩猎&#xff0c;钓鱼&#xff0c;露营和体育用品等45,000 多种商品的批发分销商。 通过可靠的客户服务、良好的定价和超越标准大卖场产品的库存量&#xff0c;G公司的重点是为零售商、电子…

JavaScript邂逅

文章目录 Javascript内容邂逅JavaScript前端的三大核心计算机语言认识编程语言常见的编程语言编程语言的发展历史–机器语言阶段一: 机器语言 编程语言的发展历史–汇编语言阶段二:汇编语言 汇编语言的发展历史–高级语言阶段三:高级语言 机器语言和高级语言 认识JavaScriptJav…

Vmware虚拟机远程SSH连接失效解决方法及分析过程

问题描述 系统为CentOS7 64位 一向能够正常连接 在某次使用FinalShell进行远程SSH连接时 突然无法连接 对问题原因猜测及尝试 1.dns解析失效 发现显示DNS无法解析,可以得知是使用了主机名登录,而主机名无法登录. 遂查看host文件.host文件因不知名原因被清空,重新恢复后该问…

初识编译和链接(C语言)

文章目录 编译和链接翻译环境预处理编译汇编链接 运行环境 编译和链接 编译和链接这两个大的过程构成了翻译环境。 其实&#xff0c;在ANSI C的任何一种实现中&#xff0c;存在两个不同的环境。 一个环境是翻译环境&#xff0c;另一个是执行环境。 翻译环境中&#xff0c;源…

STM32之HAL开发——不同系列SPI功能对比(附STM32Cube配置)

不同系列STM32——SPI框图 F1系列框图 F4系列框图 TI模式时序图特性 F7系列框图 H7系列框图 注意&#xff1a;F7系列以及H7系列支持Quad-SPI模式&#xff0c;可以连接单&#xff0c;双或者四条数据线的Flash存储介质。 SPI——Cube配置流程 RCC时钟源配置 SYS系统调试模式配…

Linux:运营商在网络中扮演的角色

文章目录 ip目前的问题ip目前的几种解决方案私有ipVS公有ip运营商再谈ip划分运营商的角度看ip 本篇总结的是运营商在网络中扮演的角色 ip目前的问题 在目前看来&#xff0c;ip最大的问题是ip号不够用了&#xff0c;那这个问题如何解决呢&#xff1f; 在之前的内容中有子网掩…

CTK插件框架学习-事件监听(04)

CTK插件框架学习-插件注册调用(03)https://mp.csdn.net/mp_blog/creation/editor/136989802 一、主要流程 发送者注册消息事件接收者订阅消息事件接收者相应消息事件 事件监听比插件接口调用耦合性更弱&#xff0c;事件由框架维护&#xff0c;不需要指定发送方和接收方 二、…

提升工作效率:B端工作台设计基础详解

随着互联网和信息技术的快速发展&#xff0c;越来越多的企业开始以数字化、智能化的方式管理和运营自己的业务。B端工作台设计作为企业应用的重要组成部分&#xff0c;越来越受到重视。本文将从三个方面对B端工作台设计进行全面分析。让我们看看。 1. B端工作台设计原则 B端工…

Vulnhub:BROKEN: GALLERY

目录 信息收集 1、arp 2、nmap 3、nikto 4、whatweb WEB wen信息收集 目录扫描 进制转换 ssh登录 提权 信息收集 1、arp ┌──(root㉿ru)-[~/kali/vulnhub] └─# arp-scan -l Interface: eth0, type: EN10MB, M…