ReactNative系列之三十五视频播放

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/yeputi1015/article/details/82964314

1.测试了下在RN下的视频播放，也就是简单使用react-native-video小试了下

https://github.com/react-native-community/react-native-video

2.

为项目引入react-native-video依赖库

npm install --save react-native-video

自动link,此步骤若出错。则移步官网手动link

react-native link react-native-video

3.目前我使用的是RN0.56版本

// 1.引入
import Video from 'react-native-video';

// 2.使用
//测试地址
let adress1 = "https://media.w3.org/2010/05/sintel/trailer.mp4";
let adress2 = "https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8";

<Video source={{uri: adress1}}   // Can be a URL or a local file.
           ref={(ref) => {
             this.player = ref
           }}                                      // Store reference
           onBuffer={this.onBuffer}                // Callback when remote video is buffering
           onError={this.videoError}               // Callback when video cannot be loaded
           style={styles.backgroundVideo} />

// 3.style
  backgroundVideo: {
    position: 'absolute',
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
  },

4.在github上的项目介绍里也没找到明确支持的格式，只试了下mp4和m3u8,在iOS和Android上完美播放~~

5.也可以参考react-native-video-controls 自定义播放视图在此基础上~

6.也可以自已通过原生的方式在两个平台上封装播放组件，但成本相对高点，不过是最稳的一种方式。还有一个vlc库，RN依赖引入于此库的开发，官方文档上表示会支持非常多的视频格式

7.后续深度用的时候再总结吧

扫描二维码关注公众号，回复： 5081326 查看本文章