轉載請注明原文地址:http://www.cnblogs.com/ygj0930/p/7366019.html
一:安裝
在IDE中打開你的項目,然后在IDE的terminal,輸入:
npm i -S react-native-video
安裝第三方的視頻組件。
然后,執行以下命令,把下載回來的第三方庫連接到本地庫中:
react-native link
二:使用
在RN的js文件中,引入視頻播放組件:
import Video from 'react-native-video';
然后,在就可以使用這個組件來播放視頻了。
播放本地視頻:
<Video source={require('./video/xx.mp4')} style={styles.播放器樣式} rate={this.state.rate} // 控制暫停/播放,0 代表暫停paused, 1代表播放normal. paused={false} volume={1} // 聲音的放大倍數,0 代表沒有聲音,就是靜音muted, 1 代表正常音量 normal,更大的數字表示放大的倍數 muted={true} // true代表靜音,默認為false. resizeMode='contain' // 視頻的自適應伸縮鋪放行為, onLoad={this.onLoad} // 當視頻加載完畢時的回調函數 onLoadStart={this.loadStart} // 當視頻開始加載時的回調函數 onProgress={this.onProgress} // 進度控制,每250ms調用一次,以獲取視頻播放的進度 onEnd={this.onEnd} // 當視頻播放完畢后的回調函數 onError={this.videoError} // 當視頻不能加載,或出錯后的回調函數
repeat={false} // 是否重復播放 />
播放網絡視頻:
<Video source={{uri:'視頻url'}} style={styles.播放器樣式} rate={this.state.rate} // 控制暫停/播放,0 代表暫停paused, 1代表播放normal. paused={false} volume={1} // 聲音的放大倍數,0 代表沒有聲音,就是靜音muted, 1 代表正常音量 normal,更大的數字表示放大的倍數 muted={true} // true代表靜音,默認為false. resizeMode='contain' // 視頻的自適應伸縮鋪放行為, onLoad={this.onLoad} // 當視頻加載完畢時的回調函數 onLoadStart={this.loadStart} // 當視頻開始加載時的回調函數 onProgress={this.onProgress} // 進度控制,每250ms調用一次,以獲取視頻播放的進度 onEnd={this.onEnd} // 當視頻播放完畢后的回調函數 onError={this.videoError} // 當視頻不能加載,或出錯后的回調函數
repeat={false} // 是否重復播放 />