ReactNative系列之三十五视频播放

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.后续深度用的时候再总结吧

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值