プレイヤー UXのオプション

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

このページでは、プレイヤー UXを構成・設定するオプションについてご案内します。

touchGestures

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

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

テキストウォーターマーク

watermarkTextプロパティで視聴者を追跡できるウォーターマークを希望するテキスト(ユーザー ID+サイト名など)に設定します。
この機能を使用するには、コンソールでそのプレイヤーのウォーターマーク設定を有効にする必要があります。ウォーターマークの有効化に関する詳細は、プレイヤー設定をご参照ください。
ウォーターマークテキストは、スクリプトを介してのみ追加できます。

Video Player Enhancementオプションガイド - プレイヤー設定

<VpePlayer
    ...
    options={{
          playlist: [ //再生ソース
              {
                  file: 'https://CDNドメイン/example_video_01.mp4'
              },
          ],
          visibleWatermark:true, // テキストウォーターマークを使用する(false(デフォルト): テキストウォーターマークを使用しない)
          watermarkText:'UserId@SiteDomain', // ウォーターマークテキスト、例) 視聴者を追跡できるユーザー ID+サイト名
        }}
    ...
/>

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

テキストウォーターマークを使用する場合、ウォーターマークのランダム位置を有効化有無に応じて詳細オプションを設定できます。
ウォーターマークの詳細オプションは、NAVERクラウドプラットフォームコンソールでも設定できます。詳細は、プレイヤー設定をご参照ください。
ランダム位置の有効化と無効化のユースケースは、次の通りです。

ランダム位置の有効化

<VpePlayer
    ...
    options={{
          playlist: [ //再生ソース
              {
                  file: 'https://CDNドメイン/example_video_01.mp4'
              },
          ],
          visibleWatermark:true, // コンソールでのみ設定可能(false(デフォルト): テキストウォーターマークを使用しない)
          watermarkText:'UserId@SiteDomain', // 例) 視聴者を追跡できるユーザー ID+サイト名
          watermarkConfig:{
              randPosition: true, // ウォーターマークのランダム位置を有効化(デフォルト)
              randPositionInterVal: 5000, // ウォーターマーク位置のランダム変更時間、デフォルト: 3000(3秒)
          }
        }}
    ...
/>

ランダム位置の無効化

<VpePlayer
    ...
    options={{
          playlist: [ //再生ソース
              {
                  file: 'https://CDNドメイン/example_video_01.mp4'
              },
          ],
          visibleWatermark:true, // コンソールでのみ設定可能(false(デフォルト): テキストウォーターマークを使用しない)
          watermarkText:'UserId@SiteDomain', // 例) 視聴者を追跡できるユーザー ID+サイト名
          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: false, //true: プレイヤーモーダル、false: カスタムフルスクリーン
        }}
    ...
/>

カスタムフルスクリーン

import { View, StatusBar, ScrollView, TouchableOpacity, 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 ? true : false} />

      <VpePlayer
        ref={playerRef}
        devTestAppId={'com.vpereactnative.example'}
        accessKey={'fe9d753ee708a519716e18a7ed8bd989'}
        platform={'pub'}
        stage={'prod'}
        
        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 }}>
            <View>
              <Text>カスタムフルスクリーン実現のデモ</Text>
            </View>
            <View>
              <Text>react-native-safe-area-context利用のユースケース</Text>
            </View>
          </View>
        </ScrollView>
      )}
    </SafeAreaProvider>
  );
}