ReactNative学习笔记(六)集成视频播放

2021年09月15日 阅读数:1
这篇文章主要向大家介绍ReactNative学习笔记(六)集成视频播放,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

概述

视频播放能够本身写原生代码实现,而后注入JS。若是对视频播放没有特殊要求的话,能够直接使用现成插件。javascript

到官方推荐的插件网站搜索找到下载量第一的插件:react-native-videojava

安装

安装很简单:node

npm install -g react-native-video

配置

配置过程官网已经介绍的很详细了,这里再复述一遍。react

首先运行react-native link来连接react-native-videolibrary(说实话这一步具体做用是干啥我还没弄明白)。android

而后修改android/settings.gradle,增长以下内容:git

include ':react-native-video'
project(':react-native-video').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-video/android')

再修改android/app/build.gradle,追加以下内容:github

dependencies {
   ...
   compile project(':react-native-video')
}

W628xH240

最后再修改Java代码的一个地方,若是是0.29.0以上版本(含),须要修改MainApplication.java,不然修改MainActivity.javanpm

增长:react-native

import com.brentvatne.react.ReactVideoPackage;
.addPackage(new ReactVideoPackage())

W829xH491

可能遇到的错误

W573xH322

报错以下:app

undefined is not an object (evaluating NativeModuels.UIManager.RCTVideo.Constants')

报这个错误大概有2个缘由:

  • 一个是你没有彻底按照官网的方法一步步来,可能漏掉了哪一步;
  • 还有一个就是我本身碰到了,都按照官网来了,可是不知为什么没有从新编译,须要手动把apk卸载而后再编译运行才生效;

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

如何使用

test-video.js:

import React, { Component } from 'react';
import { AppRegistry, Text, View, ToastAndroid } from 'react-native';
import Video from 'react-native-video';

export default class testVideo extends Component
{
	onLoad(info)
	{
		// info == {currentTime,duration,...}
		ToastAndroid.show('视频加载成功!', ToastAndroid.SHORT);
	}
	onError(e)
	{
		ToastAndroid.show('视频加载错误!', ToastAndroid.SHORT);
	}
	onProgress(info)
	{
		// info == {currentTime: 0, playableDuration: 0}
	}
	render() {
		return (
			<View style={{flex: 1}}>
				<Text>视频播放测试:</Text>
				<Video ref="myvideo" resizeMode='cover' source={{uri: "http://192.168.191.1/media/1.mp4"}} 
					style={{position: 'absolute', top: 0, left: 0, bottom: 0, right: 0,}}
					onLoad={this.onLoad} onError={this.onError} onProgress={this.onProgress} />
			</View>
		);
	}
}

其中,进度事件每250毫秒调用一次,底层使用的是VideoView实现的。

定位:

this.refs['myvideo'].seek(seconds)

播放和暂停: 直接控制Video上面的paused={true}参数值为true和false来控制。

完整示例

官网完整示例:

<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.
       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
       style={styles.backgroundVideo} />

// Later to trigger fullscreen
this.player.presentFullscreenPlayer()

// To set video position in seconds (seek)
this.player.seek(0)

// Later on in your styles..
var styles = StyleSheet.create({
  backgroundVideo: {
    position: 'absolute',
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
  },
});

视频格式问题

经测试,在模拟器上面不少MP4格式都播放不出来,可能和具体编码有关,也有多是模拟器自己问题,对视频播放有更多要求的能够尝试使用react-native-vitamio