__CAPGO_KEEP_4__

YouTube 播放器 Capacitor插件

嵌入YouTube视频并拥有完整的播放器API控制和事件处理

安装

bun add @capgo/capacitor-youtube-player bunx cap sync
npm, pnpm 或 yarn
  • npm install @capgo/capacitor-youtube-player
  • pnpm add @capgo/capacitor-youtube-player
  • yarn add @capgo/capacitor-youtube-player

指南

如何在Capacitor中使用YouTube播放器

在设备上测试

下载Capgo应用,扫描QR code

YouTube Player插件预览QR code

使用@capgo/capacitor-youtube-player

Capacitor YouTube Player插件接口,提供控制YouTube视频播放的方法

安装

bun add @capgo/capacitor-youtube-player
bunx cap sync

本插件暴露的内容

  • initialize - 初始化一个新的 YouTube 播放器实例。
  • destroy - 销毁一个播放器实例并释放资源。
  • stopVideo - 停止视频播放并取消加载。请谨慎使用 - pauseVideo() 通常更合适。
  • playVideo - 播放当前缓冲或加载的视频。最终播放器状态将为 PLAYING (1)。

主 WebView Referer 补丁

启用 patchRefererHeader 当 YouTube 内容在插件中正常工作,但从 Capacitor 的主 WebView 中失败时,YouTube 期望一个浏览器样式的 Referer 补丁仅适用于

{
  "plugins": {
    "YoutubePlayer": {
      "patchRefererHeader": true,
      "refererHeader": "https://www.youtube.com"
    }
  }
}

, 和 youtube.com, youtube-nocookie.com请求。现有的请求级别 youtu.be when YouTube content works in the plugin but fails from __CAPGO_KEEP_0__'s main WebView because YouTube expects a browser-like Referer 标题保持不变,且 refererHeader 默认为 https://www.youtube.com 当省略时。

示例用途

initialize

初始化一个新的YouTube播放器实例。

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';

await YoutubePlayer.initialize({
  playerId: 'my-player',
  videoId: 'dQw4w9WgXcQ',
  playerSize: { width: 640, height: 360 },
  privacyEnhanced: true
});

destroy

销毁一个播放器实例并释放资源。

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';

const result = await YoutubePlayer.destroy({ playerId: 'player-id-123' });
console.log(result);

stopVideo

停止视频播放并取消加载。请谨慎使用 - pauseVideo()通常更合适。

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';

const result = await YoutubePlayer.stopVideo({ playerId: 'player-id-123' });
console.log(result);

playVideo

播放当前缓冲或已加载的视频。最终播放器状态将为PLAYING (1)。

import { YoutubePlayer } from '@capgo/capacitor-youtube-player';

const result = await YoutubePlayer.playVideo({ playerId: 'player-id-123' });
console.log(result);

完整参考

继续使用 @capgo/capacitor-youtube-player

如果您正在使用 使用 @capgo/capacitor-youtube-player 将其与 @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-youtube-player 连接起来 查看 @capgo/capacitor-youtube-player 的实现细节 为 @capgo/capacitor-youtube-player 的实现细节 查看 Getting Started 的实现细节 使用 @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-live-activities 查看 Using @capgo/capacitor-live-activities 的原生能力 @capgo/capacitor-live-activities 查看 @capgo/capacitor-live-activities 的实现细节 使用 @capgo/capacitor-live-activities 使用@capgo/capacitor-video-player 为使用@capgo/capacitor-video-player的原生能力

常见问题

YouTube Player 插件 FAQ

如何在 Capacitor 应用中安装 YouTube Player 插件?

运行 "bun add @capgo/capacitor-youtube-player" (或 "npm install @capgo/capacitor-youtube-player"),然后运行 "bunx cap sync" 以便 iOS 和 Android 项目捕获 native code。从 "@capgo/capacitor-youtube-player" 导入到您的应用 code 中。

@capgo/capacitor-youtube-player 与 React、Vue 和 Angular 是否兼容?

是的。YouTube Player 是一个 Capacitor 包,因此它与任何运行在 Capacitor 内的 Web 框架兼容,包括 Ionic、React、Vue、Angular、Svelte 和普通 JavaScript。

哪个 Capacitor 版本支持 @capgo/capacitor-youtube-player?

Capgo 插件遵循 Capacitor 的主要版本:使用与您的 Capacitor 主要版本匹配的插件主要版本(例如插件 v8 与 Capacitor 8)。在 GitHub README 中的兼容性表格中列出了维护的版本。

@capgo/capacitor-youtube-player 是否免费和开源?

是的。源 code 公开在 GitHub 上,https://github.com/Cap-go/capacitor-youtube-player/,并且包是从 npm 免费安装的。欢迎 bug 报告和 pull 请求。

是否可以在不经过 App Store 审核的情况下更新使用 YouTube Player 的 code?

安装或升级插件会更改 native code,因此需要一个新的商店构建。之后,JavaScript、HTML 和 CSS 调用插件的更改可以立即通过 Capgo 实时更新发布。

无需等待应用程序审查即可将YouTube播放器更改推送到应用商店

一旦插件在您的应用商店构建中,Capgo即刻将JavaScript、HTML和CSS更改推送给用户

开始使用Capgo