【免费下载链接】v10 Video.js v10 has moved to videojs/video.js项目地址https://gitcode.com/gh_mirrors/v10/v10点击查看免费下载Video.js v10 是一款现代化的 Web 视频播放器框架本次是从头重写的稳定大版本为 HTML 和 React 项目提供可组合的视频播放器、精美默认皮肤与自适应流媒体支持。本指南带你用最少的步骤完成Video.js v10 安装并搭建出你的第一个可播放视频——无论使用 npm 包管理器、React 组件还是免构建的 CDN 方式10 分钟内即可跑通。为什么选择 Video.js v10在开始安装前先了解 v10 相比旧版本的三大升级点升级点说明 更小的体积可组合架构只打包用到的功能RC 基准显示比 v8 默认包小约 60%⚛️ 框架一等公民React 项目使用videojs/react组件纯 HTML 项目使用videojs/htmlWeb Components 皮肤可定制官方默认皮肤直接可用还支持把皮肤源码引入项目自行修改下图来自官方发布博客直观对比了 v10 组合式流媒体引擎SPF与 Hls.js、Dash.js、Shaka 等引擎的包体积⚠️ 注意v10 在 npm 上发布为videojs/html和videojs/react旧的video.js包目前仍是 v8升级时别装错包。三种方式安装 Video.js v10官方提供了三条安装路径按需选择即可方式适用场景对应文档npm 包安装有 Vite/Webpack 等构建步骤的项目installation.mdxCDN 引入无构建步骤的纯 HTML 页面installation-cdn.mdxAI 辅助生成使用 AI 编码代理的开发者README.md方式一npm 安装推荐根据你的框架安装对应包# React 项目 npm install videojs/react # 纯 HTML / Vite 等项目 npm install videojs/html如需播放 HLS 自适应流媒体还需追加对应的媒体适配器包例如pnpm add videojs/html videojs/hlsjs-video 如果使用 AI 编码代理可运行npx videojs/cli agents init打印与你的框架匹配的安装说明命令只输出指引、不会修改项目。方式二CDN 免构建安装没有构建流程直接在页面引入 module 脚本即可脚本会注册播放器、皮肤和媒体组件!-- 默认视频播放器 默认皮肤 -- script typemodule srchttps://cdn.jsdelivr.net/npm/videojs/cdnlatest/video.js/script播放 HLS 流媒体时额外引入媒体脚本script typemodule srchttps://cdn.jsdelivr.net/npm/videojs/cdnlatest/media/hlsjs-video.js/scriptCDN 文件的完整 URL 规则与可用 bundle 清单见 guides/cdn.mdxCDN 路径生成逻辑参考 cdn-code.ts。写出你的第一个可播放视频纯 HTML三步渲染播放器导入播放器与皮肤模块在页面放置video-player嵌套结构运行开发服务器看到播放器import videojs/html/video/player; import videojs/html/video/skin;video-player video-skin styledisplay: block; width: 100%; aspect-ratio: 16 / 9; video src你的视频地址.mp4 playsinline/video /video-skin /video-player启动应用后即可看到如下效果——这是仓库 e2e 视觉测试中 HTML 默认皮肤的真实截图React声明式组合组件React 项目中播放器是普通组件皮肤、媒体源、扩展都是可嵌套的 JSX 节点import videojs/react/video/skin.css; import { VideoPlayer, VideoSkin, Video } from videojs/react/video; export default function Page() { return ( VideoPlayer VideoSkin style{{ width: 100%, aspectRatio: 16 / 9 }} Video src你的视频地址.mp4 playsInline / /VideoSkin /VideoPlayer ); }React 播放器运行效果如下截图来自 e2e 测试的 React 默认皮肤用例选择预设与皮肤直播、音频、背景视频除了默认点播播放器v10 内置了覆盖常见场景的预设Presets视频 / 音频点播default-video / default-audio直播流live-video / live-audio自带 Live 按钮去掉时长与进度展示背景视频background-video静音循环铺在页面内容之后皮肤Skin则决定控制条的外观每个预设都有default、neutral、compat等可选风格。中性风格neutral更简洁克制截图如下预设与皮肤的完整清单可查阅 guides/presets.mdx 和 guides/skins.mdx预设内部结构见 presets.ts。本地运行官方 Sandbox 沙盒想直观体验各种玩法仓库自带一个演示沙盒内含 50 多种模板HLS、Mux、Twitch、Spotify、背景视频等每个模板都是一个最小可运行示例git clone https://gitcode.com/gh_mirrors/v10/v10 cd v10 pnpm install pnpm dev:sandbox模板源码集中在 apps/sandbox/templates/比如 html-video/ 就是本文纯 HTML 示例的完整工程版。开发环境要求 Node ≥ 22.19详见根目录 package.json。接下来学什么跑通第一个视频后建议按下面的路径深入文档均位于 site/src/content/docs/guides/主题文档自定义皮肤改颜色、字体、封面customize-skins.mdx控制条组件逐个讲解controls.mdxHLS / DASH 等媒体源选择media-sources.mdx直播流接入live-streams.mdx支持的浏览器版本browser-support.mdx从 Video.js v8 迁移migrate-from-video-js-8.mdx常见问题Q页面报错StoreError: NO_TARGET怎么办打包产物必须以typemodule方式加载script typemodule src/dist/player.js如果项目完全没有构建步骤请改用 CDN 安装方式。Q播放 HLS 时选 HlsJsVideo 还是 HlsVideoHlsJsVideo基于 Hls.js兼容性最广是 HLS 的默认选择追求更小包体积且功能集匹配时可换用基于 SPF 引擎的HlsVideo。Qv8 的videojs()API 还能用吗v10 是重写而非平滑升级v8 的 API 用法需要按新组件模式迁移可参考 migrate.mdx 总览与 v8 兼容组件。 到这里你已经完成了 Video.js v10 从安装到首个可播放视频的全部流程。下一步去挑一个你喜欢的皮肤把它变成自己的吧赞分享【免费下载链接】v10 Video.js v10 has moved to videojs/video.js项目地址https://gitcode.com/gh_mirrors/v10/v10点击查看免费下载相关推荐如何快速上手MUIPlayerHTML5视频播放器的完整安装与使用指南如何快速上手MUIPlayerHTML5视频播放器的完整安装与使用指南 MUIPlayer是一款优秀的HTML5视频播放器组件能够帮助开发者轻松在网页中集成如何快速上手 ArtPlayer.js现代 HTML5 视频播放器的完整指南 如何快速上手 ArtPlayer.js现代 HTML5 视频播放器的完整指南 ArtPlayer.js 是一款功能全面的现代 HTML5 视频播放器支音视频前端UI组件如何快速上手MusicDNA从安装到DNA可视化的完整教程如何快速上手MusicDNA从安装到DNA可视化的完整教程 想要体验一款能够将音乐转化为美丽DNA可视化效果的安卓播放器吗MusicDNA正是你需要的终极音创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/10/15 19:23:35 · 阅读 1.2k 如何快速上手Video.js v10：从安装到首个可播放视频的完整指南
【免费下载链接】v10 Video.js v10 has moved to videojs/video.js项目地址https://gitcode.com/gh_mirrors/v10/v10点击查看免费下载Video.js v10 是一款现代化的 Web 视频播放器框架本次是从头重写的稳定大版本为 HTML 和 React 项目提供可组合的视频播放器、精美默认皮肤与自适应流媒体支持。本指南带你用最少的步骤完成Video.js v10 安装并搭建出你的第一个可播放视频——无论使用 npm 包管理器、React 组件还是免构建的 CDN 方式10 分钟内即可跑通。为什么选择 Video.js v10在开始安装前先了解 v10 相比旧版本的三大升级点升级点说明 更小的体积可组合架构只打包用到的功能RC 基准显示比 v8 默认包小约 60%⚛️ 框架一等公民React 项目使用videojs/react组件纯 HTML 项目使用videojs/htmlWeb Components 皮肤可定制官方默认皮肤直接可用还支持把皮肤源码引入项目自行修改下图来自官方发布博客直观对比了 v10 组合式流媒体引擎SPF与 Hls.js、Dash.js、Shaka 等引擎的包体积⚠️ 注意v10 在 npm 上发布为videojs/html和videojs/react旧的video.js包目前仍是 v8升级时别装错包。三种方式安装 Video.js v10官方提供了三条安装路径按需选择即可方式适用场景对应文档npm 包安装有 Vite/Webpack 等构建步骤的项目installation.mdxCDN 引入无构建步骤的纯 HTML 页面installation-cdn.mdxAI 辅助生成使用 AI 编码代理的开发者README.md方式一npm 安装推荐根据你的框架安装对应包# React 项目 npm install videojs/react # 纯 HTML / Vite 等项目 npm install videojs/html如需播放 HLS 自适应流媒体还需追加对应的媒体适配器包例如pnpm add videojs/html videojs/hlsjs-video 如果使用 AI 编码代理可运行npx videojs/cli agents init打印与你的框架匹配的安装说明命令只输出指引、不会修改项目。方式二CDN 免构建安装没有构建流程直接在页面引入 module 脚本即可脚本会注册播放器、皮肤和媒体组件!-- 默认视频播放器 默认皮肤 -- script typemodule srchttps://cdn.jsdelivr.net/npm/videojs/cdnlatest/video.js/script播放 HLS 流媒体时额外引入媒体脚本script typemodule srchttps://cdn.jsdelivr.net/npm/videojs/cdnlatest/media/hlsjs-video.js/scriptCDN 文件的完整 URL 规则与可用 bundle 清单见 guides/cdn.mdxCDN 路径生成逻辑参考 cdn-code.ts。写出你的第一个可播放视频纯 HTML三步渲染播放器导入播放器与皮肤模块在页面放置video-player嵌套结构运行开发服务器看到播放器import videojs/html/video/player; import videojs/html/video/skin;video-player video-skin styledisplay: block; width: 100%; aspect-ratio: 16 / 9; video src你的视频地址.mp4 playsinline/video /video-skin /video-player启动应用后即可看到如下效果——这是仓库 e2e 视觉测试中 HTML 默认皮肤的真实截图React声明式组合组件React 项目中播放器是普通组件皮肤、媒体源、扩展都是可嵌套的 JSX 节点import videojs/react/video/skin.css; import { VideoPlayer, VideoSkin, Video } from videojs/react/video; export default function Page() { return ( VideoPlayer VideoSkin style{{ width: 100%, aspectRatio: 16 / 9 }} Video src你的视频地址.mp4 playsInline / /VideoSkin /VideoPlayer ); }React 播放器运行效果如下截图来自 e2e 测试的 React 默认皮肤用例选择预设与皮肤直播、音频、背景视频除了默认点播播放器v10 内置了覆盖常见场景的预设Presets视频 / 音频点播default-video / default-audio直播流live-video / live-audio自带 Live 按钮去掉时长与进度展示背景视频background-video静音循环铺在页面内容之后皮肤Skin则决定控制条的外观每个预设都有default、neutral、compat等可选风格。中性风格neutral更简洁克制截图如下预设与皮肤的完整清单可查阅 guides/presets.mdx 和 guides/skins.mdx预设内部结构见 presets.ts。本地运行官方 Sandbox 沙盒想直观体验各种玩法仓库自带一个演示沙盒内含 50 多种模板HLS、Mux、Twitch、Spotify、背景视频等每个模板都是一个最小可运行示例git clone https://gitcode.com/gh_mirrors/v10/v10 cd v10 pnpm install pnpm dev:sandbox模板源码集中在 apps/sandbox/templates/比如 html-video/ 就是本文纯 HTML 示例的完整工程版。开发环境要求 Node ≥ 22.19详见根目录 package.json。接下来学什么跑通第一个视频后建议按下面的路径深入文档均位于 site/src/content/docs/guides/主题文档自定义皮肤改颜色、字体、封面customize-skins.mdx控制条组件逐个讲解controls.mdxHLS / DASH 等媒体源选择media-sources.mdx直播流接入live-streams.mdx支持的浏览器版本browser-support.mdx从 Video.js v8 迁移migrate-from-video-js-8.mdx常见问题Q页面报错StoreError: NO_TARGET怎么办打包产物必须以typemodule方式加载script typemodule src/dist/player.js如果项目完全没有构建步骤请改用 CDN 安装方式。Q播放 HLS 时选 HlsJsVideo 还是 HlsVideoHlsJsVideo基于 Hls.js兼容性最广是 HLS 的默认选择追求更小包体积且功能集匹配时可换用基于 SPF 引擎的HlsVideo。Qv8 的videojs()API 还能用吗v10 是重写而非平滑升级v8 的 API 用法需要按新组件模式迁移可参考 migrate.mdx 总览与 v8 兼容组件。 到这里你已经完成了 Video.js v10 从安装到首个可播放视频的全部流程。下一步去挑一个你喜欢的皮肤把它变成自己的吧赞分享【免费下载链接】v10 Video.js v10 has moved to videojs/video.js项目地址https://gitcode.com/gh_mirrors/v10/v10点击查看免费下载相关推荐如何快速上手MUIPlayerHTML5视频播放器的完整安装与使用指南如何快速上手MUIPlayerHTML5视频播放器的完整安装与使用指南 MUIPlayer是一款优秀的HTML5视频播放器组件能够帮助开发者轻松在网页中集成如何快速上手 ArtPlayer.js现代 HTML5 视频播放器的完整指南 如何快速上手 ArtPlayer.js现代 HTML5 视频播放器的完整指南 ArtPlayer.js 是一款功能全面的现代 HTML5 视频播放器支音视频前端UI组件如何快速上手MusicDNA从安装到DNA可视化的完整教程如何快速上手MusicDNA从安装到DNA可视化的完整教程 想要体验一款能够将音乐转化为美丽DNA可视化效果的安卓播放器吗MusicDNA正是你需要的终极音创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考