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

video.js视频播放上手

news 2026/4/20 15:58:11

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.js

main.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…...

编程日记 2025/1/5 15:23:01

【LLM-Agent】Building effective agents和典型workflows

note Anthropic的工程经验&#xff1a; 大道至简&#xff0c;尽量维护系统的简洁&#xff1b;尽量让过程更加透明&#xff08;因为你依赖的是LLM的决策&#xff0c;如果只看输出不看过程&#xff0c;很容易陷入难以debug的情况&#xff09;&#xff1b;对LLM需要调用的工具&am…...

编程日记 2025/1/5 15:18:57

《量子比特大阅兵：不同类型量子比特在人工智能领域的优劣势剖析》

在科技的前沿&#xff0c;量子比特与人工智能的融合正开启一扇全新的大门。不同类型的量子比特&#xff0c;如超导、离子阱、光量子等&#xff0c;在与人工智能结合时展现出独特的优势与劣势。 超导量子比特 超导量子比特是目前应用较为广泛且研究相对成熟的量子比特类型。它…...

编程日记 2025/1/5 15:17:55

《探秘开源大模型：AI 世界的“超级引擎”》

《探秘开源大模型：AI 世界的“超级引擎”》 一、开源大模型崛起之路二、开源大模型发展历程回顾（一）早期奠基：理论突破与初步实践（二）快速发展：百花齐放的模型格局（三）当下态势：走向成熟与多元融合三、开源大模型核心技术剖析（一）Transformer 架构：基石之稳（二）…...

编程日记 2025/1/5 15:16:54

el-table行列转换简单版，仅限单行数据

原始数据格式如下&#xff0c;如果不是此格式&#xff0c;请转换成以下格式在进行以下操作 [{ label: name, value: Tom },{ label: age, value: 25 },{ label: country, value: UK } ]代码如下 <template><el-table :data"tableData" style"width: …...

编程日记 2025/1/5 15:14:52

2025年1月4日蜻蜓q旗舰版st完整开源·包含前后端所有源文件·开源可商用可二开·优雅草科技·优雅草kir|优雅草星星|优雅草银满|优雅草undefined

2025年1月4日蜻蜓q旗舰版st完整开源包含前后端所有源文件开源可商用可二开优雅草科技优雅草kir|优雅草星星|优雅草银满|优雅草undefined 产品介绍&#xff1a; 本产品主要贡献者优雅草科技优雅草kir|优雅草星星|优雅草银满|优雅草undefined-青史留名&#xff0c;时光如川浪淘…...

编程日记 2025/1/5 15:09:47

SQL把字符串按逗号分割成记录

在 SQL 中&#xff0c;可以通过以下方法将字符串按逗号分割&#xff0c;并将每个分割的值作为单独的记录插入到结果集中。以下是针对不同数据库系统的实现方法&#xff1a; 1. 使用 STRING_SPLIT&#xff08;SQL Server 2016&#xff09; STRING_SPLIT 是 SQL Server 提供的内置…...

编程日记 2025/1/5 15:07:46

C#设计模式（行为型模式）：观察者模式

C#设计模式&#xff1a;观察者模式&#xff0c;让对象间通信更优雅 在软件开发中&#xff0c;我们经常会遇到一个对象的状态发生改变&#xff0c;其他对象需要自动更新或做出相应反应的场景。例如&#xff1a; GUI事件处理&#xff1a; 当用户点击按钮时&#xff0c;按钮需要…...

编程日记 2025/1/5 15:06:45

pytorch镜像源

我以为的 pip install torch2.3.1cu118 torchvision0.18.1cu118 torchaudio2.3.1cu118 -f https://download.pytorch.org/whl/torch_stable.html实际上&#xff0c;有很多加速方案 为提高下载速度可以使用国内的镜像源来安装与 CUDA 11.8 兼容的 PyTorch。 方法 1&#xff1a…...

编程日记 2025/1/5 15:04:38

Verilog语法之常用行为级语法

摘要&#xff1a;本文主要介绍了一些在verilog中的行为级语法&#xff0c;并且提供了大量的运行实际例子&#xff0c;可以通过这些例子感受行为级语法在仿真中的巨大作用。 概述&#xff1a;行为级语法是RTL级的上一层&#xff0c;或者说是比RTL级更高级的语法&#xff0c;其语…...

编程日记 2025/1/5 15:03:37

PADS Logic原理图中有很多页原理图，如何（怎样）删除其中一页或者多页

我们在进行PADS Logic进行原理图设计的时候&#xff0c;有时候可能遇到一次性设计了很多页的原理图&#xff0c;比如说十几页的原理图。那么我们在进行PADS Layout的时候&#xff0c;可能将这些原理图绘制两块板或者多块PCB板&#xff0c;那么这时候我们需要将其中的一张原理图…...

编程日记 2025/1/5 15:00:29

蓝色简洁引导页网站源码

一款蓝色的简洁引导页&#xff0c;适合资源分发和网站备用引导。 1.源码上传至虚拟机或者服务器 2.绑定域名和目录 3.访问域名安装 4.安装完成后就行了 https://pan.quark.cn/s/b2d8b9c5dc7f https://pan.baidu.com/s/17h1bssUNhhR9DMyNTc-i9Q?pwd84sf https://caiyun.139.com…...

编程日记 2025/1/5 14:59:26

Apache PDFBox添加maven依赖,pdf转成图片

要使用Apache PDFBox将PDF文件转换为图片&#xff0c;并将其添加到Maven项目中&#xff0c;您可以按照以下步骤操作&#xff1a; 1. 添加Maven依赖 在您的pom.xml文件中添加Apache PDFBox的依赖。请确保使用最新版本的PDFBox库。截至2025年&#xff0c;以下是推荐的配置&…...

编程日记 2025/1/5 14:57:24

mybatis 和 mybatisPlus 兼容性问题

项目采用的是 mybatis&#xff0c; 后续引入了 mybatisPlus&#xff0c;用 mybatisX 创建的四个类一直报错&#xff0c;提示找不到符号&#xff0c;意识到 mybatis 和 mybatisPlus 的兼容性问题&#xff0c;通过修改配置 两者的配置如下 #配置mybatis配置 mybatis:type-aliase…...

编程日记 2025/1/5 14:55:18

Mono里运行C#脚本23—mono_jit_exec

前面已经分析一部分代码，可以打下基础知识，当然还有很多其它部分的内容，没有深入去了解。 接着下来，我们去探索一下怎么样找到执行应用程序的入口。 在这个嵌入脚本程序里，有一个这样的函数调用： main_function (domain, file, argc - 1, argv + 1); 这个函数的作用，…...

编程日记 2025/1/5 14:52:15

第十一章 图论

/* * 题目名称&#xff1a;连通图 * 题目来源&#xff1a;吉林大学复试上机题 * 题目链接&#xff1a;http://t.cn/AiO77VoA * 代码作者&#xff1a;杨泽邦(炉灰) */#include <iostream> #include <cstdio>using namespace std;const int MAXN 1000 10;int fathe…...

编程日记 2025/1/5 14:51:14

纯前端实现将pdf转为图片（插件pdfjs）

需求来源 预览简历功能在移动端&#xff0c;由于用了一层iframe把这个功能嵌套在了app端&#xff0c;再用一个iframe来预览&#xff0c;只有ios能看到&#xff0c;安卓就不支持&#xff0c;查了很多资料和插件&#xff0c;原理基本上都是用iframe实现的。最终转换思路&#xf…...

编程日记 2025/1/5 14:46:08

【IT人物系列】之MySQL创始人

前言 当今世界有无数的人构成&#xff0c;其中有些人做了一些改变世界的事情&#xff0c;比如&#xff1a;乔布斯缔造了Apple帝国&#xff0c;‌詹姆斯高斯林创造了Java语言等。正是这些优秀的人做的这些优秀的事情&#xff0c;让这个世界更加美好。因此他们值得铭记。 从今天…...

编程日记 2025/1/5 14:45:06

在Typora中实现自动编号

文章目录 在Typora中实现自动编号1. 引言2. 准备工作3. 自动编号的实现3.1 文章大纲自动编号3.2 主题目录&#xff08;TOC&#xff09;自动编号3.3 文章内容自动编号3.4 完整代码 4. 应用自定义CSS5. 结论 在Typora中实现自动编号 1. 引言 Typora是一款非常流行的Markdown编辑…...

编程日记 2025/1/5 14:44:04

Single Shot MultiBox Detector(SSD)

文章目录 摘要Abstract1. 引言2. 框架2.1 网络结构2.2 损失函数2.3 训练细节 3. 创新点和不足3.1 创新点3.2 不足 参考总结 摘要 与Faster R-CNN相比&#xff0c;SSD是一个真正的单阶段多目标检测模型&#xff0c;同时也是一个全卷积网络&#xff0c;不仅检测准确率高&#xff…...

编程日记 2025/1/5 14:43:03

如何用Arduino库实现PZEM-004T v3.0电能监测？完整指南解析

如何用Arduino库实现PZEM-004T v3.0电能监测&#xff1f;完整指南解析 【免费下载链接】PZEM-004T-v30 Arduino library for the Updated PZEM-004T v3.0 Power and Energy meter 项目地址: https://gitcode.com/gh_mirrors/pz/PZEM-004T-v30 PZEM-004T v3.0电能监测仪A…...

编程新知 2026/4/20 14:57:46

山东大学软件学院创新实训--“智愈医院自助服务系统“-(2)-医疗视觉AI技术选型

一、背景与需求分析在“智愈”医疗自助服务系统中&#xff0c;“病情诊断书导入分析”是核心功能之一。该功能的目标是&#xff1a;用户上传诊断书图片、PDF或扫描件后&#xff0c;系统自动完成文字识别、关键信息提取、结构化分析&#xff0c;最终生成通俗化的解读报告。要实现…...

编程新知 2026/4/20 14:55:42

别再手动翻官网了！用Python脚本自动爬取CKEditor历史漏洞与安全更新（附完整代码）

高效获取CKEditor安全情报&#xff1a;Python自动化爬虫实战指南 每次安全审计前&#xff0c;团队总要花几小时手动翻找CKEditor的漏洞公告&#xff1f;作为经历过这种低效工作模式的安全工程师&#xff0c;我开发了一套自动化解决方案。这个工具不仅能抓取所有历史漏洞&#x…...

编程新知 2026/4/20 14:34:16

告别抓包烦恼：用Selenium+mitmproxy实现自动化测试流量监控的保姆级教程

告别抓包烦恼&#xff1a;用Seleniummitmproxy实现自动化测试流量监控的保姆级教程 在Web自动化测试中&#xff0c;最令人头疼的莫过于"页面加载成功但数据未显示"的玄学问题。传统解决方案往往需要反复查看日志、数据库或后端接口&#xff0c;效率低下且难以定位问题…...

编程新知 2026/4/20 14:07:10

Mapbox踩坑实录：图层叠加、图片更新、弹窗样式，这些坑我帮你填平了

Mapbox实战避坑指南&#xff1a;图层管理、动态图片与弹窗优化 第一次在项目中集成Mapbox时&#xff0c;那种兴奋感很快被各种意想不到的报错消磨殆尽。记得凌晨三点调试updateImage方法时&#xff0c;控制台不断抛出"Image dimensions must match"的错误——原来只是…...

编程新知 2026/4/20 14:00:27

从零构建高性能Switch模拟环境：Ryujinx进阶配置完全指南

从零构建高性能Switch模拟环境&#xff1a;Ryujinx进阶配置完全指南 【免费下载链接】Ryujinx 用 C# 编写的实验性 Nintendo Switch 模拟器 项目地址: https://gitcode.com/GitHub_Trending/ry/Ryujinx 作为一款用C#编写的开源Nintendo Switch模拟器&#xff0c;Ryujinx…...

编程新知 2026/4/20 13:30:38

免费QQ空间备份神器：一键导出所有说说记录，永久保存青春记忆

免费QQ空间备份神器&#xff1a;一键导出所有说说记录&#xff0c;永久保存青春记忆 【免费下载链接】GetQzonehistory 获取QQ空间发布的历史说说 项目地址: https://gitcode.com/GitHub_Trending/ge/GetQzonehistory 还记得那些年你在QQ空间留下的青春印记吗&#xff1…...

编程新知 2026/4/20 13:07:37

3步实现跨平台图表编辑自由：drawio-desktop终极解决方案

3步实现跨平台图表编辑自由&#xff1a;drawio-desktop终极解决方案 【免费下载链接】drawio-desktop Official electron build of draw.io 项目地址: https://gitcode.com/GitHub_Trending/dr/drawio-desktop 还在为不同操作系统间的图表文件格式兼容问题而烦恼吗&…...

编程新知 2026/4/20 12:39:04

终极指南：5分钟用VideoSrt完成专业视频字幕制作

终极指南&#xff1a;5分钟用VideoSrt完成专业视频字幕制作 【免费下载链接】video-srt-windows 这是一个可以识别视频语音自动生成字幕SRT文件的开源 Windows-GUI 软件工具。 项目地址: https://gitcode.com/gh_mirrors/vi/video-srt-windows 还在为视频字幕制作烦恼吗…...

编程新知 2026/4/20 12:28:35

嵌入式开发者的Git避坑指南：如何优雅地管理Keil μVision5工程？

嵌入式开发者的Git避坑指南&#xff1a;如何优雅地管理Keil μVision5工程&#xff1f; 在嵌入式开发领域&#xff0c;版本控制是团队协作和项目管理的基石。然而&#xff0c;Keil μVision5工程的特殊性常常让开发者陷入Git使用的误区——要么仓库体积膨胀到难以维护&#xff…...

编程新知 2026/4/20 11:36:30