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

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

ChatGPT会取代Salesforce顾问吗?

当ChatGPT问世时&#xff0c;许多Salesforce顾问很乐意使用该工具完成日常任务。然而&#xff0c;许多专业人士仍未使用过该工具或发现它的多种功能。Salesforce顾问负责处理复杂的项目、兼顾客户需求&#xff0c;并在不断发展的生态系统中通过各种云服务保持领先地位。因此&am…

【图论】【拓扑排序】1857. 有向图中最大颜色值

本文涉及的知识点 图论 拓扑排序 LeetCode1857. 有向图中最大颜色值 给你一个 有向图 &#xff0c;它含有 n 个节点和 m 条边。节点编号从 0 到 n - 1 。 给你一个字符串 colors &#xff0c;其中 colors[i] 是小写英文字母&#xff0c;表示图中第 i 个节点的 颜色 &#xf…

【深耕 Python】Data Science with Python 数据科学(7)书352页练习题

写在前面 关于数据科学环境的建立&#xff0c;可以参考我的博客&#xff1a; 【深耕 Python】Data Science with Python 数据科学&#xff08;1&#xff09;环境搭建 往期数据科学博文&#xff1a; 【深耕 Python】Data Science with Python 数据科学&#xff08;2&#xf…

鸿蒙实战开发-如何实现多设备自适应服务卡片

​介绍 本示例展示Js工程中服务卡片的布局和使用&#xff0c;其中卡片内容显示使用了一次开发&#xff0c;多端部署的能力实现多设备自适应。用到了卡片扩展模块接口&#xff0c;ohos.app.form.FormExtensionAbility 。 卡片信息和状态等相关类型和枚举接口&#xff0c;ohos.…

避雷!新增5本SCI被标记On Hold!1区、CCF推荐上榜

毕业推荐 SSCI • 社科类&#xff0c;分区稳步上升&#xff08;最快13天录用&#xff09; IEEE&#xff1a; • 计算机类&#xff0c;1区(TOP)&#xff0c;CCF推荐 SCIE • 计算机工程类&#xff0c;CCF推荐&#xff08;最快16天录用&#xff09; 期刊动态 科睿唯安新增5…

再谈数据中心网络传输

我在 大历史下的 pacing 中误会程序员了&#xff0c;程序员的路子是正确的(虽然并不指网络方面)。本文接着扯网络&#xff0c;从系统程序员熟悉的开始&#xff1a; 当 cpu 过多时&#xff0c;把大的 spinlock 拆成 percpu lock&#xff1b;使用 hash 时&#xff0c;倾向于 per…

C++之智能指针std::unique_ptr与std::make_unique分配内存方式总结(二百六十四)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a;多媒…

【Zblog搭建博客网站】windows环境搭建属于自己的博客并发布上线 – cpolar内网穿透

目录 1. 前言 2. Z-blog网站搭建 2.1 XAMPP环境设置 2.2 Z-blog安装 2.3 Z-blog网页测试 2.4 Cpolar安装和注册 3. 本地网页发布 3.1. Cpolar云端设置 3.2 Cpolar本地设置 4. 公网访问测试 5. 结语 1. 前言 想要成为一个合格的技术宅或程序员&#xff0c;自己搭建网…

Nacos单机版安装

1. 下载 nacos-server-2.0.3.tar.gz 官网 https://github.com/alibaba/nacos/releases 2. 上传到服务器 3. 解压 tar -zxvf nacos-server-2.0.3.tar.gz -C /opt 4. 配置数据库 4.1准备好mysql数据库 4.2创建一个新的数据库 创建新数据库nacos 4.3执行nacos建库脚本 在…

XMind 2023 下载地址及安装教程

XMind是一款流行的思维导图软件&#xff0c;它帮助用户以图形化的方式组织和呈现思维、概念和信息。XMind可以应用于各个领域&#xff0c;如项目管理、思维导图、会议记录、学习笔记等。 XMind提供了直观和易于使用的界面&#xff0c;用户可以通过拖放和连线来创建思维导图。它…

2024第16届成都学校团餐供应链展6月1日举办

2024第16届成都学校团餐供应链展6月1日举办 邀请函 主办单位&#xff1a; 中国西部教体融合博览会组委会 承办单位&#xff1a;重庆港华展览有限公司 博览会主题&#xff1a;责任教育 科教兴邦 学校团餐&#xff0c;就是老师和学生团体用餐的简称&#xff0c;也叫学校食堂…

使用Flutter混淆技术保护应用隐私与数据安全

在移动应用开发中&#xff0c;保护应用代码安全至关重要。Flutter 提供了简单易用的混淆工具&#xff0c;帮助开发者在构建 release 版本应用时有效保护代码。本文将介绍如何在 Flutter 应用中使用混淆&#xff0c;并提供了相关的操作步骤和注意事项。 &#x1f4dd; 摘要 本…

深入理解指针1:指针变量、指针运算、野指针、const修饰指针

生活中我们把门牌号也叫地址&#xff0c;在计算机中我们把内存单元的编号也称为地址。C语⾔中给地址起 了新的名字叫&#xff1a;指针。 所以我们可以理解为&#xff1a;内存单元的编号地址指针 1、指针变量 我们知道的是&#xff1a;数组名是数组首元素的地址。也就是说&…

linux离线安装NodeJs

一、官方下载 地址&#xff1a;Node.js — Download Node.js 选择linux系统版本 为了防止安装过程出现一些适配问题&#xff0c;我没有选择下载最新版&#xff0c;实际应该下载你的前端所用的nodejs版本 未完待续。。

Object 类的使用

如何理解根父类 类 java.lang.Object是类层次结构的根类&#xff0c;即所有其它类的父类。每个类都使用 Object 作为超类。 Object类型的变量与除Object以外的任意引用数据类型的对象都存在多态引用 method(Object obj){…} //可以接收任何类作为其参数 Person o new Person(…

奇趣相机AI摄影,让每个儿童成长故事都独一无二

随着科技的日新月异&#xff0c;亲子互动方式也在不断进化。近日&#xff0c;一款名为“奇趣相机”的微信小程序凭借其精准捕捉亚洲儿童特质与激发创意的独特功能&#xff0c;在年轻父母群体中引发热烈关注。这款应用程序不仅革新了儿童摄影的传统模式&#xff0c;更成为连接科…

iOS App Store审核要求与Flutter应用的兼容性分析

本文探讨了使用Flutter开发的iOS应用能否上架&#xff0c;以及上架的具体流程。苹果提供了App Store作为正式上架渠道&#xff0c;同时也有TestFlight供开发者进行内测。合规并通过审核后&#xff0c;Flutter应用可以顺利上架。但上架过程可能存在一些挑战&#xff0c;因此可能…

Node.js-知识点学习总结归纳

Node.js-知识点学习总结归纳 安装nodenode运行方式通过Node.js直接运行js文件&#xff08;也就不用通过网页html了&#xff09;绝对路径调用:相对路径调用&#xff1a;直接运行js命令&#xff1a; Vscode控制台使用node运行js文件 安装node 这个就不用讲了吧&#xff0c;网上搜…

浅谈物联网高速公路智慧配电室系统构建方案

关键词&#xff1a;高速公路&#xff1b;智慧供配电&#xff1b;电力监控&#xff1b;配电室智能运维托管&#xff1b;安全隐患 0、引言 随着高速公路事业的不断发展和路网的不断延伸&#xff0c;传统的管理方式已难以满足日益增长的需求&#xff0c;动态管理和安全隐患预警成…