# @brightcove/components-embed-code-modal 中文文档 规范地址：https://npmcn.com/package/%40brightcove/components-embed-code-modal/ 版本：1\.3\.0 npm 元数据更新时间：2026-11-06T16:50:25.891Z 中文译文更新时间：2026-11-08T15:33:56.769Z 软件包许可：未声明 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40brightcove/components-embed-code-modal 原文对照：https://npmcn.com/package/%40brightcove/components-embed-code-modal/?lang=original 源码仓库：https://bithub.brightcove.com/studio-ui-kit/studio-components-embed-code-modal ## 关键信息（来自 npm 元数据） - 包体积（解压后）：1.1 MB，298 个文件 - 模块格式：CommonJS - TypeScript 类型：包内自带 - 运行依赖：1 个 - peer 依赖：react ^17\.0\.2 \|\| ^18\.0\.0，i18next \>=21，react-dom ^17\.0\.2 \|\| ^18\.0\.0，react-query ^3\.38\.0，react-i18next \>=11，@brightcove/prism-core ^1\.25\.1，@brightcove/studio-icons \*，@brightcove/player-embed-code ^2\.0\.4，@brightcove/studio-components \*，@brightcove/react-player-loader ^1\.4\.2，@brightcove/studio-api-services ^7\.0\.0 \|\| ^8\.0\.0，@brightcove/studio-design-tokens \* - 首次发布：2021-12-21T15:08:52.405Z - 最新版本发布：2026-11-06T16:50:25.630Z - 近 30 天下载量：3177（2026-10-09 至 2026-11-07，npm 官方下载统计） - 已发布版本数：70（近 12 个月 14 个） ## 中文简介 嵌入代码 Modal 用于发布视频 ## 安装 ```sh npm install @brightcove/components-embed-code-modal ``` 也可以使用：`pnpm add @brightcove/components-embed-code-modal`、`yarn add @brightcove/components-embed-code-modal`、`bun add @brightcove/components-embed-code-modal` ## README # 工作室-组件-嵌入式编码-模式 ## 使用量 ### 要建设 ```bash npm run build ``` ### 发展 要运行此模块用于开发克隆 Repo 并运行 ```bash npm install npm run demo ``` 以 Studio UI( Marketing Studio) 启用的账户签名到 Studio 。 如有必要,点击配置文件图标,然后切换到 Studio 链接. 导航到 [https://studio.brightcove.com/出品/videocloud/media/dev/sdk:remote](https://studio.brightcove.com/products/videocloud/media/dev/sdk:remote)。 。 。 . App 运行于 [https://localhost.brightcove.com:12345/js/app.js (中文(简体) )](https://localhost.brightcove.com:12345/js/app.js) 说明 [创建模块](https://brightcove.atlassian.net/wiki/spaces/APPS/pages/2287471973/Creating+A+Module#How-does-that-dev%2Fsdk%3Aremote-URL-work%3F) API调取玩家的结果将取决于权限中的签名. ## 与模块结合 本部分是为营销工作室模块而建,例如: [工作室-媒体-单元-四](https://bithub.brightcove.com/studio/studio-module-media-four)。 。 。 . 下面将找到如何使用这些模块内部组件的指令 . #### 安装软件包 ```bash npm i @brightcove/components-embed-code-modal ``` #### 导入组件和所需类型 ```ts import { EmbedCodeModal, VideoPayload, } from '@brightcove/components-embed-code-modal'; ``` `VideoPayload` 是一个 TypeScript 接口,它描述一个对象,它将被接受为您的道具 `` 组件. 本文概述 `VideoPayload` 接口 : ```ts videoId: string; // Video id, required videoName: string; // Video title, required accountId: string; // BC account id, required posterUrl?: string; // Video poster url, not required duration: number; // Video duration in seconds, required ``` #### 组件道具 该部分目前采用两种道具: ```ts language?: 'en' | 'es' | 'fr' | 'ko' | 'ja' | 'zh'; video: VideoPayload; ``` - 这个 `VideoPayload` 界面由组件导出. - 这个 `language` 道具是可选的,如果不通过,组件将获得语言 `StudioModule.config.lang`目前,我们在本地沙盒里用它做测试. #### 通过模块连接 模式只有在 `video` 道具已经传入 `EmbedCodeModal` 组件. 为了使我们的组件完全脱钩, 我们期待我们的母模块 连接我们的组件. 以下是一个实例,说明媒体模块的VideoLibrary如何将两个独立的组件接上来打开EmbedCode Modal: ```ts const [embedVideo, setEmbedVideo] = useState(null); const handleAction = (event: DataGridAction) => { if (event.type === DataGridEvents.GetCode) { // build VideoPayload for EmbedCodeModal component here // this way we are completely de-coupling the EmbedCodeModal from the module const { payload: video } = event; setEmbedVideo({ videoId: video.id, videoName: video.name, accountId: video.account_id, posterUrl: video?.images?.poster?.src, duration: video.duration, }); } }; ``` 1. 媒体单元导入 `DataGrid` 打开 `EmbedCodeModal` 组件。 两个组件都没有编码来识别另一个组件. 2. 这个 `DataGrid` 组件发送 `GetCode` 动作告诉其母模块: _我想找一些代码,去做,不管你的模块处理这个动作_。 。 。 . 3. Media模块通过使用DataGrid传送的视频信息创建出新的有效载荷来处理这一动作. 它知道它想要打开EmbedCode Modal, 所以它会看着 `VideoPayload` 接口来创建它所需要的. 4. 此视频对象设定为模块的本地状态. 5. 我们的EmbedCode Modal应该将这段视频内容传递给部分: `` 6. 无论何时 `embedVideo` 模块中的更新 - 它触发了嵌入码 Modal 打开. 我们用这种方式连接东西的原因 是为了实现我们的目标 保持微前端脱钩。 EmbedCode Modal & DataGrid 互不直接互动 。 DataGrid提供正在使用的视频数据,但当它触发时 `Get Code` 事件,它可以随同发送整个视频对象。 它不需要知道Embed Code Modal为了成功操作需要什么确切的信息. 同样地,嵌入码Modal也可能被任何其他数量的接口所触发,而这种抽象帮助我们更好地为未来的融合做准备. ## SPA 条目`@brightcove/components-embed-code-modal/spa`(中文(简体) ) Studio SPA 文档装入无模块核心, 所以 `window.StudioModule` 没有 已经存在。 这个 `./spa` 输入会暴露LIVE和Project的表面,并带走 调用者而不是全局的每个能力: ```tsx import { SpaEmbedCodeModal, EmbedCodeModalTypes, } from '@brightcove/components-embed-code-modal/spa'; import type { LivePayload, EmbedCodeModalRuntime, } from '@brightcove/components-embed-code-modal/spa'; studioApiCall(descriptor, options), }, environment, // session.product.env — decides the player origins locale, // seeds the package-private i18next instance favoritePlayerId, // optional; absent falls back to 'default' onNotify, // optional; { variant, title?, message } shortenUrl, // cookie-authenticated /shortener/shorten adapter }} />; ``` PROJECT表面使遗留项目嵌入模式(蓝钢) 演示文稿,而非棱镜-核心),并需要相同的运行时间加3个 能力: ```tsx ; ``` PROJECT 挂载会让玩家自己接来,只给玩家提供 主分支配置带有交互插件。 当没有人知道时, 它显示创建- 播放器的流量, 如果 `hasPublishingRole` 设定,和 激活复制链接到 `playersModuleUrl` 否则。 创建员额 交互播放器并重写列表,它从未发布. `SpaEmbedCodeModal` 接受 `SpaEmbedCodeModalEntryProps`生命的结合 和项目道具. `SpaEmbedCodeModalProps` 仍为LIVE道具,所以 现有 `Omit` 保存每个活键 : `Omit` 工会倒闭 会员分享的钥匙. 该条目拥有什么和它没有: - **拥有** 玩家查询( 每架响应- query v3 客户端与后传) `retry: 3` 编号 : `staleTime: 0` 语义学),i18next例(6个目录, 登记在 `embed-code-modal` 名称空间)和 CSS( 范围) 下级 `.embed-code-modal` 在建设时间. - **从不** 读取 `window.StudioModule`, (中文(简体) ), `window.brightcove`默认值 i18next singleton,或外壳的查询客户端. 两个挂起的例子 不同的运行时间不能共享配置,玩家或回调. - 遗产 `EmbedCodeModal` 导出没有变化, 仍然读 Studio 文档。 这两个条目是单独的网页包输出(`build/index.js` 财务报告和审定财务报表 `spa.js`),所以只保留遗留模块在SPA文件中缺失,而不是 只是没用. `npm run build` 如果这种隔离倒退,则失败。 项目 平面通过传统根来分享其演示文稿 `ProjectModalView`,以及 `@brightcove/studio-components` 最高人民会议要求 捆绑而不是被禁:它已经是一个外部对等点,所以它没有添加字节. `spa.js`, (中文(简体) ), `spa.js.map` 财务报告和审定财务报表 `build/` 产出 `npm run build` 并运入已公布的软件包. `data` 必须是稳定的引用: 新对象重开模式, 所以内置 每个渲染物上的对象字面文字使封闭模式立即重新打开. ### 同伴依赖说明 SPA 条目保留 `react-query` v3 在运行时间( 每名客户端), 即 为什么 `react-query` 仍然是这个一揽子方案的同伴依赖关系,如同对 传统条目。 消费者 `./spa` 一定是因为 `react-query@^3.38.0` 已安装. ## 常见问题 ### @brightcove/components-embed-code-modal 是什么？ 嵌入代码 Modal 用于发布视频 ### 如何安装 @brightcove/components-embed-code-modal？ 在项目目录运行 npm install @brightcove/components-embed-code-modal，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^17\.0\.2 \|\| ^18\.0\.0）、i18next（\>=21）、react-dom（^17\.0\.2 \|\| ^18\.0\.0）、react-query（^3\.38\.0）、react-i18next（\>=11）、@brightcove/prism-core（^1\.25\.1）、@brightcove/studio-icons（\*）、@brightcove/player-embed-code（^2\.0\.4）、@brightcove/studio-components（\*）、@brightcove/react-player-loader（^1\.4\.2）、@brightcove/studio-api-services（^7\.0\.0 \|\| ^8\.0\.0）、@brightcove/studio-design-tokens（\*）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @brightcove/components-embed-code-modal 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @brightcove/components-embed-code-modal 支持 ESM 还是 CommonJS？ 以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。 ### @brightcove/components-embed-code-modal 可以商用吗？ @brightcove/components-embed-code-modal 使用 未声明 许可。package\.json 没有声明许可证。没有许可证的代码默认保留全部权利，商用前请联系作者或查看仓库中的 LICENSE 文件。以上为概括，不构成法律意见，请以许可原文为准。 ### @brightcove/components-embed-code-modal 的下载量有多少？ 根据 npm 官方下载统计，@brightcove/components-embed-code-modal 在 2026/10/09 – 2026/11/07 这 30 天内被下载 3,177 次，日均约 106 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @brightcove/components-embed-code-modal 还在维护吗？ 最新版本 1\.3\.0 发布于 2026/11/07（2 天前）；至今共发布 70 个版本，其中过去 12 个月发布了 14 个；首次发布于 2021/12/21。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。