vue3引入video.js

news2024/11/14 20:26:11

一.引入video.js

yarn add video.js @videojs-player/vue --save

或者

npm install video.js @videojs-player/vue --save

二.vue3项目main.js引入

import VueVideoPlayer from "@videojs-player/vue"
import "video.js/dist/video-js.css"
const app = createApp(App)
app.use(VueVideoPlayer)

三.测试是否引入成功

找到随便一个页面文件粘贴以下代码(其中的src改成具体视频url)

    <video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto">
      <source
        src="http://192.168.10.100:111/api/file/download/3c52c250-876b-449f-9ac1-48c6bb1ef72f?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjEiLCJ1c2VybmFtZSI6InJvb3QiLCJpYXQiOjE2OTA4NTE2ODgsImV4cCI6MTc3NzI1MTY4OH0.6jbaN9a_55w9MBT1JoM3pASeVatsDOiq6rrnrIaE740"
        type="video/mp4"
      />
    </video>

 

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

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

相关文章

DP(各种模型)

数字三角形模型 摘花生 Hello Kitty想摘点花生送给她喜欢的米老鼠。 她来到一片有网格状道路的矩形花生地(如下图)&#xff0c;从西北角进去&#xff0c;东南角出来。 地里每个道路的交叉点上都有种着一株花生苗&#xff0c;上面有若干颗花生&#xff0c;经过一株花生苗就…

Doris(三)-集群部署3个FE+3个BE

前置 1&#xff09;配置java环境 1st 解压jdk包 unzip jdk1.8.0_171-amd64.zip 2nd 配置环境变量 vim /etc/profile#文末添加JAVA_HOME/data/jdk1.8.0_171-amd64 PATH$JAVA_HOME/bin:$PATHexport PATH JAVA_HOME3rd 启用配置 source /etc/profile 4th 验证 java -versi…

离散 Hopfield 神经网络的分类与matlab实现

1 案例背景 1.1离散 Hopfield 神经网络学习规则 离散型 Hopfield神经网络的结构、工作方式,稳定性等问题在第9章中已经进行了详细的介绍,此处不再赘述。本节将详细介绍离散Hopfield神经网络权系数矩阵的设计方法。设计权系数矩阵的目的是: ①保证系统在异步工作时的稳…

Consul实战

Consul实战 什么是Consul Consul是一种为分布式系统提供服务发现、配置共享和健康检查的开源工具&#xff1b; 可以用来做微服务架构里的注册中心和配置中心。Consul的特定和功能有&#xff1a; 1.服务发现 consul允许微服务注册自己的实例到Consul, 并查询consul来获取可用的…

flex 弹性布局

Flex 布局的使用 任何一个容器都可以指定为 Flex 布局。 .box{ display: flex; //flex作为display的一个属性使用 } 行内元素也可以使用 Flex 布局。 .box{ display: inline-flex; } 注意&#xff1a;设为 Flex 布局以后&#xff0c;子元素的float、clear和vertical-align…

jmeter使用步骤

jmeter 使用步骤 1&#xff0c;进入jmeter目录中的bin目录&#xff0c;双击jmeter.bat 打开 2&#xff0c;右键test plan 创建线程组 3&#xff0c;配置线程组参数 4&#xff0c;右键刚刚创建的线程组&#xff0c;创建请求&#xff0c;填写请求地址 5&#xff0c;需要携带to…

【力扣刷题 | 第二十四天】

目录 前言&#xff1a; 416. 分割等和子集 - 力扣&#xff08;LeetCode&#xff09; 总结 前言&#xff1a; 今晚我们爆刷动态规划类型的题目。 416. 分割等和子集 - 力扣&#xff08;LeetCode&#xff09; 给你一个 只包含正整数 的 非空 数组 nums 。请你判断是否可以将这…

MPP架构和Hadoop架构的区别

1. 架构的介绍 mpp架构是将许多数据库通过网络连接起来&#xff0c;相当于将一个个垂直系统横向连接&#xff0c;形成一个统一对外的服务的分布式数据库系统。每个节点由一个单机数据库系统独立管理和操作该物理机上的的所有资源&#xff08;CPU&#xff0c;内存等&#xff09…

flask------消息闪现 flash

1介绍 flask提供了一个非常有用的flash()函数&#xff0c;它可以用来“闪现”需要提示给用户的消息&#xff0c;比如当用户登录成功后显示“欢迎回来&#xff01;”。在视图函数调用flash()函数&#xff0c;传入消息内容&#xff0c;flash&#xff08;&#xff09;函数把消息存…

【网络基础进阶之路】设计网络划分的实战详解

PS&#xff1a;本要求基于华为的eNSP模拟软件进行 具体要求&#xff1a; 完成步骤&#xff1a; 1、对192.168.1.0/24进行子网划分 2、对每一个路由器进行IP的配置 3、开始静态路由的书写&#xff0c;在写之前&#xff0c;我们可以先对每一个路由器写一条通向右边的缺省路由&…

【C++入门到精通】C++入门 —— 内存管理(new函数的讲解)

目录 一、C/C内存分布 1. 栈&#xff08;Stack&#xff09; 2. 堆&#xff08;Heap&#xff09; 3. 全局区/静态区&#xff08;Global Area/Static Area&#xff09; 4. 常量区&#xff08;Constant Area&#xff09; 5. 代码区&#xff08;Code Area&#xff09; 二、C…

【HAL库】STM32CubeMX开发----STM32F407----LAN8720A----移植FreeModbus实现ModbusTCP

前言 本次实验以 STM32F407VET6 芯片为MCU&#xff0c;使用 25MHz 外部时钟源。 以太网PHY层芯片为 LAN8720A&#xff0c;移植FreeModbus实现ModbusTCP网口通信。 具体内容参考文章&#xff1a;【HAL库】STM32CubeMX开发----STM32F407----ETHLAN8720ALWIP----ping通 本次移植…

基于开源模型搭建实时人脸识别系统(三):人脸关键点、对齐模型概览与模型选型

续 基于开源模型搭建实时人脸识别系统&#xff08;二&#xff09;&#xff1a;人脸检测概览与模型选型_CodingInCV的博客-CSDN博客 摘要 人脸对齐&#xff08;face alignment&#xff09;或者人脸关键点&#xff08;face alignment&#xff09;是定位人脸上的关键点&#xff…

chatGLM 本地部署(windows+linux)

chatGLM算是个相对友好的模型&#xff0c;支持中英文双语的对话交流&#xff0c;清华出的 我的教程无需特别的网络设置&#xff0c;不过部分情况因为国内网络速度慢&#xff0c;需要反复重复 chatGLM github地址 一、硬件需求 N卡8G显存以上&#xff0c;最好16G以上&#xff…

redis 集群 1:李代桃僵 —— Sentinel

目前我们讲的 Redis 还只是主从方案&#xff0c;最终一致性。读者们可思考过&#xff0c;如果主节点凌晨 3 点突发宕机怎么办&#xff1f;就坐等运维从床上爬起来&#xff0c;然后手工进行从主切换&#xff0c;再通知所有的程序把地址统统改一遍重新上线么&#xff1f;毫无疑问…

电路暂态过程

本文仅提取了课程的部分内容&#xff0c;原视频课程如下&#xff1a;姜三勇《电工学》暂态过程 电路暂态过程——产生的原因&#xff1a; 1、内部原因&#xff1a;电路内部含有储能元件&#xff08;如&#xff1a;电容、电感&#xff09;&#xff0c;其中存储的能量不能发生改…

vscode如何退出/切换 github 账号

退出/切换 github 账号 左下角点击头像按钮&#xff0c;选择注销&#xff0c;然后再重新登录

GateOne任意文件读取

人的生命力&#xff0c;是在痛苦的煎熬中强大起来的。 简介 GateOne 是一款使用 HTML5 技术编写的网页版 SSH 终端模拟器。基于现代的 HTML5技术&#xff0c;无需任何浏览器插件、支持多个 SSH 进程、可以嵌入到其他任意应用程序中、支持使用 JavaScript&#xff0c;Python 甚…

SaaS销售打法:常规有效的四种SaaS营销策略,落地执行增长突破

在外面常规的认知中&#xff1a;SaaS营销与常规的营销其实没有什么不同&#xff0c;都在遵循着传统的推广和销售策略&#xff0c;简单来说就是将自己的产品卖给更多的用户&#xff0c;从而换取利润。 SaaS营销策略 但是SaaS产品与其他产品不同的地方在于它本身是没有实体的&am…

如何基于eBPF实现跨语言、无侵入的流量录制?

测试是产品发布上线的一个重要环节&#xff0c;但随着业务规模和复杂度不断提高&#xff0c;每次上线需要回归的功能越来越多&#xff0c;给测试工作带来了巨大的压力。在这样的大背景下&#xff0c;越来越多的团队开始使用流量回放对服务进行回归测试。 在建设流量回放能力之前…