跳过主要内容
返回插件
@capgo/capacitor-youtube-player
教程
@capgo/capacitor-youtube-player

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

Embed YouTube videos with full player API control and event handling

指南

YouTube 播放器教程

在设备上测试

下载 Capgo 应用程序,然后扫描二维码 code。

YouTube Player 插件预览二维码 code

使用 @capgo/capacitor-youtube-player

YouTube Player 插件接口为 Capacitor。 提供方法来控制 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 请求。现有的请求级别 Referer 头部被保留, refererHeader 当省略时默认为 https://www.youtube.com 示例用途

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

initialize

当 YouTube 内容在插件中正常工作,但从 __CAPGO_KEEP_0__ 的主 WebView 中失败,因为 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';

await YoutubePlayer.destroy({} as PlayerIdOptions);

stopVideo

停止视频播放并取消加载。请谨慎使用此方法 - 通常情况下,pauseVideo() 是更好的选择。

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

await YoutubePlayer.stopVideo({} as PlayerIdOptions);

playVideo

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

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

await YoutubePlayer.playVideo({} as PlayerIdOptions);

完整参考文档

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

如果您正在使用 使用@capgo/capacitor-youtube-player 来规划原生媒体和界面行为,连接它与 @capgo/capacitor-youtube-player 为 @capgo/capacitor-youtube-player 的实现细节 开始使用 为 Getting Started 的实现细节 使用 @capgo/capacitor-live-activities 为使用 @capgo/capacitor-live-activities 的原生能力 @capgo/capacitor-live-activities 为 @capgo/capacitor-live-activities 的实现细节,以及 使用 @capgo/capacitor-video-player 为使用 @capgo/capacitor-video-player 的原生能力