跳过主要内容

视频播放器 Capacitor 插件

原生视频播放,带字幕,全屏和全面控制

安装

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

指南

如何在Capacitor中使用视频播放器

在设备上测试

下载Capgo应用,扫描QRcode

视频播放器插件预览QRcode

使用@capgo/capacitor-video-player

Capacitor插件用于在原生播放器中播放视频

安装

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

bunx cap sync 将插件的本地code复制到您的本地项目中。每次升级插件后,请重新运行它。

导入

import { VideoPlayer } from '@capgo/capacitor-video-player';

API概览

方法 描述
initPlayer 初始化视频播放器。
isPlaying 检查是否正在播放指定的 playerId。
play 从指定的 playerId 播放当前视频。
pause 暂停当前视频从指定的 playerId。
getDuration 获取指定的 playerId 中当前视频的持续时间。
getCurrentTime 获取指定的 playerId 中当前视频的当前时间。
setCurrentTime 设置当前时间以从指定的 playerId 中寻找当前视频。
getVolume 获取当前视频的音量(由 playerId 指定)。
setVolume 设置当前视频的音量(由 playerId 指定)。
getMuted 获取当前视频的静音状态(由 playerId 指定)。
setMuted 设置当前视频的静音状态(由 playerId 指定)。
setRate 设置当前视频的播放速度(由 playerId 指定)。
getRate 获取当前视频的播放速度(由 playerId 指定)。
stopAllPlayers 停止所有正在播放的视频。
showController 显示控制器。
isControllerIsFullyVisible 控制器是否完全可见。
exitPlayer 退出播放器。
hidePlayer 隐藏当前播放的视频 UI(原生全屏)而不停止播放。
showPlayer 显示之前隐藏的视频 UI(原生全屏)

示例

initPlayer()

初始化视频播放器

import { VideoPlayer } from '@capgo/capacitor-video-player';

const result = await VideoPlayer.initPlayer({ mode: 'fullscreen' });
console.log(result);

isPlaying()

检查 playerId 是否正在播放

import { VideoPlayer } from '@capgo/capacitor-video-player';

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

play()

播放 playerId 对应的当前视频

import { VideoPlayer } from '@capgo/capacitor-video-player';

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

pause()

暂停 playerId 对应的当前视频

import { VideoPlayer } from '@capgo/capacitor-video-player';

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

getDuration()

获取 playerId 对应的当前视频时长

import { VideoPlayer } from '@capgo/capacitor-video-player';

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

getCurrentTime()

获取 playerId 对应的当前视频播放位置

import { VideoPlayer } from '@capgo/capacitor-video-player';

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

上表列出了 19 个核心方法。监听器和版本帮助,以及每个方法的完整契约,均在 __CAPGO_KEEP_0__ 仓库中 GitHub 仓库.

文档

从使用@capgo/capacitor-video-player继续

如果您正在使用 使用@capgo/capacitor-video-player 为了规划原生媒体和界面行为,连接它与 @capgo/capacitor视频播放器 在@capgo/capacitor-video-player中了解实现细节 开始 在开始中了解实现细节 使用@capgo/capacitor-live-activities 了解@capgo/capacitor-live-activities中的原生能力 @capgo/capacitor-live-activities 为 @capgo/capacitor-live-activities 的实现细节, 使用 @capgo/capacitor-native-navigation 为使用 @capgo/capacitor-native-navigation 的原生能力

常见问题

视频播放器插件常见问题

如何在Capacitor应用中安装视频播放器插件?

Run "bun add @capgo/capacitor-video-player" (or "npm install @capgo/capacitor-video-player"), then run "bunx cap sync" so the iOS and Android projects pick up the native code. Import it from "@capgo/capacitor-video-player" in your app code.

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

是。视频播放器是一个 Capacitor 包,因此它可以与任何在 Capacitor 内部运行的 Web 框架一起使用,包括 Ionic、React、Vue、Angular、Svelte 和普通 JavaScript。

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

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

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

是。源代码 code 在 GitHub 上公开可见,地址为 https://github.com/Cap-go/capacitor-video-player/,并且该包从 npm 免费安装。欢迎 bug 报告和 pull 请求。

是否可以在不经过 App Store 审核的情况下更新使用视频播放器的 code?

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

在等待应用程序审查之前,推送视频播放器更改

一旦插件在您的商店构建中,Capgo实时更新将推送您的JavaScript、HTML和CSS更改给用户几分钟内。

开始使用Capgo