メインコンテンツにジャンプ
@capgo/capacitor-ビデオプレーヤー メディア オープンソース

ビデオ プレーヤー 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 アプリをダウンロードし、QR code をスキャンしてください。

ビデオプレーヤープラグインのプレビューQRcode

@capgo/capacitor-video-playerを使用

Capacitor プラグインを使用してネイティブプレーヤーでビデオを再生

インストール

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

bunx cap sync プラグインのネイティブ code をあなたのネイティブ プロジェクトにコピーします。プラグインのアップグレード後は再度実行してください。

Import

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

APIの概要

Method 説明
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 reference

あなたが __CAPGO_KEEP_0__ を使用している場合 あなたが capgo/capacitor を使用している場合 ネイティブメディアとインターフェイスの動作を計画し、 capgo/capacitor を使用して、@capgo/capacitor-video-player の実装詳細を参照してください。 @capgo/capacitor-ビデオプレーヤーの実装詳細 Getting Started の実装詳細を参照してください。 Capacitorビデオプレーヤーの実装詳細については、Getting Startedを参照してください。 あなたが capgo/capacitor を使用している場合 capgo/capacitor capgo/capacitor @capgo/capacitor-ライブアクティビティの実装詳細について @capgo/capacitor-nativeナビゲーション @capgo/capacitorネイティブナビゲーション機能のために。

FAQ

ビデオ プレーヤー プラグイン FAQ

Capacitor-ビデオプレーヤープラグインを、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とどのフレームワークでも動作しますか。

Yes. Video Player is a Capacitor package, so it works with any web framework that runs inside Capacitor, including Ionic, React, Vue, Angular, Svelte and plain JavaScript.

Which Capacitor version does @capgo/capacitor-video-player support?

Capgo plugins follow Capacitor's major version: use the plugin major version that matches your Capacitor major version (for example plugin v8 with Capacitor 8). The compatibility table in the GitHub README lists the maintained versions.

Is @capgo/capacitor-video-player free and open source?

Yes. The source code is public on GitHub at https://github.com/Cap-go/capacitor-video-player/ and the package is free to install from npm. Bug reports and pull requests are welcome.

アップデート code がVideo Playerを使用している場合、アプリストアのレビューなしでアップデートできますか。

Installing or upgrading the plugin changes native code, so it needs a new store build. After that, JavaScript, HTML and CSS changes that call the plugin can ship instantly with Capgo live updates.

アプリレビューの待たずにビデオ プレーヤーの変更を配信します。

プラグインがストアビルドに追加されたら、Capgo ライブアップデートは、ユーザーにJavaScript、HTML、CSSの変更を数分でプッシュします。

Capgo で始めます。