video.js视频播放上手
html案例
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>videojs视频播放</title>
</head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video-js.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video.min.js"></script><body><h3>视频播放</h3><video id="example_video_1" class="video-js vjs-default-skin" controls preload="none"poster="http://vjs.zencdn.net/v/oceans.png"><source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4"></video>
</body></html>
<script>var player=videojs('example_video_1',{muted: true,controls: true,height: 300,width: 400,loop: true,});
</script>npm+vue3案例
npm安装依赖
npm install --save-dev video.jsmain.js全局配置
import { createApp } from 'vue'
import App from './App.vue'
import 'video.js/dist/video-js.css'
import videojs from 'video.js'
import 'videojs-flash'const app = createApp(App)
app.provide('videojs', videojs)
app.mount('#app')
应用
<template><video class="video-js" ref="videoPlayer"></video>
</template><script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { inject } from 'vue'const videojs = inject('videojs')
const videoPlayer = ref(null)
let player = nullonMounted(() => {player = videojs(videoPlayer.value, {muted: true,controls: true,height: 300,width: 400,loop: true,})player.src({type: 'video/mp4',src: 'http://vjs.zencdn.net/v/oceans.mp4'})player.on('ended', () => {console.log('播放结束')})
})onBeforeUnmount(() => {if (player) {player.dispose()}
})
</script><style>
/* 你可以在这里添加样式 */
</style>相关文章：
video.js视频播放上手
html案例 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><title>videojs视频播放</title> </head> <link href"https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video-js.min.cs…...
【LLM-Agent】Building effective agents和典型workflows
note Anthropic的工程经验： 大道至简，尽量维护系统的简洁；尽量让过程更加透明（因为你依赖的是LLM的决策，如果只看输出不看过程，很容易陷入难以debug的情况）；对LLM需要调用的工具&am…...
《量子比特大阅兵：不同类型量子比特在人工智能领域的优劣势剖析》
在科技的前沿，量子比特与人工智能的融合正开启一扇全新的大门。不同类型的量子比特，如超导、离子阱、光量子等，在与人工智能结合时展现出独特的优势与劣势。 超导量子比特 超导量子比特是目前应用较为广泛且研究相对成熟的量子比特类型。它…...
《探秘开源大模型：AI 世界的“超级引擎”》
《探秘开源大模型：AI 世界的“超级引擎”》 一、开源大模型崛起之路二、开源大模型发展历程回顾（一）早期奠基：理论突破与初步实践（二）快速发展：百花齐放的模型格局（三）当下态势：走向成熟与多元融合三、开源大模型核心技术剖析（一）Transformer 架构：基石之稳（二）…...
el-table行列转换简单版，仅限单行数据
原始数据格式如下，如果不是此格式，请转换成以下格式在进行以下操作 [{ label: name, value: Tom },{ label: age, value: 25 },{ label: country, value: UK } ]代码如下 <template><el-table :data"tableData" style"width: …...
2025年1月4日蜻蜓q旗舰版st完整开源·包含前后端所有源文件·开源可商用可二开·优雅草科技·优雅草kir|优雅草星星|优雅草银满|优雅草undefined
2025年1月4日蜻蜓q旗舰版st完整开源包含前后端所有源文件开源可商用可二开优雅草科技优雅草kir|优雅草星星|优雅草银满|优雅草undefined 产品介绍： 本产品主要贡献者优雅草科技优雅草kir|优雅草星星|优雅草银满|优雅草undefined-青史留名，时光如川浪淘…...
SQL把字符串按逗号分割成记录
在 SQL 中，可以通过以下方法将字符串按逗号分割，并将每个分割的值作为单独的记录插入到结果集中。以下是针对不同数据库系统的实现方法： 1. 使用 STRING_SPLIT（SQL Server 2016） STRING_SPLIT 是 SQL Server 提供的内置…...
C#设计模式（行为型模式）：观察者模式
C#设计模式：观察者模式，让对象间通信更优雅 在软件开发中，我们经常会遇到一个对象的状态发生改变，其他对象需要自动更新或做出相应反应的场景。例如： GUI事件处理： 当用户点击按钮时，按钮需要…...
pytorch镜像源
我以为的 pip install torch2.3.1cu118 torchvision0.18.1cu118 torchaudio2.3.1cu118 -f https://download.pytorch.org/whl/torch_stable.html实际上，有很多加速方案 为提高下载速度可以使用国内的镜像源来安装与 CUDA 11.8 兼容的 PyTorch。 方法 1：…...
Verilog语法之常用行为级语法
摘要：本文主要介绍了一些在verilog中的行为级语法，并且提供了大量的运行实际例子，可以通过这些例子感受行为级语法在仿真中的巨大作用。 概述：行为级语法是RTL级的上一层，或者说是比RTL级更高级的语法，其语…...
PADS Logic原理图中有很多页原理图，如何（怎样）删除其中一页或者多页
我们在进行PADS Logic进行原理图设计的时候，有时候可能遇到一次性设计了很多页的原理图，比如说十几页的原理图。那么我们在进行PADS Layout的时候，可能将这些原理图绘制两块板或者多块PCB板，那么这时候我们需要将其中的一张原理图…...
蓝色简洁引导页网站源码
一款蓝色的简洁引导页，适合资源分发和网站备用引导。 1.源码上传至虚拟机或者服务器 2.绑定域名和目录 3.访问域名安装 4.安装完成后就行了 https://pan.quark.cn/s/b2d8b9c5dc7f https://pan.baidu.com/s/17h1bssUNhhR9DMyNTc-i9Q?pwd84sf https://caiyun.139.com…...
Apache PDFBox添加maven依赖,pdf转成图片
要使用Apache PDFBox将PDF文件转换为图片，并将其添加到Maven项目中，您可以按照以下步骤操作： 1. 添加Maven依赖 在您的pom.xml文件中添加Apache PDFBox的依赖。请确保使用最新版本的PDFBox库。截至2025年，以下是推荐的配置&…...
mybatis 和 mybatisPlus 兼容性问题
项目采用的是 mybatis， 后续引入了 mybatisPlus，用 mybatisX 创建的四个类一直报错，提示找不到符号，意识到 mybatis 和 mybatisPlus 的兼容性问题，通过修改配置 两者的配置如下 #配置mybatis配置 mybatis:type-aliase…...
Mono里运行C#脚本23—mono_jit_exec
前面已经分析一部分代码，可以打下基础知识，当然还有很多其它部分的内容，没有深入去了解。 接着下来，我们去探索一下怎么样找到执行应用程序的入口。 在这个嵌入脚本程序里，有一个这样的函数调用： main_function (domain, file, argc - 1, argv + 1); 这个函数的作用，…...
第十一章 图论
/* * 题目名称：连通图 * 题目来源：吉林大学复试上机题 * 题目链接：http://t.cn/AiO77VoA * 代码作者：杨泽邦(炉灰) */#include <iostream> #include <cstdio>using namespace std;const int MAXN 1000 10;int fathe…...
纯前端实现将pdf转为图片（插件pdfjs）
需求来源 预览简历功能在移动端，由于用了一层iframe把这个功能嵌套在了app端，再用一个iframe来预览，只有ios能看到，安卓就不支持，查了很多资料和插件，原理基本上都是用iframe实现的。最终转换思路…...
【IT人物系列】之MySQL创始人
前言 当今世界有无数的人构成，其中有些人做了一些改变世界的事情，比如：乔布斯缔造了Apple帝国，詹姆斯高斯林创造了Java语言等。正是这些优秀的人做的这些优秀的事情，让这个世界更加美好。因此他们值得铭记。 从今天…...
在Typora中实现自动编号
文章目录 在Typora中实现自动编号1. 引言2. 准备工作3. 自动编号的实现3.1 文章大纲自动编号3.2 主题目录（TOC）自动编号3.3 文章内容自动编号3.4 完整代码 4. 应用自定义CSS5. 结论 在Typora中实现自动编号 1. 引言 Typora是一款非常流行的Markdown编辑…...
Single Shot MultiBox Detector(SSD)
文章目录 摘要Abstract1. 引言2. 框架2.1 网络结构2.2 损失函数2.3 训练细节 3. 创新点和不足3.1 创新点3.2 不足 参考总结 摘要 与Faster R-CNN相比，SSD是一个真正的单阶段多目标检测模型，同时也是一个全卷积网络，不仅检测准确率高ÿ…...
利用最小二乘法找圆心和半径
#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...
【Axure高保真原型】引导弹窗
今天和大家中分享引导弹窗的原型模板，载入页面后，会显示引导弹窗，适用于引导用户使用页面，点击完成后，会显示下一个引导弹窗，直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...
【网络】每天掌握一个Linux命令 - iftop
在Linux系统中，iftop是网络管理的得力助手，能实时监控网络流量、连接情况等，帮助排查网络异常。接下来从多方面详细介绍它。 目录 【网络】每天掌握一个Linux命令 - iftop工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景…...
。】2022-5-15)
【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15
缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下： struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...
docker详细操作--未完待续
docker介绍 docker官网: Docker：加速容器应用程序开发 harbor官网：Harbor - Harbor 中文 使用docker加速器: Docker镜像极速下载服务 - 毫秒镜像 是什么 Docker 是一种开源的容器化平台，用于将应用程序及其依赖项（如库、运行时环…...
)
Java 语言特性(面试系列1)
一、面向对象编程 1. 封装（Encapsulation） 定义：将数据（属性）和操作数据的方法绑定在一起，通过访问控制符（private、protected、public）隐藏内部实现细节。示例： public …...
在四层代理中还原真实客户端ngx_stream_realip_module
一、模块原理与价值 PROXY Protocol 回溯 第三方负载均衡（如 HAProxy、AWS NLB、阿里 SLB）发起上游连接时，将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后，ngx_stream_realip_module 从中提取原始信息…...
oracle与MySQL数据库之间数据同步的技术要点
Oracle与MySQL数据库之间的数据同步是一个涉及多个技术要点的复杂任务。由于Oracle和MySQL的架构差异，它们的数据同步要求既要保持数据的准确性和一致性，又要处理好性能问题。以下是一些主要的技术要点： 数据结构差异 数据类型差异ÿ…...
3-11单元格区域边界定位(End属性)学习笔记
返回一个Range 对象，只读。该对象代表包含源区域的区域上端下端左端右端的最后一个单元格。等同于按键 End 向上键(End(xlUp))、End向下键(End(xlDown))、End向左键(End(xlToLeft)End向右键(End(xlToRight)) 注意：它移动的位置必须是相连的有内容的单元格…...
安宝特方案丨船舶智造的“AR+AI+作业标准化管理解决方案”（装配）
船舶制造装配管理现状：装配工作依赖人工经验，装配工人凭借长期实践积累的操作技巧完成零部件组装。企业通常制定了装配作业指导书，但在实际执行中，工人对指导书的理解和遵循程度参差不齐。 船舶装配过程中的挑战与需求 挑战 (1…...