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

JW Player Capacitor プラグイン

広告と分析に対応した JW Player を埋め込み、プロ品質の動画ストリーミングを実現

インストール

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

ガイド

JW Player を Capacitor で使う方法

実機でテストする

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

JW Player プラグインのプレビュー用QR code

@capgo/capacitor-jw-player を使用

jwplayer.com の動画を再生します。

インストール

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

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

インポート

import { JwPlayer } from '@capgo/capacitor-jw-player';

API の概要

メソッド 説明
initialize JW Playerを初期化します。
play 動画を再生します。
pause 再生中のメディアを一時停止します。
resume 一時停止中のメディアを再開します。
stop 再生中のメディアを停止します。
seekTo 再生中のメディアを指定した位置にシークします。
setVolume 音量を設定します。
getPosition メディアの現在の再生位置を取得します。
getState 現在のプレイヤーの状態を取得します。
setSpeed 再生速度を設定します。
setPlaylistIndex インデックスを指定してプレイリスト内のアイテムを設定します。
loadPlaylist プレイリストを読み込みます。
loadPlaylistWithItems アイテムを含むプレイリストを読み込みます。
getAudioTracks 利用可能なオーディオトラックを取得します。
getCurrentAudioTrack 現在のオーディオトラックを取得します。
setCurrentAudioTrack 現在のオーディオトラックを設定します。
getCaptions 利用可能なキャプション/字幕を取得します。
getCurrentCaptions 現在のキャプション/字幕トラックを取得します。
setCurrentCaptions 現在のキャプション/字幕トラックを設定します。
currentPlaylist 現在のプレイリストを取得します。

例

initialize()

JW Playerを初期化します。

import { JwPlayer } from '@capgo/capacitor-jw-player';

await JwPlayer.initialize({ licenseKey: 'license-key-123' });

play()

ビデオを再生します。

import { JwPlayer } from '@capgo/capacitor-jw-player';

await JwPlayer.play({
  mediaUrl: 'https://example.com',
  mediaType: 'video',
});

pause()

再生中のメディアを一時停止します。

import { JwPlayer } from '@capgo/capacitor-jw-player';

await JwPlayer.pause();

resume()

一時停止中のメディアを再開します。

import { JwPlayer } from '@capgo/capacitor-jw-player';

await JwPlayer.resume();

stop()

再生中のメディアを停止します。

import { JwPlayer } from '@capgo/capacitor-jw-player';

await JwPlayer.stop();

seekTo()

再生中のメディアを指定した位置までシークします。

import { JwPlayer } from '@capgo/capacitor-jw-player';

await JwPlayer.seekTo({ time: 10 });

上記の表は20個のコアメソッドを一覧にしたものです。リスナーとバージョンヘルパー、および各メソッドの完全なコントラクトは、次のドキュメントに記載されています。 GitHub リポジトリ.

完全なリファレンス

@capgo/capacitor-jw-player を使用して継続

使用している場合 @capgo/capacitor-jw-player の使用方法 ネイティブプラグインの作業を計画するには、次と連携してください: @capgo/capacitor-jw-player @capgo/capacitor-jw-player の実装詳細については、 スタートガイド スタートガイドの実装詳細については、 Capgo プラグインディレクトリ Capgo プラグインディレクトリのプロダクトワークフローについては、 Capgo による Capacitor プラグイン Capgo による Capacitor Plugins の実装詳細、および プラグインの追加または更新 プラグインの追加または更新に関する実装詳細についてはこちら。

よくある質問

JW Player プラグイン FAQ

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

"bun add @capgo/capacitor-jw-player" (または "npm install @capgo/capacitor-jw-player") を実行した後、"bunx cap sync" を実行して、iOS および Android プロジェクトにネイティブの code を反映させてください。アプリの code から "@capgo/capacitor-jw-player" をインポートします。

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

はい。JW Player は Capacitor パッケージであるため、Ionic、React、Vue、Angular、Svelte、およびプレーンな JavaScript を含む、Capacitor 内で動作するあらゆる Web フレームワークで使用可能です。

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

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

@capgo/capacitor-jw-player は無料のオープンソースですか?

はい。code のソースコードは GitHub の https://github.com/Cap-go/capacitor-jw-player/ で公開されており、パッケージは npm から無料でインストールできます。バグ報告やプルリクエストをお待ちしています。

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

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

アプリの審査を待たずに JW Player の変更をリリース

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

Capgo から始める