react-native-video の使い方

2024年7月14日 17:48

「react-native-video」の使い方をまとめました。

前回

1. react-native-video

「react-native-video」は、「React Native」で動画やストリームなどのメディアコンテンツをレンダリングする動画コンポーネントを提供するライブラリです。React Nativeアプリ内で動画ファイル (m3u、mpd、mp4 など) をストリーミングできるようになります。

2. react-native-videoの使い方

「react-native-video」の使い方は、次のとおりです。

2-1. React Nativeプロジェクトの作成

(1) React Nativeプロジェクトの作成。

npx react-native init my_app
cd my_app

(2) パッケージのインストール。

npm install react-native-video

2-2. iOSのセットアップ

(1) podのインストール。

cd ios
pod install
cd ..

(2) Xcodeで署名し、iPhoneにインストールできることを確認。

2-3. 動画再生の実装

(1) assetsフォルダを作成し動画 (sample.mp4) を配置。

(2) コードの編集。

・App.tsx

import React from 'react';
import { View } from 'react-native';
import Video from 'react-native-video';

const App = () => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Video
        source={require('./assets/sample.mp4')}
        style={{ width: '100%', height: 400 }}
        controls={false}
        repeat={true} 
      />
    </View>
  );
};

export default App;

・source : ソース
・style : スタイル
・controls : コントローラのあり/なし
・repeat : リピートのON/OFF

(3) コードの実行。

npm start

【おまけ】画面回転の無効化

Android

「AndroidManifest.xml」の「activity」に「android:screenOrientation="portrait"」を設定。

<activity
    android:name=".MainActivity"
    android:label="@string/app_name"
    android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
    android:screenOrientation="portrait"
    android:windowSoftInputMode="adjustResize">
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
</activity>

iOS

「Info.plist」の「UISupportedInterfaceOrientations」に「UIInterfaceOrientationPortrait」のみ設定。

<key>UISupportedInterfaceOrientations</key>
<array>
    <string>UIInterfaceOrientationPortrait</string>
</array>