React-native-video が全画面ビデオ再生を実装する方法

react-native-video は、React Native でのビデオ再生専用の github 上のコンポーネントです。このコンポーネントは React Native で最も多機能で使いやすいビデオ再生コンポーネントです。まだ開発が続けられていますが、基本的には使用に影響を与えません。この記事では動画の全画面再生を実現するreact-native-videoの方法を中心に紹介しますので、参考になれば幸いです。

まず、react-native-video の機能を見てみましょう。

基本機能

1. 再生速度の制御

2. 音量の制御

3. ミュート機能のサポート

4. 再生と一時停止のサポート

5. バックグラウンドオーディオ再生のサポート

6. カスタマイズされたスタイルをサポート、幅と高さの設定など

7. onLoad、onEnd、onProgress、onBufferなどのリッチイベント呼び出しは、onBufferなどの対応するイベントを通じてUI上でカスタマイズでき、プログレスバーを表示して、ビデオがバッファ処理中であることをユーザーに通知します。

8. 全画面再生をサポートし、presentFullscreenPlayer メソッドを使用します。この方法は iOS では機能しますが、Android では機能しません。 issue#534 を参照してください。#726 にも同じ問題があります。

9. ジャンプの進行状況をサポートし、seekメソッドを使用して指定した場所にジャンプして再生することができます

10. 再生のためにリモートビデオアドレスをロードしたり、RNにローカルに保存されているビデオをロードしたりできます。

注意事項

react-native-video は、次のように、source 属性を通じてビデオを設定します。次のように、uri を使用してビデオ アドレスを設定します。次のメソッド:

source={{uri: http://www.xxx.com/xxx/xxx/xxx.mp4}}

source 属性を空にすることはできません。uri またはローカル リソースを設定する必要があります。設定しないとアプリがクラッシュします。 uri を空の文字列に設定することはできず、特定のアドレスを設定する必要があります。

インストール設定

Android側でlinkコマンドを実行すると、gradleでの設定が完了しました。 iOS 側も手動で設定する必要があります。ここでは、公式の手順とは異なり、通常は独自のターゲットを選択し、ビルド段階で自動的にリンクされた libRCTVideo.a ライブラリを削除します。下のプラス記号をクリックして、libRCTVideo.a を再度追加します。間違ったものを選択しないように注意してください。

source={require('../assets/video/turntable.mp4')}

ここで、videoUrl はビデオ アドレスの設定に使用する変数で、videoWidth と videoHeight はビデオの幅と高さを制御するために使用されます。

全画面再生の実現

上記では、videoWidth と videoHeight を状態に保存しました。その目的は、2 つの変数の値を変更して UI を更新し、それに応じてビデオの幅と高さを変更できるようにすることです。問題は、デバイスの画面が回転したときに、変更された幅と高さをどのように取得するかということです。

<Video
 ref={(ref) => this.videoPlayer = ref}
 source={{uri: this.state.videoUrl}}
 rate={1.0}
 volume={1.0}
 muted={false}
 resizeMode={&#39;cover&#39;}
 playWhenInactive={false}
 playInBackground={false}
 ignoreSilentSwitch={&#39;ignore&#39;}
 progressUpdateInterval={250.0}
 style={{width: this.state.videoWidth, height: this.state.videoHeight}}
/>

このように、画面を回転すると動画のサイズが変わり、横画面では全画面再生、縦画面では通常再生に戻ります。 Android および iOS では、インターフェースを自動的に回転させるために画面回転機能を設定する必要がありますので、該当する設定方法をご自身で確認してください。

再生コントロール

1. ビューを使用してビデオコンポーネントをラップします。ビューの幅と高さはビデオと同じなので、画面を回転するときにサイズを簡単に変更できます

2. を覆うように透明なマスクレイヤーを設定します。ビデオコンポーネント。マスクレイヤーをクリックして表示または非表示にします。ツールバーには、再生ボタン、プログレスバー、全画面ボタン、現在の再生時間、および合計ビデオ時間が表示されます。ツールバーは絶対位置にレイアウトされ、Video コンポーネントの下部を覆います

3. 反応ネイティブ方向の lockToPortrait メソッドと lockToLandscape メソッドを使用して画面を強制的に回転させ、その後、unlockAllOrientations を使用して画面の回転制限をキャンセルします画面が回転します。

4. これはまともなビデオプレーヤーです。以下は垂直画面と水平画面のレンダリングです

以上がReact-native-video が全画面ビデオ再生を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。