再生関連オプション

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

このページでは、プレイヤー実行時に設定するオプションについて説明します。

基本設定

プレイヤーの再生ソース設定オプションを説明します。

playlist

再生する動画を設定します。
再生ソースは、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

autostartプロパティでプレイヤーの再生ソースを自動再生できます。ユースケースは次の通りです。

<VpePlayer
    ...
    options={{
          autostart: true, // 自動再生(false: 自動再生しない)
          playlist: [ //再生ソース
              {
                  file: 'https://CDNドメイン/example_video_01.mp4'
              },
          ],
        }}
    ...
/>

autoPause

autoPauseプロパティでアプリがバックグラウンドに切り替わった時にプレイヤーの再生ソースを自動停止させることができます。

<VpePlayer
    ...
    options={{
          autostart: true, // 自動再生(false: 自動再生しない)
          playlist: [ //再生ソース
              {
                  file: 'https://CDNドメイン/example_video_01.mp4'
              },
          ],
        }}
    ...
/>

muted

mutedプロパティでプレイヤーを初回再生時にミュート状態で再生できます。ユースケースは次の通りです。

<VpePlayer
    ...
    options={{
          playbackRate: 0.5, // 再生速度調整(デフォルト: 1.0)
          playlist: [ //再生ソース
              {
                  file: 'https://CDNドメイン/example_video_01.mp4'
              },
          ],
        }}
    ...
/>

playRateSetting

playRateSettingプロパティでユーザーが再生速度を直接設定できるように 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'
              },
          ],
        }}
    ...
/>>

repeat

repeatプロパティで動画をループ再生できます。ユースケースは次の通りです。

<VpePlayer
    ...
    options={{
          playlist: [ //再生ソース
              {
                  file: 'https://CDNドメイン/example_video_01.mp4'
              },
          ],
          repeat: true, // ループ再生(false: ループ再生しない)
        }}
    ...
/>

setStartTime

setStartTimeプロパティでライブ配信のように VODを全てのユーザーが同時に同じ区間を視聴するように設定できます。

<VpePlayer
    ...
    options={{
          playlist: [ //再生ソース
              {
                  file: 'https://CDNドメイン/example_video_01.mp4'
              },
          ],
          setStartTime:"2023-02-08 06:07:00+00:00", // 初回公開日の設定
        }}
    ...
/>

字幕設定

playlist.vttプロパティを利用して字幕を提供できます。
VTT形式の CAPTION(字幕)をサポートし、配列形式で複数の字幕を提供できます。
韓国語および英語の字幕を提供するユースケースは、次の通りです。

<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',
                      },
                  ]
              },
          ]
        }}
    ...
/>

メタデータ設定

プレイヤーの上にメタデータの表示有無を設定できます。
フルスクリーン時に右上にメタデータが表示されます。

<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", //プロファイル画像またはチャンネル画像
                  },
              },
          ]
        }}
    ...
/>