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是一个真正的单阶段多目标检测模型，同时也是一个全卷积网络，不仅检测准确率高ÿ…...
微信小程序之bind和catch
这两个呢，都是绑定事件用的，具体使用有些小区别。 官方文档： 事件冒泡处理不同 bind：绑定的事件会向上冒泡，即触发当前组件的事件后，还会继续触发父组件的相同事件。例如，有一个子视图绑定了b…...
3.3.1_1 检错编码（奇偶校验码）
从这节课开始，我们会探讨数据链路层的差错控制功能，差错控制功能的主要目标是要发现并且解决一个帧内部的位错误，我们需要使用特殊的编码技术去发现帧内部的位错误，当我们发现位错误之后，通常来说有两种解决方案。第一…...
DAY 47
三、通道注意力 3.1 通道注意力的定义 # 新增：通道注意力模块（SE模块） class ChannelAttention(nn.Module):"""通道注意力模块(Squeeze-and-Excitation)"""def __init__(self, in_channels, reduction_rat…...
Objective-C常用命名规范总结
【OC】常用命名规范总结 文章目录 【OC】常用命名规范总结1.类名（Class Name)2.协议名（Protocol Name)3.方法名（Method Name)4.属性名（Property Name）5.局部变量/实例变量（Local / Instance Variables&…...
STM32标准库-DMA直接存储器存取
文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA（Direct Memory Access）直接存储器存取 DMA可以提供外设…...
从零开始打造 OpenSTLinux 6.6 Yocto 系统（基于STM32CubeMX）（九）
设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile，新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...
C++.OpenGL （10/64）基础光照（Basic Lighting）
基础光照（Basic Lighting） 冯氏光照模型（Phong Lighting Model） #mermaid-svg-GLdskXwWINxNGHso {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-GLdskXwWINxNGHso .error-icon{fill:#552222;}#mermaid-svg-GLd…...
CMake控制VS2022项目文件分组
我们可以通过 CMake 控制源文件的组织结构，使它们在 VS 解决方案资源管理器中以“组”（Filter）的形式进行分类展示。 🎯 目标 通过 CMake 脚本将 .cpp、.h 等源文件分组显示在 Visual Studio 2022 的解决方案资源管理器中。 ✅ 支持的方法汇总（共4种） 方法描述是否推荐…...
是否存在路径（FIFOBB算法）
题目描述 一个具有 n 个顶点e条边的无向图，该图顶点的编号依次为0到n-1且不存在顶点与自身相连的边。请使用FIFOBB算法编写程序，确定是否存在从顶点 source到顶点 destination的路径。 输入 第一行两个整数，分别表示n 和 e 的值（1…...
Linux --进程控制
本文从以下五个方面来初步认识进程控制： 目录 进程创建 进程终止 进程等待 进程替换 模拟实现一个微型shell 进程创建 在Linux系统中我们可以在一个进程使用系统调用fork()来创建子进程，创建出来的进程就是子进程，原来的进程为父进程。…...