メディアプレーヤーチュートリアル
このチュートリアルでは、DRMコンテンツを再生するプロセスと、W3C要素に基本的なビジネスロジックを実装するプロセスについて説明します。
これはゼロから構築された新しいソフトウェアスタックであり、一部のコンテンツ形式では、再生に失敗したり、再生に関する問題（再生開始の失敗、ビデオフレームのドロップ、A/V同期など）が発生したりする可能性があります。Amazonアプリストアではコンテンツのカバレッジ拡大に継続的に取り組んでおり、アプリ開発パートナーがコンテンツの再生に関する問題の根本原因を特定するのに十分な情報を共有できるようにすることを目指しています。
前提条件
WC3メディアプレーヤーを使用するようにアプリを設定します。詳細については、メディアプレーヤーのセットアップを参照してください。
Vega SDKのW3C Media APIの概要については、Vega向けReact NativeのW3C Media APIを参照してください。プレーヤーは以下の仕様を実装します。
Shaka Playerとサポートされるさまざまな構成の詳細については、Shaka Player（英語のみ）を参照してください。
非アダプティブ（MP4、MP3）コンテンツの再生
このセクションでは、HTMLMediaElement.src属性を使用して非アダプティブ（MP4、MP3）コンテンツを「URLモード」で再生する方法について説明します。Shaka Playerを使用したアダプティブメディアストリーミングコンテンツについては、この後のセクションで説明します。
- src/App.tsxファイルを開き、その内容を以下のコードに置き換えます。このコードは、
<VegaVideoSurfaceView>コンポーネントと<VegaCaptionView>コンポーネントをレンダーツリーに追加し、VideoPlayerコンポーネントに関連付けます。VideoPlayerコンポーネントでは、autoplay値を使用して、ビデオコンポーネントの読み込み時にビデオの再生を開始するかどうかを指定します。コンテンツが音声のみの場合、<VegaVideoSurfaceView>および<VegaCaptionView>の追加は任意です。
/*
* Copyright (c) 2024 Amazon.com, Inc. or its affiliates. All rights reserved.
*
* 専有／機密情報。 使用にあたってはライセンス条項が適用されます。
*/
// reactパッケージとreact-nativeパッケージから必要なコンポーネントをインポートします。
import React from 'react';
import {useRef, useEffect, useState} from 'react';
import {View} from 'react-native';
// NPMパッケージ（@mazon-devices/react-native-w3cmedia）からVideoPlayerコンポーネントをインポートします。
import {VideoPlayer, VegaVideoView} from '@amazon-devices/react-native-w3cmedia';
// ここにコンテンツを追加します。
const content = {
uri: 'https://html5demos.com/assets/dizzy.mp4',
};
export const App = () => {
// ビデオコンポーネントへの参照を宣言します。
const video = useRef<VideoPlayer | null>(null);
const [useVegaVideoView, setUseVegaVideoView] = useState(false);
useEffect(() => {
console.log('AppNonAdaptive v1.13');
initializingPreBuffering();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
const initializingPreBuffering = async () => {
video.current = new VideoPlayer();
await video.current.initialize();
video.current!.autoplay = false;
video.current.src = content.uri; // HTMLMediaElementのsrc属性を設定します。
setUseVegaVideoView(true);
console.log(
'AppNonAdaptiveの初期化が完了しました。KeplerVideoViewをtrueに設定しました。',
);
};
// VegaVideoViewコンポーネントをレンダーツリーに追加します。
return (
<View>
{useVegaVideoView ? (
<VegaVideoView
showControls={true}
videoPlayer={video.current as VideoPlayer}
/>
) : null}
</View>
);
};
Vega SDKを使用してアプリをビルドし、デバイスまたはシミュレーターで実行してログを収集します。アプリをビルドしてシミュレーターで実行する方法の詳細については、Vegaアプリの作成、Vega仮想デバイス、Fire TV Stickでのアプリの実行を参照してください。
次の手順
Shaka Playerを使用してコンテンツを再生します。Shaka Playerを使用したアダプティブストリーミングコンテンツ（HLS/DASH）の再生を参照してください。
デバイスでのコンテンツの再生については、Fire TVデバイスのメディアプレーヤーを参照してください。
関連リソース
Last updated: 2025年9月30日
