开始
复制一个包含安装步骤和本插件的完整 Markdown 指南的设置提示。
Set up this Capacitor plugin in the project.
Use the package manager already used by the project.
Install these package(s): `@capgo/capacitor-youtube-player`
Run the required Capacitor sync/update step after installation.
Read this markdown guide for the full setup steps: https://raw.githubusercontent.com/Cap-go/website/refs/heads/main/apps/docs/src/content/docs/docs/plugins/youtube-player/getting-started.mdx
Use that guide for platform-specific steps, native file edits, permissions, config changes, imports, and usage setup.
If that guide references other docs pages, read them too.
安装
安装步骤bun add @capgo/capacitor-youtube-playerbunx cap sync导入
导入部分import { YoutubePlayer } from '@capgo/capacitor-youtube-player';API概述
API概述部分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';
await YoutubePlayer.destroy({} as PlayerIdOptions);stopVideo
《stopVideo》标题停止视频播放并取消加载。 请谨慎使用 - pauseVideo()通常更合适。 Copy to clipboard
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.stopVideo({} as PlayerIdOptions);《pauseVideo》标题
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.playVideo({} as PlayerIdOptions);pauseVideo
《seekTo》标题跳转到视频的特定时间。 如果播放器暂停,播放器将保持暂停状态。如果正在播放,继续播放。
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.pauseVideo({} as PlayerIdOptions);seekTo
《seekTo》标题跳转到视频的特定时间。 如果播放器暂停,播放器将保持暂停状态。如果正在播放,继续播放。
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.seekTo({} as SeekToOptions);loadVideoById
标题:loadVideoById通过 YouTube ID 加载并播放视频。
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.loadVideoById({} as VideoByIdMethodOptions);cueVideoById
标题:cueVideoById通过 ID 引用视频,但不播放。 加载缩略图并准备播放器,但直到调用 playVideo() 才请求视频。
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.cueVideoById({} as VideoByIdMethodOptions);loadVideoByUrl
标题:loadVideoByUrl通过视频的完整 URL 加载并播放视频。
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.loadVideoByUrl({} as VideoByUrlMethodOptions);cueVideoByUrl
标题:cueVideoByUrl通过 URL 引用视频,但不播放。
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.cueVideoByUrl({} as VideoByUrlMethodOptions);cuePlaylist
标题:“cuePlaylist”不播放播放列表中的视频。 加载播放列表并准备第一段视频。
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.cuePlaylist({} as PlaylistMethodOptions);loadPlaylist
标题:“loadPlaylist”加载并播放播放列表。
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.loadPlaylist({} as PlaylistMethodOptions);nextVideo
标题:“nextVideo”在播放列表中播放下一段视频。
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.nextVideo({} as PlayerIdOptions);previousVideo
标题:“previousVideo”在播放列表中播放上一段视频。
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.previousVideo({} as PlayerIdOptions);playVideoAt
标题:"playVideoAt"通过索引在播放列表中播放特定视频。
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.playVideoAt({} as PlayVideoAtOptions);mute
标题:"mute"静音播放器音频。
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.mute({} as PlayerIdOptions);unMute
标题:"unMute"取消静音播放器音频。
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.unMute({} as PlayerIdOptions);isMuted
标题:"isMuted"检查播放器是否处于静音状态。
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.isMuted({} as PlayerIdOptions);setVolume
标题:设置音量设置播放器音量级别。
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.setVolume({} as SetVolumeOptions);getVolume
标题:获取音量获取当前播放器音量级别。 返回音量,即使播放器被静音。
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.getVolume({} as PlayerIdOptions);setSize
标题:设置尺寸设置播放器尺寸(以像素为单位)。
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.setSize({} as SetSizeOptions);getPlaybackRate
标题:获取播放速度获取当前播放速度.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.getPlaybackRate({} as PlayerIdOptions);setPlaybackRate
标题:设置播放速度设置播放速度
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.setPlaybackRate({} as SetPlaybackRateOptions);getAvailablePlaybackRates
标题:获取可用播放速度获取当前视频的可用播放速度列表
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.getAvailablePlaybackRates({} as PlayerIdOptions);setLoop
标题:循环播放启用或禁用循环播放。 循环播放启用后,播放列表将从头开始重复播放最后一个视频
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.setLoop({} as SetLoopOptions);setShuffle
标题:随机播放启用或禁用随机播放
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.setShuffle({} as SetShuffleOptions);getVideoLoadedFraction
标题:获取视频缓冲比例获取已缓冲的视频的比例。 比过时的getVideoBytesLoaded/getVideoBytesTotal更可靠。
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.getVideoLoadedFraction({} as PlayerIdOptions);getPlayerState
标题:获取播放器状态获取播放器的当前状态。
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.getPlayerState({} as PlayerIdOptions);getAllPlayersEventsState
标题:获取所有活跃玩家的事件状态获取所有活跃玩家的事件状态。 有助于跟踪多个玩家实例。
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.getAllPlayersEventsState();getCurrentTime
标题:获取当前播放时间获取当前播放位置(以秒为单位)。
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.getCurrentTime({} as PlayerIdOptions);toggleFullScreen
toggleFullScreen标题开启或关闭全屏模式.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.toggleFullScreen({} as ToggleFullScreenOptions);getPlaybackQuality
getPlaybackQuality标题获取当前播放质量.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.getPlaybackQuality({} as PlayerIdOptions);setPlaybackQuality
setPlaybackQuality标题设置建议的播放质量。 实际质量可能因网络条件而有所不同.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.setPlaybackQuality({} as SetPlaybackQualityOptions);getAvailableQualityLevels
getAvailableQualityLevels标题获取当前视频可用的质量等级列表.
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.getAvailableQualityLevels({} as PlayerIdOptions);getDuration
标题:“getDuration”获取当前视频的持续时间(秒)。
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.getDuration({} as PlayerIdOptions);getVideoUrl
标题:“getVideoUrl”获取当前视频的 YouTube.com URL。
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.getVideoUrl({} as PlayerIdOptions);getVideoEmbedCode
标题:“getVideoEmbedCode”获取当前视频的嵌入 code。 返回 HTML iframe 嵌入 code。
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.getVideoEmbedCode({} as PlayerIdOptions);getPlaylist
标题:“getPlaylist”获取当前播放列表中的视频 ID 数组。
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.getPlaylist({} as PlayerIdOptions);getPlaylistIndex
标题:获取播放列表索引获取当前播放的视频在播放列表中的索引。
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.getPlaylistIndex({} as PlayerIdOptions);getIframe
标题:获取iframe获取播放器的iframe DOM元素。 仅限Web平台。
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.getIframe({} as PlayerIdOptions);addEventListener
标题:添加事件监听器为播放器添加事件监听器。 仅限Web平台。
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
YoutubePlayer.addEventListener({ playerId: 'my-player', eventName: 'onStateChange', listener: (event) => { console.log('Player state:', event.data); },});removeEventListener
标题:移除事件监听器从播放器中移除事件监听器。 仅限Web平台。
import { YoutubePlayer } from '@capgo/capacitor-youtube-player';
await YoutubePlayer.removeEventListener({} as PlayerEventListenerOptions<TEvent>);类型参考
类型参考部分PlayerIdOptions
PlayerIdOptions部分export interface PlayerIdOptions { playerId: string;}SeekToOptions
SeekToOptions部分export interface SeekToOptions extends PlayerIdOptions { playerId: string; seconds: number; allowSeekAhead: boolean;}VideoByIdMethodOptions
VideoByIdMethodOptions部分export interface VideoByIdMethodOptions extends PlayerIdOptions { playerId: string; options: IVideoOptionsById;}VideoByUrlMethodOptions
VideoByUrlMethodOptions部分export interface VideoByUrlMethodOptions extends PlayerIdOptions { playerId: string; options: IVideoOptionsByUrl;}PlaylistMethodOptions
PlaylistMethodOptions部分export interface PlaylistMethodOptions extends PlayerIdOptions { playerId: string; playlistOptions: IPlaylistOptions;}PlayVideoAtOptions
名为“PlayVideoAtOptions”的部分export interface PlayVideoAtOptions extends PlayerIdOptions { playerId: string; index: number;}SetVolumeOptions
名为“SetVolumeOptions”的部分export interface SetVolumeOptions extends PlayerIdOptions { playerId: string; volume: number;}SetSizeOptions
名为“SetSizeOptions”的部分export interface SetSizeOptions extends PlayerIdOptions { playerId: string; width: number; height: number;}SetPlaybackRateOptions
名为“SetPlaybackRateOptions”的部分export interface SetPlaybackRateOptions extends PlayerIdOptions { playerId: string; suggestedRate: number;}SetLoopOptions
名为“SetLoopOptions”的部分export interface SetLoopOptions extends PlayerIdOptions { playerId: string; loopPlaylists: boolean;}SetShuffleOptions
名为“SetShuffleOptions”的部分export interface SetShuffleOptions extends PlayerIdOptions { playerId: string; shufflePlaylist: boolean;}ToggleFullScreenOptions
ToggleFullScreenOptions标题export interface ToggleFullScreenOptions extends PlayerIdOptions { playerId: string; isFullScreen: boolean | null | undefined;}真实来源
真实来源标题此页面由插件生成 src/definitions.ts当公共API上游发生变化时,请重新运行同步。
从开始行动
从开始行动标题如果您正在使用 开始行动 规划仪表板和API操作,连接它 使用 @capgo/capacitor-youtube-player 使用 @capgo/capacitor-youtube-player API 简介 查看 API 简介 介绍 查看 介绍 API 密钥 查看 API 密钥 设备 查看 设备