Amazon Developer

Console

as

Settings
Sign out
Notifications
Alexa
Amazonアプリストア
AWS
ドキュメント
Support
Contact Us
My Cases

Console

as

開発
設計と開発
公開
リファレンス
サポート

再生モードの選択

再生モードの選択

W3C Media APIを利用してVega OS用のメディアプレーヤーアプリを作成するには、いくつかの方法があります。

  • W3C Media APIを直接使用する： これは、フラット（非ABR）コンテンツを再生する場合に適したアプローチです。
  • W3C Media APIを使用してカスタムJavaScriptプレーヤーを作成する： 開発者は、関連するW3C Media APIを直接統合して、独自のJavaScriptベースのメディアプレーヤーを作成できます。
  • 既存のJavaScriptプレーヤーライブラリを統合する： Shaka Player、hls.js、dash.js、Bitmovin Playerなど、よく知られているJavaScriptメディアプレーヤーライブラリがいくつかあります。開発者は、これらの既存のプレーヤーのいずれかを統合できます。このようなプレーヤーにより、基盤のW3C Media APIが抽象化されます。

Vega SDKのW3C Media APIの概要については、Vega OSでのReact Native W3C Media APIを参照してください。

どのアプローチを採用する場合でも、開発者は、関連する次のW3C仕様と、選択したプレーヤーAPIのドキュメントをよく理解する必要があります。

提供される機能を包括的に理解することで、より多くの情報に基づいた判断が可能になり、Vega OS用のメディアプレーヤーアプリをより適切に実装できます。

アプリでは、コンテンツがフラットかABRかに応じて、以下に説明する再生モードのどちらかを使用する必要があります。

URLモード

URLモードは、MP4ファイルやMP3ファイルなどの非アダプティブコンテンツ形式の再生用に設計されています。このモードでは、HTMLMediaElement.src属性を使用してメディアソースを直接設定します。

オーディオのみの再生の例

次の例は、オーディオのみを再生する簡単な実装を示しています。

クリップボードにコピーしました。


/*
 # Copyright (c) 2025 Amazon.com, Inc. or its affiliates. All rights reserved.
 *
 * 専有／機密情報。 使用にあたってはライセンス条項が適用されます。
 */

import React, {useRef} from 'react';
import {View, Text} from 'react-native';
import {VideoPlayer} from '@amazon-devices/react-native-w3cmedia';

export const App = () => {
  const audio = useRef<VideoPlayer | null>(new AudioPlayer());

  audio.current?.initialize().then(() => {
    audio.current!.autoplay = true;
    audio.current!.src = 'https://<ストリーミングサーバー>.com/audio_only.mp3';
  });

  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'black'}}>
      <Text style={{color: 'white', fontSize: 18}}>Audio Playback</Text>
    </View>
  );
};

この例では、次の処理を実行します。

  • useRef()を使用してVideoPlayerのインスタンスを作成する。
  • プレーヤーを初期化し、再生が自動的に開始されるようにautoplayをtrueに設定する。
  • src属性を使用してオーディオのソースURLを設定する。
  • オーディオ再生を示すテキストを含むシンプルなUIをレンダリングする。

ビデオ再生の例

次の例は、URLモードでのビデオ再生を示しています。

クリップボードにコピーしました。


/*
 # Copyright (c) 2025 Amazon.com, Inc. or its affiliates. All rights reserved.
 *
 * 専有／機密情報。 使用にあたってはライセンス条項が適用されます。
 */

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

export const App = () => {
  const video = useRef<VideoPlayer | null>(new VideoPlayer());

  const onSurfaceViewCreated = async (surfaceHandle: string) => {
    await video.current?.initialize();
    video.current?.setSurfaceHandle(surfaceHandle);
    video.current!.autoplay = true;
    video.current!.src = 'https://<ストリーミングサーバー>.com/av.mp4';
  };

  const onSurfaceViewDestroyed = async (surfaceHandle: string) => {
    video.current?.clearSurfaceHandle(surfaceHandle);
    await video.current?.deinitialize();
    video.current = null;
  };

  return (
    <View style={{flex: 1}}>
      <KeplerVideoSurfaceView
        style={{flex: 1}}
        onSurfaceViewCreated={onSurfaceViewCreated}
        onSurfaceViewDestroyed={onSurfaceViewDestroyed}
      />
    </View>
  );
};

この例では、次の処理を実行します。

  • useRef()を使用してVideoPlayerのインスタンスを作成する。
  • onSurfaceViewCreatedコールバックを実装し、その中で以下を実行する。
    • ビデオプレーヤーを初期化する。
    • setSurfaceHandle()を使用してプレーヤーをサーフェスに関連付ける。
    • 自動再生を有効にする。
    • ビデオのソースURLを設定する。
  • onSurfaceViewDestroyedコールバックを実装し、その中で以下を実行する。
    • サーフェスハンドルを切り離す。
    • プレーヤーの初期化を解除する。
    • プレーヤーの参照をクリーンアップする。
  • ライフサイクルコールバックでコンポーネントをレンダリングする。

オーディオ再生とビデオ再生の主な違いは次のとおりです。

  • サーフェスの管理： ビデオ再生では、onSurfaceViewCreatedコールバックとonSurfaceViewDestroyedコールバックを通じてKeplerVideoSurfaceViewのライフサイクルを管理する必要があります。
  • サーフェスハンドル： ビデオ再生では、setSurfaceHandle()を使用してプレーヤーをレンダリングサーフェスに関連付ける必要があります。
  • クリーンアップ： ビデオ再生では、サーフェスが破棄されたときに、サーフェスハンドルのクリーンアップと初期化解除を正しく実行する必要があります。

MSEモード

MSE（Media Source Extensions）モードは、HLSストリームやDASHストリームなどのアダプティブビットレートコンテンツを再生するために使用します。このモードを使用するには、アダプティブメディアストリームのダウンロードと管理を処理するJavaScriptベースのメディアプレーヤーライブラリを統合する必要があります。

メディアプレーヤーの選択

MSEをサポートするJavaScriptメディアプレーヤーには、次のようなものがあります。

  • オープンソース： Shaka Player、Dash.js、HLS.js、Bitmovin、Video.js
  • 商用： Bitmovinやその他のプロプライエタリソリューション

アプリでは、これらのプレーヤーのいずれかを統合し、Vegaが提供するW3C APIを使用してメディアコンテンツを操作する必要があります。互換性のあるすべてのプレーヤーの一覧については、「サポート対象のライブラリとサービス」のVega互換メディアプレーヤーを参照してください。

Shaka Playerを使用したMSEストリーミングの例

次の例は、Shaka Playerを使用してDASHコンテンツをストリーミングする方法を示しています。

クリップボードにコピーしました。


/*
/*
 # Copyright (c) 2025 Amazon.com, Inc. or its affiliates. All rights reserved.
 *
 * 専有／機密情報。 使用にあたってはライセンス条項が適用されます。
 */

import React, {useRef} from 'react';
import {View} from 'react-native';
import {
  VideoPlayer,
  KeplerVideoSurfaceView,
  KeplerCaptionsView,
} from '@amazon-devices/react-native-w3cmedia';
import {ShakaPlayer, ShakaPlayerSettings} from './shakaplayer/ShakaPlayer';

const content = {
  secure: 'false',
  uri: 'https://<ストリーミングサーバー>.com/dash.mpd',
  drm_scheme: '',
  drm_license_uri: '',
};

const playerSettings: ShakaPlayerSettings = {
  secure: false,
  abrEnabled: true,
};

export const App = () => {
  const videoPlayer = useRef<VideoPlayer | null>(new VideoPlayer());
  const shakaPlayer = useRef<any>(null);

  const onSurfaceViewCreated = async (surfaceHandle: string) => {
    await videoPlayer.current?.initialize();
    videoPlayer.current?.setSurfaceHandle(surfaceHandle);
    videoPlayer.current!.autoplay = true;
    
    shakaPlayer.current = new ShakaPlayer(videoPlayer.current!, playerSettings);
    shakaPlayer.current.load(content, true);
  };

  const onSurfaceViewDestroyed = async (surfaceHandle: string) => {
    videoPlayer.current?.clearSurfaceHandle(surfaceHandle);
    shakaPlayer.current?.unload();
    shakaPlayer.current = null;
    await videoPlayer.current?.deinitialize();
    videoPlayer.current = null;
  };

  const onCaptionViewCreated = (captionsHandle: string) => {
    videoPlayer.current?.setCaptionViewHandle(captionsHandle);
  };

  return (
    <View style={{flex: 1, backgroundColor: 'black'}}>
      <KeplerVideoSurfaceView
        style={{flex: 1}}
        onSurfaceViewCreated={onSurfaceViewCreated}
        onSurfaceViewDestroyed={onSurfaceViewDestroyed}
      />
      <KeplerCaptionsView
        onCaptionViewCreated={onCaptionViewCreated}
        show={true}
        style=
      />

    </View>
  );
};

この例では、次の処理を実行します。

  • コンテンツを構成する： DASHマニフェストURLとDRM設定（必要な場合）を定義します。
  • プレーヤーオプションを設定する： アダプティブビットレート（ABR）ストリーミングを有効にします。
  • ビデオプレーヤーを初期化する： サーフェスが作成されたときに、VideoPlayerインスタンスを作成して初期化します。
  • Shaka Playerを統合する： ShakaPlayerインスタンスを作成し、コンテンツを読み込みます。
  • 字幕を管理する： 字幕のレンダリングのためにKeplerCaptionsViewコンポーネントを設定します。
  • クリーンアップを処理する： サーフェスが破棄されたときに、プレーヤーの読み込み解除とリソースの初期化解除を正しく実行します。

ビルドとテスト

Vega SDKを使用してアプリをビルドし、デバイスまたはシミュレーターで実行します。詳細な手順については、以下のトピックを参照してください。

重要： URLモードとMSEモード

URLモードはアダプティブストリーミングではサポートされません。一部の基本的なアダプティブコンテンツでは、限定的な状況でURLモードが機能する場合がありますが、その動作は保証されません。公式には、URLモードでのアダプティブビットレートストリーミングはサポートされません。

URLモードは次の場合にのみ使用してください。

  • 非アダプティブコンテンツ（MP4、MP3ファイル） • 単純な再生のシナリオ

次の場合はMSEモードを使用してください。

  • アダプティブビットレートコンテンツ（HLS、DASHストリーム）
  • DRMで保護されたコンテンツ
  • ライブストリーミング
  • 高度な再生機能

アダプティブコンテンツでは常に、アダプティブストリーミングプロトコルを適切に処理するJavaScriptベースのメディアプレーヤーライブラリでMSEモードを使用してください。

次の手順

プレーヤーを選択するときは、サポートされている機能、パフォーマンス、コミュニティサポート、ライセンスなどの要素を考慮する必要があります。各プレーヤーから提供されているドキュメントと例を確認して、アプリの要件に最も適しているものを判断してください。プレーヤーを選択したら、その統合ガイドを参照して、React Nativeメディアプレーヤーアプリ内で設定して使用する方法を学びます。これらのプレーヤーのいくつかは既に移植されています。以下を参照してください。

Last updated: 2026年1月13日

フォローする

サポート対象デバイス

amazon_developer_logo

© 2010-2026, Amazon.com, Inc. or its affiliates. All Rights Reserved. 無断複写·転載を禁じます。

利用規約

Amazon開発者ブログ

お問い合わせ