前言
videoPlayer視頻播放器Demo是從作者前段時間開源的RN項目OneM中抽離出來的獨立的Demo示例型型，如果想看完整的OneM項目請點擊，Demo示例支持iOS法梯、Android雙平臺運行勾缭。
預(yù)覽效果圖
gif
播放器支持功能
- 支持播放 \ 暫停
- 支持橫豎屏切換
- 支持鎖屏
- 支持緩存播放及緩存進(jìn)度
- 支持播放進(jìn)度拖拽到指定位置播放
使用到的技術(shù)點
- 項目使用到
react-native-video媒體播放組件 - IconFont字體
react-native-vector-icons提揍，以及自定義的字體庫 - 使用到
react-native-orientation組件來完成橫豎屏切換
核心代碼
<Video source={{uri: url}}
ref={ref => this.player = ref}
rate={this.state.rate}
volume={1.0}
muted={false}
paused={this.state.paused}
resizeMode="cover"
repeat={true}
playInBackground={false}
playWhenInactive={false}
ignoreSilentSwitch={"ignore"}
progressUpdateInterval={250.0}
onLoadStart={(data) => this.loadStart(data)}
onLoad={data => this.setDuration(data)}
onProgress={(data) => this.setTime(data)}
onEnd={(data) => this.onEnd(data)}
onError={(data) => this.videoError(data)}
onBuffer={(data) => this.onBuffer(data)}
onTimedMetadata={(data) => this.onTimedMetadata(data)}
style={[styles.videoPlayer]}
/>
react-native-video 組件使用講解
<Video source={{uri: "background"}} // Can be a URL or a local file.
ref={(ref) => {
this.player = ref
}} // Store reference
rate={1.0} // 0 is paused, 1 is normal.
volume={1.0} // 0 is muted, 1 is normal.
muted={false} // Mutes the audio entirely.
paused={false} // Pauses playback entirely.
resizeMode="cover" // Fill the whole screen at aspect ratio.*
repeat={true} // Repeat forever.
playInBackground={false} // Audio continues to play when app entering background.
playWhenInactive={false} // [iOS] Video continues to play when control or notification center are shown.
ignoreSilentSwitch={"ignore"} // [iOS] ignore | obey - When 'ignore', audio will still play with the iOS hard silent switch set to silent. When 'obey', audio will toggle with the switch. When not specified, will inherit audio settings as usual.
progressUpdateInterval={250.0} // [iOS] Interval to fire onProgress (default to ~250ms)
onLoadStart={this.loadStart} // Callback when video starts to load
onLoad={this.setDuration} // Callback when video loads
onProgress={this.setTime} // Callback every ~250ms with currentTime
onEnd={this.onEnd} // Callback when playback finishes
onError={this.videoError} // Callback when video cannot be loaded
onBuffer={this.onBuffer} // Callback when remote video is buffering
onTimedMetadata={this.onTimedMetadata} // Callback when the stream receive some metadata
style={styles.backgroundVideo} />
Android拓展用法
<Video source={{uri: "background", mainVer: 1, patchVer: 0}} // Looks for .mp4 file (background.mp4) in the given expansion version.
rate={1.0} // 0 is paused, 1 is normal.
volume={1.0} // 0 is muted, 1 is normal.
muted={false} // Mutes the audio entirely.
paused={false} // Pauses playback entirely.
resizeMode="cover" // Fill the whole screen at aspect ratio.
repeat={true} // Repeat forever.
onLoadStart={this.loadStart} // Callback when video starts to load
onLoad={this.setDuration} // Callback when video loads
onProgress={this.setTime} // Callback every ~250ms with currentTime
onEnd={this.onEnd} // Callback when playback finishes
onError={this.videoError} // Callback when video cannot be loaded
style={styles.backgroundVideo} />
詳細(xì)的react-native-video使用方法請參照官方文檔：https://github.com/react-native-community/react-native-video
react-native-video組件使用步驟
npm install react-native-video --savereact-native link react-native-video --save
播放器Demo源碼
https://github.com/guangqiang-liu/react-native-video-demo
查看IconFont功能請參考
同時作者使用react-native-video組件也開源了一個音樂播放器Demo示例，有興趣的同學(xué)也可以點擊查看學(xué)習(xí)畸冲。
http://www.reibang.com/p/7ddaf6ae9dd2
總結(jié)
視頻播放器功能和作者開源的音樂播放器差不多嫉髓，都是使用react-native-video組件進(jìn)行封裝的，很多地方的處理邏輯都是一樣的邑闲，建議同學(xué)們兩個示例項目結(jié)合著學(xué)習(xí)算行。如果感覺這篇文章對你有幫助 請 給個 star 給個關(guān)注 謝謝。
福利時間
- 作者React Native開源項目OneM地址(按照企業(yè)開發(fā)標(biāo)準(zhǔn)搭建框架設(shè)計開發(fā))：https://github.com/guangqiang-liu/OneM (歡迎小伙伴們 star)
- 作者簡書主頁：包含50多篇RN開發(fā)相關(guān)的技術(shù)文章http://www.reibang.com/u/023338566ca5 (歡迎小伙伴們：多多關(guān)注苫耸，多多點贊)
- 作者React Native QQ技術(shù)交流群：620792950 歡迎小伙伴進(jìn)群交流學(xué)習(xí)
- 友情提示：在開發(fā)中有遇到RN相關(guān)的技術(shù)問題州邢，歡迎小伙伴加入交流群（620792950），在群里提問褪子、互相交流學(xué)習(xí)量淌。交流群也定期更新最新的RN學(xué)習(xí)資料給大家，謝謝支持嫌褪！
