Classic/VPC環境で利用できます。
プレイヤー再生に関連するオプションの設定方法について説明します。
サポートプラットフォーム: Android iOS
再生ソース
プレイリストの基本設定
再生する動画を設定します。再生ソースは、mp4、hls、dash形式に対応しています。
<VpePlayer
options={{
playlist: [
{
file: 'https://CDNドメイン/example_video_01.mp4',
},
],
}}
/>
複数の動画を再生
playlist プロパティで複数の再生ソースを送信することで、連続再生が可能です。また、複数の動画再生機能をオーバーライド(Override)でき、次に再生する映像を動的プレイリストで構成できます。
<VpePlayer
options={{
playlist: [
{
file: 'https://CDNドメイン/example_video_01.mp4',
poster: 'https://CDNドメイン/example_image_01.png',
},
{
file: 'https://CDNドメイン/example_video_02.mp4',
poster: 'https://CDNドメイン/example_image_02.png',
},
{
file: 'https://CDNドメイン/example_video_03.mp4/index.m3u8',
poster: 'https://CDNドメイン/example_image_03.png',
},
],
}}
/>
動的プレイリストの構成
動画再生が完了した後、次に再生する動画を動的に追加できます。
const playerRef = useRef(null);
return (
<>
<VpePlayer
ref={playerRef}
options={{
playlist: [
{
file: 'https://CDNドメイン/example_video_01.mp4',
poster: 'https://CDNドメイン/example_image_01.png',
},
],
}}
/>
<TouchableOpacity onPress={() => {
playerRef.current.addNextSource({
file: 'https://CDNドメイン/example_video_02.mp4',
poster: 'https://CDNドメイン/example_image_02.png',
});
}}>
次の動画を追加
</TouchableOpacity>
<TouchableOpacity onPress={() => {
playerRef.current.addPrevSource({
file: 'https://CDNドメイン/example_video_02.mp4',
poster: 'https://CDNドメイン/example_image_02.png',
});
}}>
前の動画を追加
</TouchableOpacity>
</>
);
再生動作
autostart(自動再生)
再生ソースを自動的に開始します。
<VpePlayer
options={{
autostart: true, // 自動再生(false: 自動再生しない)
playlist: [
{
file: 'https://CDNドメイン/example_video_01.mp4',
},
],
}}
/>
autoPause(自動停止)
アプリがバックグラウンドに移行すると、自動的に再生が停止します。
参考
Picture in Picture機能が有効になるには、autoPause: trueになる必要があります。
<VpePlayer
options={{
autoPause: true, // 自動停止(false: 自動停止しない)
playlist: [
{
file: 'https://CDNドメイン/example_video_01.mp4',
},
],
}}
/>
muted(ミュート)
プレイヤーの初回再生時、ミュート状態で再生します。
<VpePlayer
options={{
muted: true, // 初回再生時にミュート(false: ミュートしない)
playlist: [
{
file: 'https://CDNドメイン/example_video_01.mp4',
},
],
}}
/>
repeat(ループ再生)
動画をループ再生します。
<VpePlayer
options={{
playlist: [
{
file: 'https://CDNドメイン/example_video_01.mp4',
},
],
repeat: true, // ループ再生(false: ループ再生しない)
}}
/>
setStartTime(初回公開日の設定)
ライブ配信と同様に、すべてのユーザーが同時に同じセクションの VODを視聴できるように設定します。
<VpePlayer
options={{
playlist: [
{
file: 'https://CDNドメイン/example_video_01.mp4',
},
],
setStartTime: "2023-02-08 06:07:00+00:00", // 初回公開日の設定
}}
/>
再生制御
playbackRate(再生速度)
再生速度を調整します。デフォルト値は 1.0であり、これより小さい値に設定すると遅く、大きい値に設定すると速くなります。
<VpePlayer
options={{
playbackRate: 0.5, // 再生速度調整(デフォルト: 1.0)
playlist: [
{
file: 'https://CDNドメイン/example_video_01.mp4',
},
],
}}
/>
playRateSetting(再生速度調整 UI)
ユーザーが再生速度を設定できるように、UIを提供します。
<VpePlayer
options={{
playRateSetting: [0.5, 0.75, 1.0, 1.25, 1.5, 1.75, 2.0], //0.5倍速~2倍速
playlist: [
{
file: 'https://CDNドメイン/example_video_01.mp4',
},
],
}}
/>
lowLatencyMode(超低遅延モード)
Low Latency HLSに最適化されたプレイヤーを適用します。Live Stationサービスの Low Latency HLSを公式にサポートするモードです。
<VpePlayer
options={{
playlist: [
{
file: 'https://CDNドメイン/example_video_01.mp4',
},
],
lowLatencyMode: true, // LL-HLSを使用する(false: LL-HLSを使用しない)
}}
/>
字幕設定(vtt)
VTT形式の字幕ファイルをリンクします。playlist 項目の vtt 配列に字幕情報を指定します。
<VpePlayer
options={{
playlist: [
{
file: 'https://CDNドメイン/example_video_01.mp4',
vtt: [
{
id: 'ko',
file: 'https://vpe.sgrsoft.com/ncp_overview_script_kr_v2.vtt',
label: 「韓国語」、
default: true,
},
{
id: 'en',
file: 'https://vpe.sgrsoft.com/ncp_overview_script_en_v2.vtt',
label: 'English',
},
],
},
],
}}
/>
メタデータ設定(description)
プレイヤー上部でメタデータの表示有無を設定します。フルスクリーン時に右上にメタデータが表示されます。
<VpePlayer
options={{
playlist: [
{
file: 'https://CDNドメイン/example_video_01.mp4',
description: {
title: "NAVERクラウドの紹介",
created_at: "2023.01.01",
profile_name: "NAVERクラウド",
profile_image: "https://CDNドメイン/example_image_profile.png",
},
},
],
}}
/>