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.

プレイヤー UX

Prev Next

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

スクリプトコードを変更して UXに関連するオプションを設定する方法について説明します。

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

startMutedInfoNotVisible(ミュート状態を表示)

ミュート状態を表示できます。

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,
        muted: true,
        startMutedInfoNotVisible: true,
        playlist: [
          {
            file: "https://CDNドメイン/example_video_01.mp4",
          },
        ],
      }}
    />
  );
}

seekingPreview(シークバーにサムネイルを表示)

セクションを移動する際にサムネイル画像が表示されます。

参考
  • Standard料金プランでのみご利用いただけます。
  • VODでのみサポートします。
import Hls from "hls.js";
import dashjs from "dashjs";
import { VpePlayer } from "@sgrsoft/vpe-react-sdk";

// 動画(VOD)
export function App() {
  return (
    <VpePlayer
      accessKey="YOUR_ACCESS_KEY"
      hls={Hls}
      dashjs={dashjs}
      platform="pub"
      options={{
        seekingPreview: true,
        playlist: [
          {
            file: "https://CDNドメイン/example_video_01.mp4",
          },
        ],
      }}
    />
  );
}

autoPause(ブラウザ無効化時に自動停止)

タブが無効になると、自動的に再生が停止します。

参考
  • Standard料金プランでのみご利用いただけます。
  • モバイルでは動作しません。
  • Webapp/Webview環境では動作しません。
import Hls from "hls.js";
import dashjs from "dashjs";
import { VpePlayer } from "@sgrsoft/vpe-react-sdk";

// 動画(VOD)
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",
          },
        ],
      }}
    />
  );
}

keyboardShortcut(キーボードショートカットキー)

キーボードショートカットキーの使用有無を設定します。

参考

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

デフォルトショートカットキー

キー 機能
Space 再生 / 一時停止
← → 5秒前 / 後に移動
↑ ↓ ボリュームを5%調整
M ミュート
F フルスクリーン 
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={{
        keyboardShortcut: true,
        playlist: [
          {
            file: "https://CDNドメイン/example_video_01.mp4",
          },
        ],
      }}
    />
  );
}

touchGestures(タッチジェスチャー)

タッチジェスチャーの使用有無を設定します。

参考

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={{
        touchGestures: true,
        playlist: [
          {
            file: "https://CDNドメイン/example_video_01.mp4",
          },
        ],
      }}
    />
  );
}

visibleWatermark/watermarkText(テキストウォーターマーク)

ウォーターマークを有効にしたり、表示するテキストを設定します。

参考
  • 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={{
        visibleWatermark: true,
        watermarkText: "Sample watermark",
        playlist: [
          {
            file: "https://CDNドメイン/example_video_01.mp4",
          },
        ],
      }}
    />
  );
}

watermarkConfig(テキストウォーターマークの詳細設定)

ウォーターマークの移動、位置、透明度などを設定します。

ランダム移動

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={{
        watermarkConfig: {
          randPosition: true,          // ウォーターマークのランダム移動有無
          randPositionInterVal: 5000,  // ランダム移動間隔(ms)
          opacity: 0.4,                // ウォーターマークの透明度
        },
        playlist: [
          {
            file: "https://CDNドメイン/example_video_01.mp4",
          },
        ],
      }}
    />
  );
}

固定位置

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={{
        watermarkConfig: {
          randPosition: false, // ウォーターマークのランダム移動有無
          x: 10,               // 左上の x座標(%単位)
          y: 10,               // 左上の y座標(%単位)
          opacity: 0.4,        // ウォーターマークの透明度
        },
        playlist: [
          {
            file: "https://CDNドメイン/example_video_01.mp4",
          },
        ],
      }}
    />
  );
}

iosFullscreenNativeMode(iOSウェブ全画面表示方式)

iOS Safariのネイティブ全画面表示方式を使用します。

参考
  • Standard料金プランでのみご利用いただけます。
  • iOS Safariでのみ動作します。
  • Playerバージョン 1.1.5以降でサポートします。
  • デフォルト値は trueです。
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={{
        iosFullscreenNativeMode: true,
        playlist: [
          {
            file: "https://CDNドメイン/example_video_01.mp4",
          },
        ],
      }}
    />
  );
}

カスタムボタン

options.iconを使用すると、プレイヤーコントロールバーのデフォルトアイコンを希望する画像や Reactコンポーネントに置き換えることができます。指定されていないアイコンは、デフォルトの Material Designアイコンが維持されます。

参考

UMD環境(静的 HTML/PHP/JSP)では Reactコンポーネントを使用できず、SVGまたは PNG画像のパス(string)のみ使用可能です。

IconOverridesのタイプ

各キーに string または ReactNodeを渡すことができます。

type IconOverrides = {
  bigPlay?: string | ReactNode;        // 大型再生ボタンのアイコン
  play?: string | ReactNode;           // 再生アイコン
  pause?: string | ReactNode;          // 一時停止アイコン
  prev?: string | ReactNode;           // 前のトラックアイコン
  next?: string | ReactNode;           // 次のトラックアイコン
  replay?: string | ReactNode;         // リプレイアイコン
  subtitle?: string | ReactNode;       // 字幕オンアイコン
  subtitleOff?: string | ReactNode;    // 字幕オフアイコン
  fullscreen?: string | ReactNode;     // 全画面表示アイコン
  fullscreenExit?: string | ReactNode; // 全画面表示解除アイコン
  volumeFull?: string | ReactNode;     // ボリューム最大アイコン
  volumeMute?: string | ReactNode;     // ミュートアイコン
  volumeMid?: string | ReactNode;      // ボリューム中間アイコン
  pip?: string | ReactNode;            // PIPアイコン
  setting?: string | ReactNode;        // 設定アイコン
};

値タイプ

タイプ 例 レンダリング方式
string "/icons/play.svg" <img src={url}>でレンダリング
ReactNode <FaPlay/> Reactコンポーネント/JSXをそのままレンダリング
未指定 - デフォルト Material Designアイコンを使用

Reactコンポーネントでのアイコン置き換え

カスタム SVGコンポーネントや react-icons などのアイコンライブラリを活用して、JSXでアイコンを置き換えることができます。

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

// カスタム SVGコンポーネントを定義
function PlayIcon() {
  return (
    <svg viewBox="0 0 24 24" width="1.5em" height="1.5em" fill="#ffffff">
      <polygon points="6,3 20,12 6,21" />
    </svg>
  );
}

function PauseIcon() {
  return (
    <svg viewBox="0 0 24 24" width="1.5em" height="1.5em" fill="#ffffff">
      <rect x="5" y="3" width="4" height="18" />
      <rect x="15" y="3" width="4" height="18" />
    </svg>
  );
}

function FullscreenIcon() {
  return (
    <svg viewBox="0 0 24 24" width="1.5em" height="1.5em" fill="none" stroke="#ffffff" strokeWidth="2">
      <polyline points="15,3 21,3 21,9" />
      <polyline points="9,21 3,21 3,15" />
      <polyline points="21,15 21,21 15,21" />
      <polyline points="3,9 3,3 9,3" />
    </svg>
  );
}

export default function CustomIconPlayer() {
  return (
    <VpePlayer
      hls={Hls}
      accessKey="YOUR_ACCESS_KEY"
      options={{
        playlist: [
          { file: "https://example.com/video/master.m3u8" },
        ],
        autostart: true,
        muted: true,
        aspectRatio: "16/9",
        icon: {
          play: <PlayIcon />,
          pause: <PauseIcon />,
          bigPlay: <PlayIcon />,
          fullscreen: <FullscreenIcon />,
          fullscreenExit: <FullscreenExitIcon />,
          setting: <SettingIcon />,
          volumeFull: <VolumeIcon />,
          volumeMute: <VolumeMuteIcon />,
          volumeMid: <VolumeIcon />,
        },
      }}
    />
  );
}

app/player/page.tsx

画像パスでアイコンを置き換え

SVGまたは PNGファイルのパスを文字列として渡すと、<img> タグとしてレンダリングされます。Reactおよび UMD環境の両方で利用可能です。

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

export default function SvgUrlIconPlayer() {
  return (
    <VpePlayer
      hls={Hls}
      accessKey="YOUR_ACCESS_KEY"
      options={{
        playlist: [
          { file: "https://example.com/video/master.m3u8" },
        ],
        autostart: true,
        muted: true,
        aspectRatio: "16/9",
        icon: {
          play: "/icons/play.svg",
          pause: "/icons/pause.svg",
          bigPlay: "/icons/big-play.svg",
          fullscreen: "/icons/fullscreen.svg",
          fullscreenExit: "/icons/fullscreen-exit.svg",
        },
      }}
    />
  );
}

併用

画像のパスと Reactコンポーネントを併用できます。必要なアイコンのみ指定すると、残りはデフォルトアイコンが維持されます。

"use client";
import Hls from "hls.js";
import { VpePlayer } from "@sgrsoft/vpe-react-sdk";
import { FaPlay, FaPause } from "react-icons/fa";

export default function MixedIconPlayer() {
  return (
    <VpePlayer
      hls={Hls}
      accessKey="YOUR_ACCESS_KEY"
      options={{
        playlist: [
          { file: "https://example.com/video/master.m3u8" },
        ],
        autostart: true,
        muted: true,
        aspectRatio: "16/9",
        icon: {
          // Reactコンポーネント
          play: <FaPlay style={{ fontSize: "1.2rem", color: "#fff" }} />,
          pause: <FaPause style={{ fontSize: "1.2rem", color: "#fff" }} />,
          // イメージパス
          bigPlay: "/icons/big-play.svg",
          fullscreen: "/icons/fullscreen.svg",
          fullscreenExit: "/icons/fullscreen-exit.svg",
        },
      }}
    />
  );
}

app/player/page.tsx

事業者登録番号: 129-86-31394 通信販売業申告番号:第2009-京畿城南-0510号
代表取締役: キム・ユウォン アドレス: 13561 京畿道 城南市 盆唐区 仏亭路6 グリーンファクトリー, 17~26F お客様センターの代表電話: 1544-5876
© NAVER Cloud Corp. All Rights Reserved.