プレイヤー UX

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

プレイヤー UXを構成・設定するオプションをご案内します。

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

touchGestures プロパティでモバイル UIのタッチジェスチャー機能を有効化できます。

<VpePlayer
  options={{
    playlist: [
      { file: 'https://CDNドメイン/example_video_01.mp4' },
    ],
    touchGestures: true, // タッチジェスチャーを使用する(デフォルト)(false: タッチジェスチャーを使用しない)
  }}
/>

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

watermarkText プロパティで視聴者を追跡できるウォーターマークを、希望するテキスト(ユーザー ID+サイト名など)に設定します。

<VpePlayer
  options={{
    playlist: [
      { file: 'https://CDNドメイン/example_video_01.mp4' },
    ],
    visibleWatermark: true,
    watermarkText: 'UserId@SiteDomain',
  }}
/>

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

テキストウォーターマークを使用する場合、ウォーターマークのランダム位置を有効化するかどうかに応じて詳細オプションを設定できます。ウォーターマークの詳細オプションは、NAVERクラウドプラットフォームコンソールでも設定できます。

ランダム位置の有効化

<VpePlayer
  options={{
    playlist: [
      { file: 'https://CDNドメイン/example_video_01.mp4' },
    ],
    visibleWatermark: true,
    watermarkText: 'UserId@SiteDomain',
    watermarkConfig: {
      randPosition: true,          // ウォーターマークのランダム位置を有効化(デフォルト)
      randPositionInterVal: 5000,  // ランダム変更の間隔(デフォルト値: 3000ms)
    },
  }}
/>

ランダム位置の無効化

<VpePlayer
  options={{
    playlist: [
      { file: 'https://CDNドメイン/example_video_01.mp4' },
    ],
    visibleWatermark: true,
    watermarkText: 'UserId@SiteDomain',
    watermarkConfig: {
      randPosition: false, // ウォーターマークの位置を固定
      x: 10,               // 横位置(%)
      y: 2,                // 縦位置(%)
      opacity: 0.4,        // 透明度(0.1~1)
    },
  }}
/>

全画面表示モード

全画面表示をモーダル(Modal)やカスタムフルスクリーンの中から選択して開発できます。モーダル方式はカスタマイズできませんが、基本的な動作が行われます。カスタム全画面表示は安全領域や動作などを直接コントロールできます。

モーダル型全画面表示

<VpePlayer
  options={{
    playlist: [
      { file: 'https://CDNドメイン/example_video_01.mp4' },
    ],
    modalFullscreen: true, // true: モーダル全画面表示, false: カスタム全画面表示
  }}
/>

カスタム全画面表示

import { View, StatusBar, ScrollView, Text } from 'react-native';
import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
import { VpePlayer } from 'vpe-react-native';
import React, { useRef, useState } from 'react';
import { useNavigation } from '@react-navigation/native';

export default function App() {
  const navigation = useNavigation();
  const [isFullScreen, setIsFullScreen] = useState(false);
  const playerRef = useRef(null);

  return (
    <SafeAreaProvider>
      <SafeAreaView edges={isFullScreen ? ['none'] : ['top', 'left', 'right']} />
      <StatusBar barStyle={'dark-content'} hidden={isFullScreen} />

      <VpePlayer
        ref={playerRef}
        devTestAppId={'com.vpereactnative.example'}
        accessKey={'YOUR_ACCESS_KEY'}
        platform={'pub'}
        events={{
          fullScreen: (data) => {
            setIsFullScreen(data.isFullScreen);
          },
        }}
        options={{
          playlist: [
            { file: 'https://CDNドメイン/example_video_01.mp4' },
          ],
          aspectRatio: '16/9',
          objectFit: 'contain',
          modalFullscreen: false, // カスタム全画面表示
        }}
      />

      {!isFullScreen && (
        <ScrollView style={{ backgroundColor: '#ffffff' }}>
          <View style={{ padding: 10 }}>
            <Text>カスタム全画面表示実装のデモ</Text>
          </View>
        </ScrollView>
      )}
    </SafeAreaProvider>
  );
}

カスタムアイコン

サポートプラットフォーム: Android iOS

VPE React Native SDKは、コントロールバーのすべてのデフォルトアイコンをユーザー定義アイコン(JSX、リモート画像 URL、ローカル require画像、関数型レンダラー)に置き換えることができる IconOverridesシステムを提供します。

値タイプ

• ReactNode: JSXに直接転送
• string: リモート画像 URL → 内部で <Image source={{uri}}/> レンダリング
• number: require('./icon.png') 結果 → ローカル画像
• () => ReactNode: 動的レンダリング用の関数型

使用可能なキー

以下のキーは、Control Barのデフォルトコントロールコンポーネントが参照するアイコン名です。

JSXに置き換え

import { VpePlayer } from 'vpe-react-native';
import { PlayIcon, PauseIcon } from 'phosphor-react-native';

export default function MyPlayer() {
  return (
    <VpePlayer
      accessKey={'YOUR_ACCESS_KEY'}
      options={{
        playlist: [{ file: 'https://CDNドメイン/master.m3u8' }],
        icon: {
          play: <PlayIcon size={28} color="#ffffff" weight="fill" />,
          pause: <PauseIcon size={28} color="#ffffff" weight="fill" />,
        },
      }}
    />
  );
}

画像に置き換え

<VpePlayer
  accessKey={'YOUR_ACCESS_KEY'}
  options={{
    playlist: [{ file: 'https://CDNドメイン/master.m3u8' }],
    icon: {
      play: 'https://example.com/icons/play.png', // リモート画像 URL(string)
      pause: require('./assets/pause.png'),        // ローカル画像(require → number)
      fullscreen: () => <MyFullscreenIcon />,      // 関数型レンダラー
    },
  }}
/>