前言

videoPlayer視頻播放器Demo是從作者前段時(shí)間開(kāi)源的RN項(xiàng)目OneM中抽離出來(lái)的獨(dú)立的Demo示例，如果想看完整的OneM項(xiàng)目請(qǐng)點(diǎn)擊，Demo示例支持iOS、Android雙平臺(tái)運(yùn)行。

預(yù)覽效果圖

gif

播放器支持功能

• 支持播放 \ 暫停
• 支持橫豎屏切換
• 支持鎖屏
• 支持緩存播放及緩存進(jìn)度
• 支持播放進(jìn)度拖拽到指定位置播放

使用到的技術(shù)點(diǎn)

• 項(xiàng)目使用到react-native-video媒體播放組件
• IconFont字體react-native-vector-icons，以及自定義的字體庫(kù)
• 使用到react-native-orientation組件來(lái)完成橫豎屏切換

核心代碼

<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使用方法請(qǐng)參照官方文檔：https://github.com/react-native-community/react-native-video

react-native-video組件使用步驟

• npm install react-native-video --save
• react-native link react-native-video --save

播放器Demo源碼

https://github.com/guangqiang-liu/react-native-video-demo

查看IconFont功能請(qǐng)參考

自定義IconFont庫(kù)

同時(shí)作者使用react-native-video組件也開(kāi)源了一個(gè)音樂(lè)播放器Demo示例，有興趣的同學(xué)也可以點(diǎn)擊查看學(xué)習(xí)。

http://www.itdecent.cn/p/7ddaf6ae9dd2

總結(jié)

視頻播放器功能和作者開(kāi)源的音樂(lè)播放器差不多，都是使用react-native-video組件進(jìn)行封裝的，很多地方的處理邏輯都是一樣的，建議同學(xué)們兩個(gè)示例項(xiàng)目結(jié)合著學(xué)習(xí)。如果感覺(jué)這篇文章對(duì)你有幫助 請(qǐng) 給個(gè) star 給個(gè)關(guān)注 謝謝。

福利時(shí)間

• 作者React Native開(kāi)源項(xiàng)目OneM地址(按照企業(yè)開(kāi)發(fā)標(biāo)準(zhǔn)搭建框架設(shè)計(jì)開(kāi)發(fā))：https://github.com/guangqiang-liu/OneM (歡迎小伙伴們 star)
• 作者簡(jiǎn)書主頁(yè)：包含50多篇RN開(kāi)發(fā)相關(guān)的技術(shù)文章http://www.itdecent.cn/u/023338566ca5 (歡迎小伙伴們：多多關(guān)注，多多點(diǎn)贊)
• 作者React Native QQ技術(shù)交流群：620792950 歡迎小伙伴進(jìn)群交流學(xué)習(xí)
• 友情提示：在開(kāi)發(fā)中有遇到RN相關(guān)的技術(shù)問(wèn)題，歡迎小伙伴加入交流群（620792950），在群里提問(wèn)、互相交流學(xué)習(xí)。交流群也定期更新最新的RN學(xué)習(xí)資料給大家，謝謝支持！