再生設定

Classic/VPC環境で利用できます。

プレイヤーの再生に関するオプションの設定方法をご案内します。

基本設定 - playlist

再生する動画を設定します。再生ソースは、MP4、HLS、DASH形式に対応しています。

<VpePlayer
    accessKey="YOUR_ACCESS_KEY"
    options={{
        playlist: [{
            file: 'https://example.com/video.m3u8',
        }],
    }}
    onBack={() => navigation.goBack()}
/>

複数の動画を再生

playlist プロパティで複数の再生ソースを送信することで、連続再生が可能です。

<VpePlayer
    accessKey="YOUR_ACCESS_KEY"
    options={{
        playlist: [
            {
                file: 'https://example.com/video1.m3u8',
                poster: 'https://example.com/poster1.jpg',
                description: { title: '1番目の動画' },
            },
            {
                file: 'https://example.com/video2.m3u8',
                description: { title: '2番目の動画' },
            },
        ],
        autostart: true,
    }}
    onBack={() => navigation.goBack()}
/>

動的プレイリストの構成

動画再生が完了した後、次に再生する動画を動的に追加できます。

const playerRef = useRef<PlayerHandle>(null);

// 単一の動画を追加
playerRef.current?.addNextSource({
    file: 'https://example.com/new_video.m3u8',
    description: { title: '新しい動画' },
});

// 複数の動画を同時に追加
playerRef.current?.addPrevSource([
    { file: 'https://example.com/video_1.mp4' },
    { file: 'https://example.com/video_2.mp4' },
]);

autostart

autostart プロパティで動画を自動再生できます。デフォルト値は trueです。

<VpePlayer
    accessKey="YOUR_ACCESS_KEY"
    options={{
        autostart: true,
        playlist: [{ file: 'https://example.com/video.m3u8' }],
    }}
    onBack={() => navigation.goBack()}
/>

muted

muted プロパティで初回再生時にミュート状態で再生できます。

<VpePlayer
    accessKey="YOUR_ACCESS_KEY"
    options={{
        muted: true,
        playlist: [{ file: 'https://example.com/video.m3u8' }],
    }}
    onBack={() => navigation.goBack()}
/>

playRateSetting

playRateSetting プロパティでユーザーが再生速度を選択できる UIを提供します。

<VpePlayer
    accessKey="YOUR_ACCESS_KEY"
    options={{
        playRateSetting: [0.5, 0.75, 1, 1.5, 2],
        playlist: [{ file: 'https://example.com/video.m3u8' }],
    }}
    onBack={() => navigation.goBack()}
/>

repeat

repeat プロパティで動画をループ再生できます。

<VpePlayer
    accessKey="YOUR_ACCESS_KEY"
    options={{
        repeat: true,
        playlist: [{ file: 'https://example.com/video.m3u8' }],
    }}
    onBack={() => navigation.goBack()}
/>

字幕設定

playlist.vtt プロパティで字幕を提供できます。VTTおよび SMI形式に対応しており、SMIファイルの EUC-KRエンコードは自動的にデコードされます。

<VpePlayer
    accessKey="YOUR_ACCESS_KEY"
    options={{
        playlist: [{
            file: 'https://example.com/video.m3u8',
            vtt: [
                { id: 'ko', file: 'https://example.com/ko.vtt', label: '韓国語', default: true },
                { id: 'en', file: 'https://example.com/en.vtt', label: 'English' },
                { id: 'ja', file: 'https://example.com/ja.smi', label: '日本語' },
            ],
        }],
    }}
    onBack={() => navigation.goBack()}
/>

lowLatencyMode(ライブ)

lowLatencyMode プロパティで LL-HLS低遅延モードを有効にできます。ライブストリームは自動的に検出されます。

<VpePlayer
    accessKey="YOUR_ACCESS_KEY"
    options={{
        lowLatencyMode: true,
        playlist: [{
            file: 'https://example.com/live.m3u8',
            description: { title: 'ライブ配信' },
        }],
    }}
    onBack={() => navigation.goBack()}
/>

ライブと検出されると、次のように動作します。

• TimeBtnに赤い点と「LIVE」を表示
• 再生速度メニューを非表示
• SeekBar シークを無効化

lowLatencyModeプラットフォーム別動作

lowLatencyMode の有効化時のプラットフォーム別動作は、次の通りです。

5秒以上遅れると、自動的にライブエッジに戻ります。

メタデータ設定

playlist.description プロパティで動画のメタ情報を表示できます。

<VpePlayer
    accessKey="YOUR_ACCESS_KEY"
    options={{
        playlist: [{
            file: 'https://example.com/video.m3u8',
            description: {
                title: 'NAVERクラウドの紹介',
                created_at: '2024.01.01',
                profile_name: 'NAVERクラウド',
                profile_image: 'https://example.com/profile.png',
            },
        }],
    }}
    onBack={() => navigation.goBack()}
/>

ウォーターマーク

visibleWatermark プロパティでウォーターマークを表示できます。

<VpePlayer
    accessKey="YOUR_ACCESS_KEY"
    options={{
        playlist: [{ file: 'https://example.com/video.m3u8' }],
        visibleWatermark: true,
        watermarkText: 'SAMPLE@example.com',
        watermarkConfig: {
            randPosition: true,
            randPositionInterVal: 5000,
            opacity: 0.4,
        },
    }}
    onBack={() => navigation.goBack()}
/>