タイトル通り、アプリ内で動画を再生する方法についてです。
今回導入したのは、「react-native-video-player」というライブラリです。
GitHub のページはこちらから。
GitHub – cornedor/react-native-video-player: A video player for React Native with controls
https://github.com/cornedor/react-native-video-player
まず、下記のコマンドで必要なライブラリをインストールします。
npm install --save react-native-video-player react-native-video react-native-vector-icons
「react-native-video-player」ライブラリ以外にも、「react-native-video」ライブラリと「react-native-vector-icons」ライブラリが必要です。
なお、Android の場合、「react-native-video」ライブラリ導入時には設定追加が必要になりますので、こちらについては GitHub のページをご参照ください。
GitHub – react-native-video/react-native-video: A <Video /> component for react-native
https://github.com/react-native-video/react-native-video
私の場合、ちょっと手こずりましたので Android Studio でこまめに Sync や Build をしながら、少しずつ設定を追加していくのが良さそうです。
また、全ての設定を追加した後は一度プロジェクトを Clean し、再ビルドすると良いようでした。
上記が完了したら、あとは任意の場所に実装するだけです！
サンプルコードは下記のとおりです。
import VideoPlayer from 'react-native-video-player';
<VideoPlayer
video={{ uri: '[表示したい動画のパス]' }} />
上記のように記述して実行したところ、動画の再生プレイヤーが問題なく表示されました！
なお、上記コードでは指定していませんが、Props として、動画の横幅・縦幅を設定できる videoWidth、videoHeight やサムネイル画像を設定できる thumbnail などが用意されていました。
他にも、自動再生を有効にしたり、音声をミュートにする設定等もありましたので、必要なものを追加してください。
以上、React Native の「react-native-video-player」ライブラリを使って動画を再生する方法についてでした。
ご参考になれば幸いです。
