当前位置： 首页 > news >正文

videojs和videojs-markers

news 2025/10/30 2:06:36

文章目录

  • videojs
    • 安装使用
    • videojs常用选项
    • video.js特定选项
  • videojs-markers
    • 安装使用
    • 说明
    • 方法

videojs

video.js是一款基于HTML5的网络视频播放器。它支持HTML5和Flash视频，以及YouTube和Vimeo（通过插件），Video.js 自动检测浏览器对 HTML5 的支持情况，如果不支持 HTML5 则自动使用 Flash 播放器。支持在桌面和移动设备上播放视频。
Video.js相比HTML5原生的video标签视频播放的优点：

  • 有良好的跨浏览器的样式，更美观
  • 支持流媒体格式
  • 支持社交媒体平台，例如Youtube，Vimeo等
  • 有丰富的第三方插件
  • 没有浏览器兼容问题

videojs官网：https://videojs.com/

安装使用

安装：npm install videojs

<head><link href="https://vjs.zencdn.net/8.6.0/video-js.css" rel="stylesheet" /><!-- If you'd like to support IE8 (for Video.js versions prior to v7) --><!-- <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> -->
</head><body><videoid="my-video"class="video-js"controlspreload="auto"width="640"height="264"poster="MY_VIDEO_POSTER.jpg"data-setup="{}"><source src="MY_VIDEO.mp4" type="video/mp4" /><source src="MY_VIDEO.webm" type="video/webm" /><p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to aweb browser that<a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p></video><script src="https://vjs.zencdn.net/8.6.0/video.min.js"></script>
</body>

videojs常用选项

名称类型说明
autoplay booleantrue/false，播放器准备好之后，是否自动播放 【默认false】
controls booleantrue/false 是否拥有控制条 【默认true】,如果设为false ,那么只能通过api进行控制了。也就是说界面上不会出现任何控制按钮
heightstring|number视频容器的高度，字符串或数字（单位像素） 比如： height:300 or height:‘300px‘
widthstring|number视频容器的宽度, 字符串或数字 单位像素
loop booleantrue/false 视频播放结束后，是否循环播放
muted booleantrue/false 是否静音
posterstring播放前显示的视频画面，播放开始之后自动移除。通常传入一个URL
preloadstring预加载，建议浏览器是否应在加载元素后立即开始下载视频数据。支持的值如下：‘auto’：立即开始加载视频（如果浏览器支持）。‘metadata’：仅加载视频的元数据，其中包括视频的持续时间和尺寸等信息。有时，元数据将通过下载几帧视频来加载。‘none’：不要预加载任何数据。浏览器将等待用户点击“播放”开始下载。
srcstring要嵌入的视频源的源URL。

video.js特定选项

名称类型说明
aspectRatiostring将播放器置于流体模式，并在计算播放器的动态大小时使用该值。该值应表示比率 - 由冒号（例如"16:9"或"4:3"）分隔的两个数字。
autoSetupboolean阻止播放器为具有data-setup属性的媒体元素运行autoSetup 。注意：必须在与videojs源加载生效的同一时刻全局设置videojs.options.autoSetup = false。
childrenArray|Object此选项继承自基Component类。
fluidboolean设置true，Video.js播放器将具有流畅的大小。它将扩展以适应其容器。此外，如果元素具有"vjs-fluid"，则此选项自动设置为true。
inactivityTimeoutnumberVideo.js表示用户通过"vjs-user-active"和"vjs-user-inactive"类以及"useractive"事件与玩家进行交互。在inactivityTimeout决定了不活动的许多毫秒声明用户闲置之前是必需的。值为0表示没有inactivityTimeout，用户永远不会被视为非活动状态。
languagestring默认值：浏览器默认值或’en’。与播放器中的一种可用语言匹配的语言代码。这为播放器设置了初始语言，但始终可以更改。
languagesObject自定义播放器中可用的语言。此对象的键将是语言代码，值将是具有英语键和翻译值的对象。注意：通常不需要此选项，最好将自定义语言传递给videojs.addLanguage()所有玩家
nativeControlsForTouchboolean明确设置关联技术选项的默认值。
notSupportedMessagestring允许覆盖Video.js无法播放媒体源时显示的默认消息。
playbackRatesArray严格大于0的数字数组，其中1表示常速（100％），0.5表示半速（50％），2表示双速（200％）等。如果指定，Video.js显示控件（类vjs-playback-rate）允许用户从选择数组中选择播放速度。选项以从下到上的指定顺序显示。
pluginsObject支持在初始化播放器时使用自定义选项自动初始化插件 - 而不是要求您手动初始化它们。

videojs-markers

安装使用

安装：npm install videojs-markers
使用：包括jquery.min.js, video-js.css and video.js

<link href="http://vjs.zencdn.net/4.3/video-js.css" rel="stylesheet">
<link href="src/to/videojs.markers.css" rel="stylesheet">
...
<script src="http://code.jquery.com/jquery-2.0.3.min.js"> </script>
<script src="http://vjs.zencdn.net/4.3/video.js"></script>
<script src='src/to/videojs.markers.js'></script>

// initialize video.js
var player = videojs('video-id');//load the marker plugin
player.markers({markers: [{time: 9.5,text: "put"},{time: 16,text: "any"},{time: 23.6,text: "text"},{time: 28,text: "here"}]
});

说明

名称类型说明
markerStyleObject默认值只涉及到width, border-radius，background-color；但也会应用任何其他css。设置方形橙色标记：`{ 'width':'7px', 'border-radius': '0%', 'background-color': 'orange' }`
markerTipObject悬停在标记提示上的选项。
breakOverlayObject每个标记处的打断覆盖选项。
onMarkerReachedFunction每当播放达到标记的时间间隔时，就会触发此回调函数。
onMarkerClickFunction单击标记时会触发此回调函数。
markersArray要显示的标记数组。

markerTip可设置的参数：

  • display：Boolean
  • text：Function
  • time：Function

breakOverlay可设置的参数：

  • display：Boolean，默认值false
  • displayTime：Integer，默认值3s
  • style：Object
  • text：Function

markers可设置的参数：

{time : 10,text: "marker text 1",overlayText: 'overlay text 1',class: 'custom-marker-class'
}

方法

方法说明
getMarkers返回插件中当前标记的数组，按升序排列。
next转到视频中当前时间的下一个标记。如果没有下一个标记，那么什么也不做。
prev转到视频中当前时间的上一个标记。如果没有上一个标记，那么什么也不做。
updateTime从v0.5.0开始，我们允许动态修改标记的时间（从传入的原始标记对象开始）。一旦更改了标记时间，就应该调用updateTime来立即反映UI中的更改。
remove删除给定索引数组中的标记。请注意，索引是基于0的（例如，第一个标记的索引为0）。
removeAll移除播放器中的所有标记。
add动态添加新标记。
reset重置视频中的所有标记。这相当于removeAll然后添加新标记。
destroy销毁插件。调用此函数后，player.markers应未定义。

示例：

// setup plugin
player.markers({markerStyle: {'width':'7px','border-radius': '30%','background-color': 'red'},markerTip:{display: true,text: function(marker) {return "Break: "+ marker.text;},time: function(marker) {return marker.time;}},breakOverlay:{display: false,displayTime: 3,style:{'width':'100%','height': '20%','background-color': 'rgba(0,0,0,0.7)','color': 'white','font-size': '17px'},text: function(marker) {return "Break overlay: " + marker.overlayText;}},onMarkerClick: function(marker) {},onMarkerReached: function(marker) {},markers: [{time: 9.5,text: "marker",overlayText: 'overlay',class: 'custom-marker'}]
});// plugin api
player.markers.next();
player.markers.prev();
player.markers.remove([1,2]);
player.markers.removeAll();
player.markers.add([{ time: 40, text: "I'm added"}]);
player.markers.reset([{ time: 23, text: "I'm reset"}]);
player.markers.destroy();

相关文章：

videojs和videojs-markers

文章目录 videojs安装使用videojs常用选项video.js特定选项 videojs-markers安装使用说明方法 videojs video.js是一款基于HTML5的网络视频播放器。它支持HTML5和Flash视频&#xff0c;以及YouTube和Vimeo&#xff08;通过插件&#xff09;&#xff0c;Video.js 自动检测浏览器…...

编程日记 2023/10/17 16:52:16

铜死亡+多组机器学习+WGCNA+分型

今天给同学们分享一篇铜死亡多组机器学习WGCNA分型的生信文章“Machine learning screening for Parkinsons disease-related cuproptosis-related typing development and validation and exploration of personalized drugs for cuproptosis genes”&#xff0c;这篇文章于20…...

编程日记 2023/10/17 16:51:14

vite 使用本地 ip + localhost 访问服务

vite 使用本地 ip localhost 访问服务 在 vite.config.js 中&#xff0c;如果未配置 server.host&#xff0c;默认服务将以 localhost 进行启动&#xff0c;此时我们可以通过 localhost:port 或 127.0.0.1:port 进行应用访问。 import { resolve } from path function pathRes…...

编程日记 2023/10/17 16:50:13

postman和jmete接口测试的用法与区别

前言 前阶段做了一个小调查&#xff0c;发现软件测试行业做功能测试和接口测试的人相对比较多。在测试工作中&#xff0c;有高手&#xff0c;自然也会有小白&#xff0c;但有一点我们无法否认&#xff0c;就是每一个高手都是从小白开始的&#xff0c;所以今天我们就来谈谈一大…...

编程日记 2023/10/17 16:49:12

Go语言基础之包

包&#xff08;package&#xff09; Go语言中支持模块化的开发理念&#xff0c;在Go语言中使用包&#xff08;package&#xff09;来支持代码模块化和代码复用。一个包是由一个或多个Go源码文件&#xff08;.go结尾的文件&#xff09;组成&#xff0c;是一种高级的代码复用方案…...

编程日记 2023/10/17 16:48:11

Switch模拟器-Ryujinx（龙神模拟器）安装教程

Ryujinx是由gdkchan带领团队运用C#语言创建并发布在GitHub平台的Switch开源模拟器. 系 统 要 求 内存8 GB RAM及以上 显卡支持Vulkan、OpenGL版本4.5及以上 64位系统 Windows 10 RS4&#xff08;Redstone 4&#xff0c;版本 1803&#xff09;或更高版本 软 件 教 程 第一…...

编程日记 2023/10/17 16:47:09

从Github中下载部分文件

我们经常回去Github中下载代码&#xff0c;但仓库中存在很多project代码。但我们如果只需要某一个或几个项目的代码&#xff0c;此时应该如何操作呢&#xff1f; 这里介绍两款工具&#xff0c;可以从仓库中下载部分文件的小工具: DownGit 和 GitZip 1. DownGit downGit 国内镜…...

编程日记 2023/10/17 16:45:07

webrtc安全性 加密方式

媒体加密与通信安全 有各种不同的做法会让实时通信软件暴露在安全隐患中。其中需要特别值得注意的是在信息传输的过程中截取未加密的媒体或者数据。这可以发生在浏览器到浏览器之间或者浏览器到服务器之间的通信过程中&#xff0c;第三方可以窃取到所有发送的数据。但是在数据加…...

编程日记 2023/10/17 16:44:06

【2023年11月第四版教材】软考上机考试操作指南（注意事项）

软考上机考试操作指南（注意事项） 1 考试注意事项2 获取<font color=blue>模拟作答系统1.1 方式1：绑定资源下载1.2 方式2：百度网盘下载1.3 方式3：官方下载1.4 说明3 模拟作答系统使用方法3.1 注意事项3.2 解压压缩文件3.3 运行软件3.4 考试科目选择3.5 登录3.6 阅读考…...

编程日记 2023/10/17 16:43:02

在vs code中创建一个名为 “django_env“ 的虚拟环境报错？！以下方法可以解决

# vs code 终端窗口中运行&#xff1a; mkvirtualenv django_env # 拓展&#xff1a; mkvirtualenv django_env 是一个命令&#xff0c;用于创建一个名为 "django_env" 的虚拟环境。虚拟环境是一种用于隔离不同Python项目所需依赖的工具。通过创建虚拟环境&#x…...

编程日记 2023/10/17 16:41:59

C++产生未定义的行为的原因分析

前言 最近一直在做QT开发&#xff0c;编程环境是VS2017和QT5.11.2 经常遇到的问题就是&#xff0c;在VS中调试程序&#xff0c;前面都是正常运行的&#xff0c;但是当关闭窗口&#xff0c;退出程序的时候&#xff0c;VS会抛出一个异常 “未加载ntdll.pdb&#xff0c;触发了一…...

编程日记 2023/10/17 16:40:57

C++ Qt QString类用法介绍

QString 是 Qt 框架中的一个重要类&#xff0c;用于处理 Unicode 字符串。它提供了大量的功能&#xff0c;方便开发者处理、查询和操作字符串。以下是 QString 的一些常用功能和示例&#xff1a; 构造和初始化 QString s1; // 默认构造函数&#xff0c;创建一个空字符串 QStr…...

编程日记 2023/10/17 16:39:55

亚马逊测评关于IP和DNS的问题

最近不少人询问了关于IP和DNS的问题&#xff0c;在此进行一些科普。 当客户端试图访问一个网站时&#xff0c;首先会向其所在的ISP的DNS服务器进行查询。如果ISP的DNS服务器没有相关缓存&#xff0c;则会向上级DNS服务器进行查询。 一些诸如CDN之类的服务&#xff0c;可能会为…...

编程日记 2023/10/17 16:38:54

新增Node.js运行环境、新增系统缓存清理功能，1Panel开源面板v1.7.0发布

2023年10月16日&#xff0c;现代化、开源的Linux服务器运维管理面板1Panel正式发布v1.7.0版本。 在这个版本中&#xff0c;1Panel新增Node.js运行环境&#xff1b;新增系统缓存清理功能&#xff1b;应用安装时支持选择远程数据库。此外&#xff0c;我们进行了40多项功能更新和…...

编程日记 2023/10/17 16:37:52

【SA8295P 源码分析 (一)】60 - QNX Host 如何新增 android_test 分区给 Android GVM 挂载使用

【SA8295P 源码分析】60 - QNX Host 如何新增 android_test 分区给 Android GVM 挂载使用 一、QNX 侧：创建分区、配置下载、配置透传1.1 修改分区表，新增 android_test 分区，大小为 2GByte1.2 下载 android_test.img 镜像1.3 配置 /dev/disk/android_test_a 分区透传到 Andr…...

编程日记 2023/10/17 16:36:51

天津滨海新区城市轨道交通电能管理系统方案与实施方案

【摘要】&#xff1a;介绍天津滨海新区轨道交通项目建设电能管理系统的系统架构、功能组成和实施方案。在借鉴其他城市轨道交通项目电能管理系统的基础上,结合天津滨海新区轨道交通建设的具体情况&#xff0c;对系统组网方案、测量表计设置原则、与通风空调节能系统和照明节能系…...

编程日记 2023/10/17 16:35:50

torch.cat 使用小节

torch.cat 使用小节 torch.cat 要求在所指定拼接维度之外的所有维度都要匹配&#xff0c;例如 import torch v1 torch.tensor([[1, 2, 3], [4, 5, 6], [4, 5, 6]]) # 3*3 v2 torch.tensor([[3, 6, 8]]) # 1*3 torch.cat([v1, v2], dim1)运行之后会报错 Sizes of tensors…...

编程日记 2023/10/17 16:34:50

Java：SpringBoot整合Spring Batch示例

目录 文档基础概念Tasklet方式示例Chunk方式示例参考文章 文档 https://docs.spring.io/spring-batch/docs/4.3.9/reference/html/index.html 基础概念 JobLauncher&#xff1a;作业启动器&#xff0c;启动作业的入口。对应的实现类为SimpleJobLauncher。Job&#xff1a;作业…...

编程日记 2023/10/17 16:32:48

Windows + Msys 下编译 TensorFlow 2.14

安装基本工具 pacman -S --needed zip unzip patch diffutils git 下载安装 Windows 版本 bazel 6.1.2&#xff0c;复制到 C:/Windows/system32 目录下&#xff0c;改名为 bazel.exe wget https://github.com/bazelbuild/bazel/releases/download/6.1.2/bazel-6.1.2-window…...

编程日记 2023/10/17 16:30:45

百度发布全新 AI 互动式搜索：百度简单搜索

本心、输入输出、结果 文章目录 百度发布全新 AI 互动式搜索&#xff1a;百度简单搜索前言主要能力 相关资料能力介绍 百度搜索升级发文告用户如何获取百度简单搜索百度简单搜索的定位百度简单搜索在 APP 上面的体验讨论和点评我们关注的几个问题 弘扬爱国精神 百度发布全新 AI…...

编程日记 2023/10/17 16:29:44

SciencePlots——绘制论文中的图片

文章目录 安装一、风格二、1 资源 安装 # 安装最新版 pip install githttps://github.com/garrettj403/SciencePlots.git# 安装稳定版 pip install SciencePlots一、风格 简单好用的深度学习论文绘图专用工具包–Science Plot 二、 1 资源 论文绘图神器来了&#xff1a;一行…...

编程新知 2025/9/8 13:50:07

【力扣数据库知识手册笔记】索引

索引 索引的优缺点 优点1. 通过创建唯一性索引&#xff0c;可以保证数据库表中每一行数据的唯一性。2. 可以加快数据的检索速度&#xff08;创建索引的主要原因&#xff09;。3. 可以加速表和表之间的连接&#xff0c;实现数据的参考完整性。4. 可以在查询过程中&#xff0c;…...

编程新知 2025/10/20 8:39:33

为什么需要建设工程项目管理？工程项目管理有哪些亮点功能？

在建筑行业&#xff0c;项目管理的重要性不言而喻。随着工程规模的扩大、技术复杂度的提升&#xff0c;传统的管理模式已经难以满足现代工程的需求。过去&#xff0c;许多企业依赖手工记录、口头沟通和分散的信息管理&#xff0c;导致效率低下、成本失控、风险频发。例如&#…...

编程新知 2025/10/26 14:56:49

跨链模式：多链互操作架构与性能扩展方案

跨链模式&#xff1a;多链互操作架构与性能扩展方案 ——构建下一代区块链互联网的技术基石 一、跨链架构的核心范式演进 1. 分层协议栈&#xff1a;模块化解耦设计 现代跨链系统采用分层协议栈实现灵活扩展&#xff08;H2Cross架构&#xff09;&#xff1a; 适配层&#xf…...

编程新知 2025/10/27 13:41:58

大模型多显卡多服务器并行计算方法与实践指南

一、分布式训练概述 大规模语言模型的训练通常需要分布式计算技术，以解决单机资源不足的问题。分布式训练主要分为两种模式： 数据并行：将数据分片到不同设备，每个设备拥有完整的模型副本 模型并行：将模型分割到不同设备，每个设备处理部分模型计算 现代大模型训练通常结合…...

编程新知 2025/7/23 19:14:14

elementUI点击浏览table所选行数据查看文档

项目场景&#xff1a; table按照要求特定的数据变成按钮可以点击 解决方案&#xff1a; <el-table-columnprop"mlname"label"名称"align"center"width"180"><template slot-scope"scope"><el-buttonv-if&qu…...

编程新知 2025/10/29 8:10:16

LCTF液晶可调谐滤波器在多光谱相机捕捉无人机目标检测中的作用

中达瑞和自2005年成立以来&#xff0c;一直在光谱成像领域深度钻研和发展&#xff0c;始终致力于研发高性能、高可靠性的光谱成像相机&#xff0c;为科研院校提供更优的产品和服务。在《低空背景下无人机目标的光谱特征研究及目标检测应用》这篇论文中提到中达瑞和 LCTF 作为多…...

编程新知 2025/6/15 11:47:07

自然语言处理——文本分类

文本分类 传统机器学习方法文本表示向量空间模型 特征选择文档频率互信息信息增益&#xff08;IG&#xff09; 分类器设计贝叶斯理论&#xff1a;线性判别函数 文本分类性能评估P-R曲线ROC曲线 将文本文档或句子分类为预定义的类或类别&#xff0c; 有单标签多类别文本分类和多…...

编程新知 2025/10/29 4:15:10

Django RBAC项目后端实战 - 03 DRF权限控制实现

项目背景 在上一篇文章中&#xff0c;我们完成了JWT认证系统的集成。本篇文章将实现基于Redis的RBAC权限控制系统&#xff0c;为系统提供细粒度的权限控制。 开发目标 实现基于Redis的权限缓存机制开发DRF权限控制类实现权限管理API配置权限白名单 前置配置 在开始开发权限…...

编程新知 2025/10/1 4:57:11

SOC-ESP32S3部分：30-I2S音频-麦克风扬声器驱动

飞书文档https://x509p6c8to.feishu.cn/wiki/SKZzwIRH3i7lsckUOlzcuJsdnVf I2S简介 I2S&#xff08;Inter-Integrated Circuit Sound&#xff09;是一种用于传输数字音频数据的通信协议&#xff0c;广泛应用于音频设备中。 ESP32-S3 包含 2 个 I2S 外设&#xff0c;通过配置…...

编程新知 2025/10/21 0:26:34