メイン コンテンツにジャンプ
@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をスキャンしてください。

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

@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 指定された video プレイヤーを初期化します。
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()

動画プレイヤーを初期化します。

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()

動画を一時停止します。

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-ビデオプレーヤーから続けて

Capacitor-Video-Player を使用している場合 Using @capgo/capacitor-video-player ネイティブのメディアとインターフェイスの動作を計画するには、接続する必要があります。 @capgo/capacitor-ビデオプレーヤー @capgo/capacitor-ビデオプレーヤーの実装詳細について Getting Started Capacitor-Video-Playerの実装詳細については @capgo/capacitorライブ活動を使用 native capabilityの使用にあたっては、@capgo/capacitor-live-activitiesを活用する必要があります。 @capgo/capacitor-ライブアクティビティ @capgo/capacitor-ライブ活動の実装詳細について @capgo/capacitor-ネイティブナビゲーション for the native capability in Using @capgo/capacitor-native-navigation.

FAQ

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

ビデオ プレーヤー プラグインを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のプラグインがストアビルド内にあります。Capgoのライブアップデートは、JavaScript、HTML、CSSの変更をユーザーに数分で反映します。

Capgoから始めます。