メインコンテンツへスキップ
@capgo/capacitor-video-thumbnails メディア オープンソース

動画サムネイル Capacitor プラグイン

ローカルおよびリモートの動画ファイルから、指定したタイムスタンプでサムネイル画像を生成します

インストール

bun add @capgo/capacitor-video-thumbnails bunx cap sync
npm、pnpm、または yarn
  • npm install @capgo/capacitor-video-thumbnails
  • pnpm add @capgo/capacitor-video-thumbnails
  • yarn add @capgo/capacitor-video-thumbnails

ガイド

Capacitor で Video Thumbnails を使う方法

実機でテストする

Capgo アプリをダウンロードして、QR code をスキャンしてください。

Video Thumbnails プラグインのプレビューQR code

@capgo/capacitor-video-thumbnails を使用する

ビデオサムネイルを生成するための Capacitor Video Thumbnails プラグイン・インターフェース。

インストール

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

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

インポート

import { CapgoVideoThumbnails } from '@capgo/capacitor-video-thumbnails';

API の概要

メソッド 説明
getThumbnail 動画ファイルの指定した時間位置からサムネイル画像を生成します。

例

getThumbnail()

動画ファイルの指定した時間位置からサムネイル画像を生成します。

import { CapgoVideoThumbnails } from '@capgo/capacitor-video-thumbnails';

const result = await CapgoVideoThumbnails.getThumbnail({
  sourceUri: 'file:///path/to/video.mp4',
  time: 5000,
  quality: 0.8
});
console.log('Thumbnail URI:', result.uri);
console.log('Dimensions:', result.width, 'x', result.height);

完全なリファレンス

@capgo/capacitor-video-thumbnails の使用方法の続きへ

使用している場合 @capgo/capacitor-video-thumbnails を使用する ネイティブメディアとインターフェースの挙動を計画するには、次と連携させてください @capgo/capacitor-video-thumbnails @capgo/capacitor-video-thumbnails の実装詳細については、 スタートガイド スタートガイドの実装詳細については、 @capgo/capacitor-live-activities の使用 @capgo/capacitor-live-activities の使用におけるネイティブ機能については、 @capgo/capacitor-live-activities @capgo/capacitor-live-activities の実装の詳細については、 @capgo/capacitor-video-playerの使用方法 「@capgo/capacitor-video-player. の使い方」のネイティブ機能については

よくある質問

Video Thumbnails プラグイン FAQ

Capacitor アプリに Video Thumbnails プラグインをインストールするには?

"bun add @capgo/capacitor-video-thumbnails"(または "npm install @capgo/capacitor-video-thumbnails")を実行し、続けて "bunx cap sync" を実行すると、iOS と Android のプロジェクトにネイティブの code が反映されます。あとはアプリの code で "@capgo/capacitor-video-thumbnails" からインポートしてください。

@capgo/capacitor-video-thumbnails は React、Vue、Angular で動作しますか?

はい。Video ThumbnailsはCapacitorパッケージなので、Ionic、React、Vue、Angular、Svelte、素のJavaScriptなど、Capacitor上で動作するあらゆるWebフレームワークで使えます。

@capgo/capacitor-video-thumbnailsはどのCapacitorバージョンをサポートしていますか?

Capgo プラグインは Capacitor のメジャーバージョンに合わせています。使用している Capacitor のメジャーバージョンに一致するプラグインのメジャーバージョンを使ってください (例: Capacitor 8 ならプラグイン v8)。GitHub の README にある互換性テーブルに、メンテナンス中のバージョンが記載されています。

@capgo/capacitor-video-thumbnailsは無料でオープンソースですか?

はい。codeはGitHub上の https://github.com/Cap-go/capacitor-video-thumbnails/ で公開されており、パッケージはnpmから無料でインストールできます。バグ報告やプルリクエストも歓迎します。

App Storeの審査なしで、Video Thumbnailsを使用しているcodeをアップデートできますか?

プラグインのインストールやアップグレードはネイティブの code を変更するため、新しいストアビルドが必要です。その後は、プラグインを呼び出す JavaScript、HTML、CSS の変更を Capgo Live Updates で即座に配信できます。

アプリの審査を待たずに Video Thumbnails の変更をリリース

プラグインをストア用ビルドに組み込めば、Capgo live updates で JavaScript、HTML、CSS の変更を数分でユーザーに配信できます

Capgo から始める