浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【React Native】「react-native-video-player」ライブラリを使って動画を再生する

タイトル通り、アプリ内で動画を再生する方法についてです。
今回導入したのは、「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 でこまめに SyncBuild をしながら、少しずつ設定を追加していくのが良さそうです。
また、全ての設定を追加した後は一度プロジェクトを Clean し、再ビルドすると良いようでした。

上記が完了したら、あとは任意の場所に実装するだけです!
サンプルコードは下記のとおりです。

import VideoPlayer from 'react-native-video-player';

<VideoPlayer
  video={{ uri: '[表示したい動画のパス]' }} />

上記のように記述して実行したところ、動画の再生プレイヤーが問題なく表示されました!
なお、上記コードでは指定していませんが、Props として、動画の横幅・縦幅を設定できる videoWidthvideoHeight やサムネイル画像を設定できる thumbnail などが用意されていました。
他にも、自動再生を有効にしたり、音声をミュートにする設定等もありましたので、必要なものを追加してください。

 

以上、React Native の「react-native-video-player」ライブラリを使って動画を再生する方法についてでした。
ご参考になれば幸いです。

  • この記事いいね! (0)