反応 + ネイティブ + ビデオをフルスクリーン効果にする-jsチュートリアル-php.cn

反応 + ネイティブ + ビデオをフルスクリーン効果にする

php中世界最好的语言

リリース： 2018-06-15 15:14:26

オリジナル

1963 人が閲覧しました

今回はreact+native+videoを使ってフルスクリーンエフェクトを作る方法を紹介します。実際的なケースを見てみましょう。。

react-native-video は、React Native でのビデオ再生専用の github 上のコンポーネントです。このコンポーネントは React Native で最も多機能で使いやすいビデオ再生コンポーネントです。まだ開発が続けられていますが、基本的には使用に影響を与えません。

この記事では主にreact-native-videoを使用して動画を再生する方法と、画面を回転したときに動画プレーヤーのサイズを調整して全画面表示または全画面を折りたたむ方法を紹介します。

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

基本機能

再生速度の制御
音量の制御
ミュート機能のサポート
再生と一時停止のサポート
バックグラウンドオーディオ再生のサポート
カスタマイズされたスタイルをサポート、幅と高さの設定など
onLoad、onEnd、onProgress、onBufferなどのリッチイベント呼び出しは、onBufferなどの対応するイベントを通じてUI上でカスタマイズでき、プログレスバーを表示して、ビデオがバッファ処理中であることをユーザーに通知します。
全画面再生をサポートし、presentFullscreenPlayer メソッドを使用します。この方法は iOS では機能しますが、Android では機能しません。 issue#534 を参照してください。#726 にも同じ問題があります。
ジャンプの進行状況をサポートし、seekメソッドを使用して指定した場所にジャンプして再生することができます
再生のためにリモートビデオアドレスをロードしたり、RNにローカルに保存されているビデオをロードしたりできます。

注意事項

react-native-video は、次のように、source 属性を通じてビデオを設定します。

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

ログイン後にコピー

ローカルビデオを再生する場合、使用方法は次のとおりです。次のように:

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

ログイン後にコピー

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

インストール設定

npm i -S act-native-video またはyarn add reverse-native-videoを使用してインストールします。完了したら、react-native link reverse-native-videoコマンドを使用してこのライブラリをリンクします。

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

ビデオ再生

ビデオ再生を実装するのは実際には非常に簡単です。ビデオコンポーネントのソースリソースを設定し、次にビデオコンポーネントの幅と高さを調整するスタイルを設定するだけです。

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

ログイン後にコピー

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

全画面再生の実現

動画の全画面再生は、実際には縦画面での全画面再生ではないのが一般的です。デバイスが横画面のときに全画面ビデオ表示を実現するには、Video コンポーネントの幅と高さを変更するだけで非常に簡単に実現できます。

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

ビデオがポートレートモードの場合、設定したビデオの初期幅はデバイス画面の幅で、高さは幅の9/16、つまり16:9の比率で表示されます。横向きモードでは、ビデオの幅は画面の幅、高さは現在の画面の高さである必要があります。画面が横長の場合、デバイスの幅と高さが変化するため、時間内に幅と高さを取得することで UI を時間内に更新でき、ビデオを全画面で表示できます。

刚开始我想到的办法是使用 react-native-orientation 监听设备转屏的事件，在回调方法中判断当前是横屏还是竖屏，这个在iOS上是可行的，但是在Android上横屏和竖屏时获取到宽高值总是不匹配的（比如，横屏宽384高582，竖屏宽582高384，显然不合理），这样就无法做到统一处理。

所以，监听转屏的方案是不行的，不仅费时还得不到想要的结果。更好的方案是在render函数中使用View作为最底层容器，给它设置一个"flex：1"的样式，使其充满屏幕，在View的onLayout方法中获取它的宽高。无论屏幕怎么旋转，onLayout都可以获取到当前View的宽高和x、y坐标。

/// 屏幕旋转时宽高会发生变化，可以在onLayout的方法中做处理，比监听屏幕旋转更加及时获取宽高变化
 _onLayout = (event) => {
 //获取根View的宽高
 let {width, height} = event.nativeEvent.layout;
 console.log('通过onLayout得到的宽度：' + width);
 console.log('通过onLayout得到的高度：' + height);
 
 // 一般设备横屏下都是宽大于高，这里可以用这个来判断横竖屏
 let isLandscape = (width > height);
 if (isLandscape){
  this.setState({
  videoWidth: width,
  videoHeight: height,
  isFullScreen: true,
  })
 } else {
  this.setState({
  videoWidth: width,
  videoHeight: width * 9/16,
  isFullScreen: false,
  })
 }
 };

ログイン後にコピー

这样就实现了屏幕在旋转时视频也随之改变大小，横屏时全屏播放，竖屏回归正常播放。注意，Android和iOS需要配置转屏功能才能使界面自动旋转，请自行查阅相关配置方法。

播放控制

上面实现了全屏播放还不够，我们还需要一个工具栏来控制视频的播放，比如显示进度，播放暂停和全屏按钮。具体思路如下：

使用一个View将Video组件包裹起来，View的宽高和Video一致，便于转屏时改变大小
设置一个透明的遮罩层覆盖在Video组件上，点击遮罩层显示或隐藏工具栏
工具栏中要显示播放按钮、进度条、全屏按钮、当前播放时间、视频总时长。工具栏以绝对位置布局，覆盖在Video组件底部
使用react-native-orientation中的lockToPortrait和lockToLandscape方法强制旋转屏幕，使用unlockAllOrientations在屏幕旋转以后撤销转屏限制。

这样才算是一个有模有样的视频播放器。下面是竖屏和横屏的效果图