Props設定

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

このページでは、プレイヤー構成時に使用できるプロパティについて説明します。

devTestAppId

VPEはアプリ IDベースのライセンスが設定されます。開発環境でアプリ IDを開発専用に設定して、タスクが行えるようにサポートするプロパティです。

<VpePlayer
    ...
    devTestAppId={'TEST DEV AppID'} //EXPO GO対応、開発モードのみで使用
    ...
>
</VpePlayer>

accessKey

VPEはライセンスキーを設定します。

<VpePlayer
   ...
   accessKey={'VPE ACCESS KEY'} //AppIDと一致する Access Key
   ...
>
</VpePlayer>

platform

VPE React Native SDKは民間(pub) / 公共(gov)をサポートします。デフォルト値は民間(pub)です。

<VpePlayer
   ...
   platform={'pub'} //pub: 民間、gov: 公共
   ...
>
</VpePlayer>

events

VPE React Native SDKでプレイヤーイベントをバインドする機能を提供します。

<VpePlayer
  ...
  events={{
      ready: () => {
          console.log('player ready')
      },
      fullScreen: (data) => {
          setIsFullScreen(data.isFullScreen);
      },
      timeupdate: (data) => {
          console.log('動画全体の長さ(duration) : ', data.duration);
          console.log('現在の再生位置 (currentTime) : ', data.currentTime);
          console.log('現在の再生パーセント(percent) : ', data.percent);
          console.log('累計再生時間(viewingTime) : ', data.viewingTime);
          console.log('再生ソースタイプ(sourceType) : ', data.sourceType); // 再生ソースタイプ(vod, live)
      },
      nextTrack: (data) => {
          console.log(data);
      },
      prevTrack: (data) => {
          console.log(data);
      },
      volumechange: (data) => {
          console.log(data);
      },
      play: () => {
          console.log('play');
      },
      pause: () => {
          console.log('pause');
      },
      ended: () => {
          console.log('ended');
      },
      controlbarActive: () => {
          console.log('controlbarActive');
      },
      controlbarDeactive: () => {
          console.log('controlbarDeactive');
      },
      error: (data) => {
        console.log('error', data);
      },

  }}
  ...
>
</VpePlayer>

options

VPEプレイヤーオプションを設定します。

<VpePlayer
 ...
 options={{
       playlist: [ //再生ソース
           {
               file: 'https://m4qgahqg2249.edge.naverncp.com/hls/a4oif2oPHP-HlGGWOFm29A__/endpoint/sample/221027_NAVER_Cloud_intro_Long_ver_AVC_,FHD_2Pass_30fps,HD_2Pass_30fps,SD_2Pass_30fps,.mp4.smil/master.m3u8',
               
           },
       ],
       autostart: true, //自動再生の有無
       muted: true, //ミュートの有無
       aspectRatio: '16/9', //画面アスペクト比
       
   }}
 ...
>
</VpePlayer>

• VPEプレイヤーオプションは別のページで説明します。
  Video Player Enhancementオプションガイド

backButton

VPEプレイヤーに巻き戻しボタンを追加します。

<VpePlayer
    ...
    backButton={() => { //巻き戻しボタンを追加
          return (
                  <TouchableOpacity
                          onPress={() => {
                              //巻き戻しボタンを実現
                          }}
                  >
                      <CaretLeftIcon size={22} color={'#ffffff'} />
                  </TouchableOpacity>
          );
      }}
    ...
>
</VpePlayer>

override

VPEプレイヤーに基本機能を直接 Overrideして望む機能を実現できます。

<VpePlayer
    ...
    override={{
    nextSource: () => {
      Alert.alert(`nextSource`);
    },
    prevSource: () => {
      Alert.alert(`prevSource`);
    },
    fullscreen: () => {
      Alert.alert(`fullscreen`);
    },
  }}
    ...
>
</VpePlayer>

errorOverride

基本的に提供されるエラー画面を顧客会社が希望するコードに変更して実行できます。
エラー画面をオーバーライドすると、次の変更画面のように最後の再生位置で停止(pause)ステータスを維持したままプレイヤーオーバーレイでエラー画面を実装できます。

<VpePlayer
  ...
  errorOverride={(res) => {
    return (
      <>
        <View>
          <Text style={{ color: '#ffffff', fontSize: 30 }}>⚠️</Text>
        </View>
        <View>
          <Text style={{ color: '#ffffff', fontSize: 16, paddingVertical: 8 }}>
            {res.error.title}
          </Text>
        </View>
        <View>
          <Text style={{ color: '#ffffff', fontSize: 12, opacity: 0.8 }}>({res.error.desc})</Text>
        </View>
        <View>
          <Text style={{ color: '#ffffff', fontSize: 12, opacity: 0.8, paddingTop: 10 }}>
            サポートセンター: 1588-0001
          </Text>
        </View>
      </>
    );
  }}
  ...
>
</VpePlayer>

カスタムボタン追加

customBtnsプロパティでプレイヤーにカスタムボタンを追加し、新しい機能を提供できます。 カスタムボタンは位置に関係なく最大4つまで追加できます。

positionおよび flowプロパティ設定ごとのカスタムボタンの位置は、次の通りです。

<VpePlayer
    ...
    customButton={[
      {
        position: 'right-bottom',
        flow: 'left',
        button: () => {
          return (
            <TouchableOpacity
              onPress={() => {
                Alert.alert('test11');
              }}
            >
              <ChatCircleIcon size={22} color={'#ffffff'} weight={'fill'} />
            </TouchableOpacity>
          );
        },
      },
    
      {
        position: 'right-top',
        flow: 'left',
        button: () => {
          return (
            <TouchableOpacity
              onPress={() => {
                Alert.alert('test11');
              }}
            >
              <InfoIcon size={22} color={'#ffffff'} weight={'fill'} />
            </TouchableOpacity>
          );
        },
      },
    ]}
    ...
/>