JSアプローチを使用したクライアント側広告挿入の実装

import { VideoPlayer, KeplerVideoSurfaceView } from '@amazon-devices/react-native-w3cmedia';

// プレーヤーの参照
const videoPlayer = useRef<VideoPlayer | null>(null);       // メインコンテンツプレーヤー（既に初期化済み）
const adVideoPlayer = useRef<VideoPlayer | null>(null);     // 広告プレーヤー
const cachedSurface = useRef<any>(null);                    // 共有サーフェスハンドル

const onAdReady = () => {
  // 広告がバッファリングされました。スケジュールされた広告の開始時間まで待機します。
  // 位置リスナーで広告の開始時間になったことが検出されたら、次の処理を実行します。
  videoPlayer.current?.pause();
};

videoPlayer.current.addEventListener('pause', () => {
  // メインプレーヤーサーフェスを消去し、広告プレーヤーに割り当てます。
  videoPlayer.current?.clearSurfaceHandle(cachedSurface.current);
  adVideoPlayer.current?.setSurfaceHandle(cachedSurface.current);
  adVideoPlayer.current?.play();
});

const onAdEnded = async () => {
  adVideoPlayer.current?.clearSurfaceHandle(cachedSurface.current);
  videoPlayer.current?.setSurfaceHandle(cachedSurface.current);
  videoPlayer.current?.play();
  await adVideoPlayer.current?.deinitialize();
  adVideoPlayer.current = null;
};

const cleanup = async () => {
  if (adVideoPlayer.current) {
    await adVideoPlayer.current.deinitialize();
    adVideoPlayer.current = null;
  }
  // メインプレーヤーのクリーンアップはアプリの既存のティアダウンロジックによって処理します。
};