這篇文章主要介紹了react-native-video實現影片全螢幕播放的方法，現在分享給大家，也給大家做個參考。
react-native-video 是github上一個專用於React Native做影片播放的元件。這個組件是React Native上功能最全最好用的影片播放組件，還在持續開發之中，雖然還有些bug，但基本上不影響使用，強力推薦。
本篇文章主要介紹下怎麼使用react-native-video播放視頻，以及如何實現全屏播放，屏幕旋轉時視頻播放器大小隨之調整，顯示全屏或收起全屏。
首先來看看react-native-video有哪些功能。
基本功能
控製播放速率
控制音量大小
- 支援靜音功能
-
支援播放和暫停
-
#支援後台音訊播放
-
支援客製化樣式，例如設定寬高
-
豐富的事件調用，如onLoad，onEnd，onProgress，onBuffer等等，可以透過對應的事件進行UI上的客製化處理，如onBuffer時我們可以顯示一個進度條提示使用者影片正在緩衝。
-
支援全螢幕播放，使用presentFullscreenPlayer方法。這個方法在iOS上可行，在android上不起作用。參考 issue#534 ，#726也是同樣的問題。
-
支援跳轉進度，使用seek方法跳到指定的地方進行播放
#可以載入遠端視訊位址播放，也可以載入RN本地存放的影片。
注意事項
react-native-video透過source屬性設定視頻，播放遠端視訊時使用uri來設定視訊位址，如下：
source={{uri: http://www.xxx.com/xxx/xxx/xxx.mp4}}登入後複製
source={require('../assets/video/turntable.mp4')}登入後複製
要注意的是，source屬性不能為空，uri或本地資源是必須設定的，否則會導致app閃退。 uri不能設定為空字串，必須是一個具體的位址。
安裝設定
使用npm i -S react-native-video 或yarn add react-native-video 安裝，完成後使用react-native link react-native -video 指令link這個函式庫。
Android端在執行完link指令後，gradle中就已經完成了設定。 iOS端還需要手動配置一下，這裡簡單說一下，與官方說明不同的是，我們一般不使用tvOS的，選中你自己的target，在build phases中先移除掉自動link進來的libRCTVideo.a 這個庫，然後點選下方加號重新加入libRCTVideo.a ，注意不要選錯。
影片播放
實作影片播放其實很簡單，我們只需要給Video元件設定一下source資源，然後設定style調整Video組件寬高就行了。
<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存放在state中，目的就是為了透過改變兩個變數的值來刷新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在螢幕旋轉以後撤銷轉屏限制。
這樣才算是一個有模有樣的影片播放器。下面是垂直螢幕和橫屏的效果圖
#再也不必為presentFullscreenPlayer方法不起作用而煩惱了，全螢幕播放實現起來其實很簡單。具體程式碼請看demo： https://github.com/mrarronz/react-native-blog-examples/tree/master/Chapter7-VideoPlayer/VideoExample 。
上面是我整理給大家的，希望今後對大家有幫助。
相關文章：
Angular學習筆記之整合三方UI框架、控制項的範例
Node.js實作註冊郵箱啟動功能的方法範例
Webpack 之babel-loader檔案預處理器詳解
以上是react-native-video實現視訊全螢幕播放的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
