首頁 >web前端 >js教程 >react-native-video如何實現視訊全螢幕播放

react-native-video如何實現視訊全螢幕播放

小云云
小云云原創
2018-03-20 09:26:222968瀏覽

react-native-video 是github上一個專用於React Native做影片播放的元件。這個組件是React Native上功能最全最好用的影片播放組件,還在持續開發之中,雖然還有些bug,但基本上不影響使用,強力推薦。本文主要和大家介紹了react-native-video實現影片全螢幕播放的方法,希望能幫助大家。

首先來看看react-native-video有哪些功能。

基本功能

  1. 控製播放速率

  2. 控制音量大小

  3. 支援靜音功能
  4. 支援播放和暫停
  5. #支援後台音訊播放
  6. 支援客製化樣式,例如設定寬高
  7. 豐富的事件調用,如onLoad,onEnd,onProgress,onBuffer等等,可以透過對應的事件進行UI上的客製化處理,如onBuffer時我們可以顯示一個進度條提示使用者影片正在緩衝。
  8. 支援全螢幕播放,使用presentFullscreenPlayer方法。這個方法在iOS上可行,在android上不起作用。參考 issue#534 ,#726也是同樣的問題。
  9. 支援跳轉進度,使用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={&#39;cover&#39;}
 playWhenInactive={false}
 playInBackground={false}
 ignoreSilentSwitch={&#39;ignore&#39;}
 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(&#39;通过onLayout得到的宽度:&#39; + width);
 console.log(&#39;通过onLayout得到的高度:&#39; + 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需要設定轉屏功能才能讓介面自動旋轉,請自行查閱相關設定方法。

###播放控制#########上面實現了全螢幕播放還不夠,我們還需要一個工具列來控制影片的播放,例如顯示進度,播放暫停和全螢幕按鈕。具體思路如下:###
  1. 使用一個View將Video元件包起來,View的寬高和Video一致,方便轉屏時改變大小

  2. 設定一個透明的遮罩層覆蓋在Video組件上,點擊遮罩層顯示或隱藏工具列

  3. 工具列中要顯示播放按鈕、進度列、全螢幕按鈕、目前播放時間、影片總時長。工具列以絕對位置佈局,覆蓋在Video組件底部

  4. 使用react-native-orientation中的lockToPortrait和lockToLandscape方法強制旋轉螢幕,使用unlockAllOrientations在螢幕旋轉以後撤銷轉屏限制。

這樣才算是一個有模有樣的影片播放器。下面是垂直螢幕和橫屏的效果圖

#再也不必為presentFullscreenPlayer方法不起作用而煩惱了,全螢幕播放實現起來其實很簡單。具體程式碼請看demo: https://github.com/mrarronz/react-native-blog-examples/tree/master/Chapter7-VideoPlayer/VideoExample 。

#

以上是react-native-video如何實現視訊全螢幕播放的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn