# @financial-times/o-video 中文文档 规范地址：https://npmcn.com/package/%40financial-times/o-video/ 版本：9\.1\.0 npm 元数据更新时间：2026-10-06T13:39:57.386Z 中文译文更新时间：2026-11-14T20:14:27.416Z 软件包许可：MIT 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40financial-times/o-video 原文对照：https://npmcn.com/package/%40financial-times/o-video/?lang=original 项目主页：https://registry.origami.ft.com/components/o-video ## 关键信息（来自 npm 元数据） - 包体积（解压后）：56.3 kB，29 个文件 - 模块格式：ES Module - TypeScript 类型：未声明 - 运行依赖：1 个 - peer 依赖：@financial-times/o-loading ^6\.0\.0，@financial-times/o-private-foundation ^1\.0\.0 - 首次发布：2019-02-12T17:46:38.127Z - 最新版本发布：2026-09-15T11:23:13.460Z - 近 30 天下载量：2174（2026-10-15 至 2026-11-13，npm 官方下载统计） - 已发布版本数：51（近 12 个月 2 个） ## 中文简介 创建视频播放器并附加分析. ## 安装 ```sh npm install @financial-times/o-video ``` 也可以使用：`pnpm add @financial-times/o-video`、`yarn add @financial-times/o-video`、`bun add @financial-times/o-video` ## README # 视频 [![MIT licensed](https://img.shields.io/badge/license-MIT-blue.svg)](https://npmcn.com/package/%40financial-times/o-video/#readme-licence) 创建视频播放器并附加分析. - [使用量](https://npmcn.com/package/%40financial-times/o-video/#readme-usage) - [标记](https://npmcn.com/package/%40financial-times/o-video/#readme-markup) - [萨斯](https://npmcn.com/package/%40financial-times/o-video/#readme-sass) - [Java 脚本](https://npmcn.com/package/%40financial-times/o-video/#readme-javascript) - [配置](https://npmcn.com/package/%40financial-times/o-video/#readme-config) - [有播放列表](https://npmcn.com/package/%40financial-times/o-video/#readme-with-a-playlist) - [测试](https://npmcn.com/package/%40financial-times/o-video/#readme-testing) - [移徙](https://npmcn.com/package/%40financial-times/o-video/#readme-migration) - [联系人](https://npmcn.com/package/%40financial-times/o-video/#readme-contact) - [许可证](https://npmcn.com/package/%40financial-times/o-video/#readme-licence) ## 使用量 检查出来 [如何将 Origami 组件纳入您的项目](https://npmcn.com/package/docs/legacy-o2-docs/technical-guide.md) 开始 `o-video`。 。 。 . ## 标记 ```html
``` 视频可以以"小","中"和"大"等三个不同大小来作样式,这些可以被添加到元素中作为类修饰符,例如. ```html
``` ## 萨斯 为了输出每个大小和属性 `o-video`,您需要包括以下内容: ```scss @import "@financial-times/o-video/main"; @include oVideo(); ``` 通过使用 `$opts` 地图。 它接受下列名单: **属性** - `'info'` - `'placeholder'` **大小** - `'small'` - `'medium'` - `'large'` ```scss @import "@financial-times/o-video"; @include oVideo( $opts: ( "sizes": ( "small", "large", ), ) ); // outputs small and large video styles ``` ## Java 脚本 选中备忘 `o-video`,您需要以下内容: ```js import Video from "@financial-times/o-video"; const opts = { id: 4165329773001, optimumwidth: 710, placeholder: true, classes: ["video"], systemcode: "my-biz-ops-code", }; const video = new Video(document.body, opts); ``` ### 配置 何处 `opts` 是带有属性的可选对象 - `id` `[String]` 视频的出处(`brightcoveId` 或者说 `uuid`(中文(简体) ) - `autorender` `[Boolean]` 是否让视频自动渲染 。 如果 -虚假 \* 那你需要打电话 `init()` 准备好时 - `optimumwidth` `[Number]` 视频占位符图像的最佳宽度 - `optimumvideowidth` `[Number]` 视频本身的最佳宽度,当有多个视频引渡时使用 决定显示哪个( 如果存在, 最小的宽度至少与这个宽度相同) - `placeholder` `[Boolean]` 只显示海报图像, 点击时加载( 播放) 视频 - `placeholderHint` `[String]` 播放图标旁显示的可选提示( 默认为空) - `placeholderInfo` `[Array]` 占位符上需要显示的额外信息列表(Available:标题,描述,品牌) - `playsinline` `[Boolean]` 是否播放 [视频内置](https://webkit.org/blog/6784/new-video-policies-for-ios/) 在 iOS 小屏幕上( 默认为全屏幕) - `classes` `[Array]` 添加到视频(和占位符)元素的类 - `showCaptions` `[Boolean]` 是否在视频中添加标题。 默认为 `true`。 。 。 . - `data` `[Object]` JSON 代表 a 的物体 [来自下一条介质- api 的响应](https://next-media-api.ft.com/v1/eebe9cb5-8d4c-3bd7-8dd9-50e869e2f526)。如果使用,组件将不会呼叫API,而是使用此数据. - `systemcode` `[String]` 一个有效的 [Bizops 系统代码](https://biz-ops.in.ft.com/list/Systems) 使用 `o-video`。 。 。 . 选项,但缺少属性,它将使用 `defaultTargeting` 对象代替。 以下是目标对象上的每个属性所影响的: - `site:` 是指包含视频创意(部分广告请求)细列项目的广告单位. - `sizes:` 还添加了指定要返回的视频广告大小的代理请求. 订阅级别,分辨率. 配置选项也可以设定为数据属性,以即时宣告模块: ```html
``` ### 有播放列表 播放列表可能要排队播放视频,然后逐一播放. ```js import Video from "@financial-times/o-video"; const queue = ["4165329773001", "4907997821001", "4165329773001"]; const player = new Video(document.body, { autorender: false, systemcode: "my-biz-ops-code", }); const playlist = new Video.Playlist({ player, queue }); document.querySelector(".next-btn").onclick = () => playlist.next(); document.querySelector(".prev-btn").onclick = () => playlist.prev(); ``` 队列是 `array` 包含 Blightcove 视频标识字符串. ## 测试 见 [折纸制作工具](https://github.com/Financial-Times/origami-build-tools)。 。 。 . ``` $ obt test ``` 需要 Firefox (v38. 0.0 用多填充和镜像 CI 进行测试) ## 移徙 | 状态 | 主要版本 | 最后一个小版本 | 移徙指南 | | :-: | :-: | :-: | :-: | | 维护 | 第8条 | 不详 | [迁移到 v8](https://npmcn.com/package/%40financial-times/o-video/MIGRATION.md#migrating-from-v7-to-v8) | | 已贬值 | 第7条 | 第7.3条 | [迁移到 v7](https://npmcn.com/package/%40financial-times/o-video/MIGRATION.md#migrating-from-v6-to-v7) | | 已贬值 | 6个 | 6.1 请检查date=中的日期值 (帮助) | [迁移到 v6](https://npmcn.com/package/%40financial-times/o-video/MIGRATION.md#migrating-from-v5-to-v6) | | 已贬值 | 页:1 | 5.1 联合国 | [迁移到 v5](https://npmcn.com/package/%40financial-times/o-video/MIGRATION.md#migrating-from-v4-to-v5) | | 已贬值 | 页:1 | 4.1 国家 | [迁移到 v4](https://npmcn.com/package/%40financial-times/o-video/MIGRATION.md#migrating-from-v3-to-v4) | | 已贬值 | 3个 | 3.1 国家 | [迁移到 v3](https://npmcn.com/package/%40financial-times/o-video/MIGRATION.md#migrating-from-v2-to-v3) | | 已贬值 | 2个 | 2.5 国家 | [迁移到 v2](https://npmcn.com/package/%40financial-times/o-video/MIGRATION.md#migrating-from-v1-to-v2) | | 已贬值 | 1个 | 1.4 (中文(简体) ) | \- 说吧 | ## 联系人 如果您对本部分有任何问题或评论,或需要帮助使用本部分,请 [提出问题](https://github.com/Financial-Times/o-video/issues)访问 [#origami - 支持](https://financialtimes.slack.com/messages/origami-support/) 或电子邮件 [折纸支持](mailto:origami-support@ft.com)。 。 。 . ## 许可证 本软件由金融时报根据以下规定出版: [麻省理工学院许可证](http://opensource.org/licenses/MIT)。 。 。 . ## 常见问题 ### @financial-times/o-video 是什么？ 创建视频播放器并附加分析\. ### 如何安装 @financial-times/o-video？ 在项目目录运行 npm install @financial-times/o-video，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@financial-times/o-loading（^6\.0\.0）、@financial-times/o-private-foundation（^1\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @financial-times/o-video 支持 TypeScript 吗？ 该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/financial-times\_\_o-video 是否存在。 ### @financial-times/o-video 支持 ESM 还是 CommonJS？ 以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。 ### @financial-times/o-video 可以商用吗？ @financial-times/o-video 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @financial-times/o-video 的下载量有多少？ 根据 npm 官方下载统计，@financial-times/o-video 在 2026/10/15 – 2026/11/13 这 30 天内被下载 2,174 次，日均约 72 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @financial-times/o-video 还在维护吗？ 最新版本 9\.1\.0 发布于 2026/09/15（1 个月前）；至今共发布 51 个版本，其中过去 12 个月发布了 2 个；首次发布于 2019/02/13。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。