再生設定

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

プレイヤー再生に関連するオプションの設定方法について説明します。

再生動作

autostart(自動再生)

再生ソースを自動的に開始します。

const player = new ncplayer("player", {
  autostart: true, // 自動再生(false: 自動再生しない)
  playlist: [
    {
      file: "https://example.com/video/master.m3u8",
    },
  ],
});

自動再生は、以下の条件のうち1つ以上を満たす場合にのみ動作します。

• ミュートになっているか、ボリュームが0の場合
• クリック、タッチ、キー入力など、ユーザーによる入力が発生した場合
• 環境設定でホワイトリストページに設定されている場合
• 自動再生をサポートする iframeと当該ドキュメントが設定されている場合

muted(ミュート)

プレイヤーの初回再生時、ミュート状態で再生します。

const player = new ncplayer("player", {
  muted: true, // 初回再生時にミュート(false: ミュートしない)
  playlist: [
    {
      file: "https://example.com/video/master.m3u8",
    },
  ],
});

repeat(ループ再生)

動画をループ再生します。プレイリストが複数ある場合、最後の再生が終わると最初の動画に戻ります。

const player = new ncplayer("player", {
  repeat: true, // ループ再生(false: ループ再生しない)
  playlist: [
    {
      file: "https://example.com/video/master.m3u8",
    },
  ],
});

setStartTime(初回公開日の設定)

ライブ配信と同様に、すべてのユーザーが同時に同じセクションの VODを視聴できるように設定します。

const player = new ncplayer("player", {
  autoPause: true,
  playlist: [
    {
      file: "https://example.com/video/master.m3u8",
    },
  ],
  setStartTime: "2023-02-08 06:07:00+00:00", // 初回公開日の設定
});

再生制御

playbackRate(再生速度)

再生速度を調整します。指定がない場合のデフォルト値は 1.0です。

const player = new ncplayer("player", {
  muted: true,
  playbackRate: 0.5, // 再生速度調整(デフォルト: 1.0)
  playlist: [
    {
      file: "https://example.com/video/master.m3u8",
    },
  ],
});

playRateSetting(再生速度調整 UI)

ユーザーが再生速度を設定できるように、UIを提供します。

const player = new ncplayer("player", {
  muted: true,
  playRateSetting: [0.5, 0.75, 1.0, 1.25, 1.5, 1.75, 2.0],
  playlist: [
    {
      file: "https://example.com/video/master.m3u8",
    },
  ],
});

lowLatencyMode(超低遅延モード)

Low Latency HLSに最適化されたプレイヤーを適用します。Live Stationサービスの Low Latency HLSを公式にサポートするモードです。

const player = new ncplayer("player", {
  playlist: [
    {
      file: "https://example.com/live/index.m3u8",
    },
  ],
  lowLatencyMode: true, // LL-HLSを使用する(false: LL-HLSを使用しない)
});

画面表示

aspectRatio(画面アスペクト比)

プレイヤー領域の画面アスペクト比を設定します。"16/9"、"4/3"、"1/1"、"9/16"、"auto" などをサポートします。

const player = new ncplayer("player", {
  aspectRatio: '16/9', //アスペクト比を指定
  playlist: [
    {
      file: "https://example.com/video/master.m3u8",
    },
  ],
});

objectFit(全画面表示)

動画が画面領域に合わせる方法を設定します。contain、cover、fill、scale-down、stretchをサポートします。

const player = new ncplayer("player", {
  objectFit: "cover", // 動画の表示方法を指定
  playlist: [
    {
      file: "https://example.com/video/master.m3u8",
    },
  ],
});

字幕設定(vtt)

VTT形式の字幕ファイルをリンクします。playlist 項目の vtt 配列に字幕情報を指定します。

const player = new ncplayer("player", {
  playlist: [
    {
      file: "https://example.com/video/master.m3u8",
      poster: "https://example.com/poster.jpg",
      vtt: [
        {
          file: "https://example.com/subtitle_ko.vtt",
          label: "韓国語",
          language: "ko",
          default: true, // デフォルトの字幕設定
        },
        {
          file: "https://example.com/subtitle_en.vtt",
          label: "English",
          language: "en",
        },
      ],
    },
  ],
});

メタデータ設定(description)

動画のタイトル、チャンネル名、プロファイル画像などのメタデータの表示有無を設定します。設定されたメタデータはプレイヤーの上部に表示されます。

const player = new ncplayer("player", {
  playlist: [
    {
      file: "https://example.com/video/master.m3u8",
      poster: "https://example.com/poster.jpg",
      description: {
        title: "動画タイトル",
        profile_name: "チャンネル名",
        profile_image: "https://example.com/profile.png",
        created_at: "2026.01.01",
      },
    },
  ],
  autostart: true,
  muted: true,
});