Documentation Index

Fetch the complete documentation index at: https://guide.ncloud-docs.com/llms.txt

Use this file to discover all available pages before exploring further.

再生設定

Prev Next

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

参考
  • オプションを設定するプロパティに関する説明は、オプションリファレンスをご参照ください。
  • ご利用中の料金プランによって、設定可能なオプションが異なる場合があります。

再生動作

autostart(自動再生)

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

import Hls from "hls.js";
import dashjs from "dashjs";
import { VpePlayer } from "@sgrsoft/vpe-react-sdk";

// 動画(MP4)
export function App() {
  return (
    <VpePlayer
      accessKey="YOUR_ACCESS_KEY"
      hls={Hls}
      dashjs={dashjs}
      platform="pub"
      options={{
        autostart: true, // 自動再生(false: 自動再生しない)
        playlist: [
          {
            file: "https://CDNドメイン/example_video_01.mp4",
          },
        ],
      }}
    />
  );
}

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

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

autoPause(自動停止)

タブを切り替えたりウィンドウを最小化すると、自動的に再生が停止します。

import Hls from "hls.js";
import dashjs from "dashjs";
import { VpePlayer } from "@sgrsoft/vpe-react-sdk";

// 動画(MP4)
export function App() {
  return (
    <VpePlayer
      accessKey="YOUR_ACCESS_KEY"
      hls={Hls}
      dashjs={dashjs}
      platform="pub"
      options={{
        autoPause: true, // 自動停止(false: 自動停止しない)
        playlist: [
          {
            file: "https://CDNドメイン/example_video_01.mp4",
          },
        ],
      }}
    />
  );
}

muted(ミュート)

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

import Hls from "hls.js";
import dashjs from "dashjs";
import { VpePlayer } from "@sgrsoft/vpe-react-sdk";

// 動画(MP4)
export function App() {
  return (
    <VpePlayer
      accessKey="YOUR_ACCESS_KEY"
      hls={Hls}
      dashjs={dashjs}
      platform="pub"
      options={{
        muted: true, // 初回再生時にミュート(false: ミュートしない)
        playlist: [
          {
            file: "https://CDNドメイン/example_video_01.mp4",
          },
        ],
      }}
    />
  );
}

repeat(ループ再生)

動画をループ再生します。

import Hls from "hls.js";
import dashjs from "dashjs";
import { VpePlayer } from "@sgrsoft/vpe-react-sdk";

// 動画(MP4)
export function App() {
  return (
    <VpePlayer
      accessKey="YOUR_ACCESS_KEY"
      hls={Hls}
      dashjs={dashjs}
      platform="pub"
      options={{
        repeat: true, // ループ再生(false: ループ再生しない)
        playlist: [
          {
            file: "https://CDNドメイン/example_video_01.mp4",
          },
        ],
      }}
    />
  );
}

setStartTime(初回公開日の設定)

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

参考

Standard料金プランでのみご利用いただけます。

  • VODにのみ適用されます。
  • 日付のフォーマットは UTC形式に対応しています。
import Hls from "hls.js";
import dashjs from "dashjs";
import { VpePlayer } from "@sgrsoft/vpe-react-sdk";

// 動画(MP4)
export function App() {
  return (
    <VpePlayer
      accessKey="YOUR_ACCESS_KEY"
      hls={Hls}
      dashjs={dashjs}
      platform="pub"
      options={{
        autoPause: true,
        playlist: [
          {
            file: "https://CDNドメイン/example_video_01.mp4",
          },
        ],
        setStartTime: "2023-02-08 06:07:00+00:00", // 初回公開日の設定
      }}
    />
  );
}

再生制御

playbackRate(再生速度)

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

import Hls from "hls.js";
import dashjs from "dashjs";
import { VpePlayer } from "@sgrsoft/vpe-react-sdk";

// 動画(MP4)
export function App() {
  return (
    <VpePlayer
      accessKey="YOUR_ACCESS_KEY"
      hls={Hls}
      dashjs={dashjs}
      platform="pub"
      options={{
        muted: true,
        playbackRate: 0.5, // 再生速度調整(デフォルト: 1.0)
        playlist: [
          {
            file: "https://CDNドメイン/example_video_01.mp4",
          },
        ],
      }}
    />
  );
}

playRateSetting(再生速度調整 UI)

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

参考

Standard料金プランでのみご利用いただけます。

import Hls from "hls.js";
import dashjs from "dashjs";
import { VpePlayer } from "@sgrsoft/vpe-react-sdk";

// 動画(MP4)
export function App() {
  return (
    <VpePlayer
      accessKey="YOUR_ACCESS_KEY"
      hls={Hls}
      dashjs={dashjs}
      platform="pub"
      options={{
        muted: true,
        playRateSetting: [0.5, 0.75, 1.0, 1.25, 1.5, 1.75, 2.0],
        playlist: [
          {
            file: "https://CDNドメイン/example_video_01.mp4",
          },
        ],
      }}
    />
  );
}

lowLatencyMode(超低遅延モード)

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

参考

Standard料金プランでのみご利用いただけます。

import Hls from "hls.js";
import dashjs from "dashjs";
import { VpePlayer } from "@sgrsoft/vpe-react-sdk";

// 動画(HLS)
export function App() {
  return (
    <VpePlayer
      accessKey="YOUR_ACCESS_KEY"
      hls={Hls}
      dashjs={dashjs}
      platform="pub"
      options={{
        playlist: [
          {
            file: "https://CDNドメイン/example_video_01.mp4/index.m3u8",
          },
        ],
        lowLatencyMode: true, // LL-HLSを使用する(false: LL-HLSを使用しない)
      }}
    />
  );
}

OTT設定

OTTサービスに必要なイントロ/オープニング/エンディングのスキップ機能、年齢区分表示、コンテンツ警告機能を playlist アイテム単位で設定します。

参考

詳しい使用方法については、OTT 特化機能のドキュメントをご参照ください。

イントロ/オープニング/エンディングのスキップ

各セクションの開始時点と継続時間を設定すると、その時点でスキップボタンが自動的に表示されます。

import Hls from "hls.js";
import { VpePlayer } from "@sgrsoft/vpe-react-sdk";

export function App() {
  return (
    <VpePlayer
      accessKey="YOUR_ACCESS_KEY"
      hls={Hls}
      options={{
        autostart: true,
        muted: true,
        playlist: [
          {
            file: "https://CDNドメイン/episode_01.m3u8",
            intro: {
              start: "00:00:00", // HH:MM:SS形式
              duration: 5,       // 秒単位
            },
            opening: {
              start: "00:00:05",
              duration: 90,
            },
            ending: {
              start: "00:45:00",
              duration: 60,
            },
          },
        ],
      }}
    />
  );
}

ageRating(年齢区分表示)

再生開始時に年齢区分オーバーレイを表示します。
対応値: "all" "12" "15" "19"

import Hls from "hls.js";
import { VpePlayer } from "@sgrsoft/vpe-react-sdk";

export function App() {
  return (
    <VpePlayer
      accessKey="YOUR_ACCESS_KEY"
      hls={Hls}
      options={{
        autostart: true,
        muted: true,
        playlist: [
          {
            file: "https://CDNドメイン/episode_01.m3u8",
            description: {
              title: "ドラマ シーズン1 EP.01",
            },
            ageRating: "15", // 15歳以上対象
          },
        ],
      }}
    />
  );
}

contentWarnings(コンテンツ警告)

コンテンツに含まれるセンシティブな要素(暴力、扇情性など)について、視聴者にご案内する警告オーバーレイを表示します。
推奨キー: "sexuality" "violence" "language" "drugs" "horror" "imitation" "provocative"

import Hls from "hls.js";
import { VpePlayer } from "@sgrsoft/vpe-react-sdk";

export function App() {
  return (
    <VpePlayer
      accessKey="YOUR_ACCESS_KEY"
      hls={Hls}
      options={{
        autostart: true,
        muted: true,
        playlist: [
          {
            file: "https://CDNドメイン/episode_01.m3u8",
            contentWarnings: ["violence", "language"],
          },
        ],
      }}
    />
  );
}
事業者登録番号: 129-86-31394 通信販売業申告番号:第2009-京畿城南-0510号
代表取締役: キム・ユウォン アドレス: 13561 京畿道 城南市 盆唐区 仏亭路6 グリーンファクトリー, 17~26F お客様センターの代表電話: 1544-5876
© NAVER Cloud Corp. All Rights Reserved.