最完整的Expo视频功能指南：从播放到录制的全媒体解决方案

你是否还在为React Native应用中的视频处理而烦恼？从格式兼容到性能优化，从简单播放到复杂录制， Expo提供了一套完整的全媒体解决方案。本文将带你一文掌握Expo视频功能的核心用法，包括最新的expo-video和expo-audio组件，让你轻松实现跨平台的视频播放、录制和编辑功能。

读完本文后，你将能够：

• 理解Expo视频功能的最新架构和组件
• 实现高效的视频播放功能，支持多种格式和流媒体
• 使用设备摄像头录制高质量视频
• 掌握视频编辑和处理的基本技巧
• 了解性能优化和兼容性处理的最佳实践

Expo视频功能架构概述

Expo提供了一套完整的多媒体处理解决方案，包括视频播放、录制、编辑等功能。随着SDK 54的发布，Expo对视频功能进行了重大重构，将原有的expo-av拆分为expo-video和expo-audio两个独立的包，以提供更专注和高效的媒体处理能力。

// packages/expo-av/src/index.ts
import * as Audio from './Audio';
export { Audio };
export { default as Video } from './Video';

let loggedDeprecationWarning = false;

if (!loggedDeprecationWarning) {
  console.warn(
    '[expo-av]: Expo AV has been deprecated and will be removed in SDK 54. Use the `expo-audio` and `expo-video` packages to replace the required functionality.'
  );
  loggedDeprecationWarning = true;
}

export * from './AV.types';
export * from './Audio.types';
export * from './Video.types';

这一架构调整使得开发者可以更灵活地选择所需的功能，减少不必要的依赖，同时也提高了各个模块的维护性和扩展性。

视频播放功能详解

Expo的视频播放功能主要由expo-video包提供，支持本地视频文件和网络流媒体的播放，提供了丰富的控制选项和事件监听。

基本视频播放实现

以下是一个简单的视频播放组件实现，展示了如何使用expo-video播放本地视频文件：

import React from 'react';
import { View, StyleSheet } from 'react-native';
import Video from 'expo-video';

const VideoPlayer = () => {
  return (
    <View style={styles.container}>
      <Video
        source={require('../assets/sample-video.mp4')}
        style={styles.video}
        useNativeControls
        resizeMode="contain"
        isLooping
        onPlaybackStatusUpdate={(status) => {
          console.log('Playback status:', status);
        }}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  video: {
    width: '100%',
    height: 300,
  },
});

export default VideoPlayer;

高级播放功能

expo-video还支持许多高级功能，如自定义控件、播放速率调整、静音控制等。以下是一个包含更多控制选项的示例：

import React, { useRef, useState } from 'react';
import { View, StyleSheet, TouchableOpacity, Text, Slider } from 'react-native';
import Video from 'expo-video';

const CustomVideoPlayer = () => {
  const videoRef = useRef<Video>(null);
  const [isPlaying, setIsPlaying] = useState(false);
  const [progress, setProgress] = useState(0);
  const [duration, setDuration] = useState(0);
  const [volume, setVolume] = useState(1.0);
  const [playbackRate, setPlaybackRate] = useState(1.0);

  const handlePlayPause = async () => {
    if (videoRef.current) {
      if (isPlaying) {
        await videoRef.current.pauseAsync();
      } else {
        await videoRef.current.playAsync();
      }
      setIsPlaying(!isPlaying);
    }
  };

  const handleProgressUpdate = async () => {
    if (videoRef.current) {
      const status = await videoRef.current.getStatusAsync();
      if (status.isLoaded) {
        setProgress(status.positionMillis / status.durationMillis);
        setDuration(status.durationMillis);
      }
    }
  };

  const handleSliderChange = async (value: number) => {
    if (videoRef.current && duration > 0) {
      const position = value * duration;
      await videoRef.current.setPositionAsync(position);
      setProgress(value);
    }
  };

  return (
    <View style={styles.container}>
      <Video
        ref={videoRef}
        source={{ uri: 'https://example.com/sample-video.mp4' }}
        style={styles.video}
        resizeMode="contain"
        onPlaybackStatusUpdate={handleProgressUpdate}
        volume={volume}
        rate={playbackRate}
      />
      <View style={styles.controls}>
        <TouchableOpacity onPress={handlePlayPause} style={styles.button}>
          <Text>{isPlaying ? 'Pause' : 'Play'}</Text>
        </TouchableOpacity>
        <Slider
          style={styles.slider}
          value={progress}
          onValueChange={handleSliderChange}
          minimumValue={0}
          maximumValue={1}
          step={0.01}
        />
        <View style={styles.volumeControl}>
          <Text>Volume:</Text>
          <Slider
            style={styles.volumeSlider}
            value={volume}
            onValueChange={setVolume}
            minimumValue={0}
            maximumValue={1}
            step={0.1}
          />
        </View>
        <View style={styles.rateControl}>
          <Text>Speed: {playbackRate}x</Text>
          <Slider
            style={styles.rateSlider}
            value={playbackRate}
            onValueChange={setPlaybackRate}
            minimumValue={0.5}
            maximumValue={2}
            step={0.1}
          />
        </View>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  // 样式定义省略
});

export default CustomVideoPlayer;

视频播放优化

为了确保视频播放的流畅性和性能，Expo提供了多种优化选项：

1. 视频缓存：使用expo-file-system缓存网络视频，减少重复下载
2. 自适应比特率：根据网络状况自动调整视频质量
3. 预加载策略：控制视频的预加载行为，平衡性能和带宽消耗
4. 硬件加速：利用设备硬件加速视频解码，提高播放性能

视频录制功能

除了播放功能，Expo还提供了强大的视频录制能力，通过expo-camera组件可以轻松实现摄像头访问和视频录制。

基础视频录制

以下是一个简单的视频录制组件，展示了如何使用expo-camera录制视频：

import React, { useState, useRef } from 'react';
import { View, StyleSheet, TouchableOpacity, Text } from 'react-native';
import { Camera, CameraType } from 'expo-camera';
import { Video } from 'expo-video';
import * as FileSystem from 'expo-file-system';

const VideoRecorder = () => {
  const [hasPermission, setHasPermission] = useState(null);
  const [type, setType] = useState(CameraType.back);
  const [isRecording, setIsRecording] = useState(false);
  const [recordedVideo, setRecordedVideo] = useState(null);
  const cameraRef = useRef<Camera>(null);

  React.useEffect(() => {
    (async () => {
      const { status } = await Camera.requestCameraPermissionsAsync();
      setHasPermission(status === 'granted');
    })();
  }, []);

  if (hasPermission === null) {
    return <View />;
  }
  if (hasPermission === false) {
    return <Text>No access to camera</Text>;
  }

  const toggleCameraType = () => {
    setType(current => (current === CameraType.back ? CameraType.front : CameraType.back));
  };

  const startRecording = async () => {
    if (cameraRef.current) {
      setIsRecording(true);
      const videoUri = `${FileSystem.documentDirectory}recording.mp4`;
      
      const recording = await cameraRef.current.recordAsync({
        quality: '720p',
        maxDuration: 60, // 60 seconds
        mute: false,
        videoUri,
      });
      
      setIsRecording(false);
      setRecordedVideo(recording.uri);
    }
  };

  const stopRecording = async () => {
    if (cameraRef.current) {
      cameraRef.current.stopRecording();
    }
  };

  return (
    <View style={styles.container}>
      {recordedVideo ? (
        <View style={styles.videoPreview}>
          <Video
            source={{ uri: recordedVideo }}
            style={styles.previewVideo}
            useNativeControls
            resizeMode="contain"
          />
          <TouchableOpacity style={styles.retakeButton} onPress={() => setRecordedVideo(null)}>
            <Text>Retake</Text>
          </TouchableOpacity>
        </View>
      ) : (
        <Camera 
          ref={cameraRef} 
          style={styles.camera} 
          type={type}
        >
          <View style={styles.buttonContainer}>
            <TouchableOpacity style={styles.button} onPress={toggleCameraType}>
              <Text style={styles.text}>Flip Camera</Text>
            </TouchableOpacity>
          </View>
        </Camera>
      )}
      
      <View style={styles.recordButtonContainer}>
        <TouchableOpacity
          style={[styles.recordButton, isRecording ? styles.recordingButton : {}]}
          onPress={isRecording ? stopRecording : startRecording}
        />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  // 样式定义省略
});

export default VideoRecorder;

高级录制功能

expo-camera提供了多种高级录制功能，如：

1. 自定义视频质量：支持从480p到4K的多种分辨率设置
2. 视频稳定：部分设备支持电子防抖功能
3. 慢动作录制：支持高帧率录制，实现慢动作效果
4. 时间 lapse：支持延时摄影功能
5. 自定义音频源：可以选择不同的音频输入源

// 高质量视频录制配置示例
const recordingOptions = {
  quality: '4K', // 可选值: '240p', '480p', '720p', '1080p', '2160p' (4K)
  fps: 60, // 帧率
  bitRate: 10000000, // 比特率
  maxDuration: 300, // 最大录制时长（秒）
  mute: false, // 是否静音
  stabilisationMode: Camera.StabilizationMode.Standard, // 防抖模式
  codec: Camera.Constants.VideoCodec.H264, // 视频编码格式
};

视频编辑与处理

Expo生态系统还提供了视频编辑功能，通过expo-image-manipulator和其他第三方库，可以实现基本的视频编辑功能。

使用expo-image-manipulator处理视频

虽然expo-image-manipulator主要用于图像处理，但它也提供了一些基本的视频编辑功能：

import React from 'react';
import { View, Button, Image, StyleSheet } from 'react-native';
import * as ImageManipulator from 'expo-image-manipulator';
import * as FileSystem from 'expo-file-system';

const VideoEditor = ({ videoUri }) => {
  const [editedVideoUri, setEditedVideoUri] = React.useState(null);

  const editVideo = async () => {
    const manipulatedVideo = await ImageManipulator.manipulateAsync(
      videoUri,
      [
        { resize: { width: 1080, height: 1920 } }, // 调整大小
        { rotate: 90 }, // 旋转90度
      ],
      { compress: 0.7, format: ImageManipulator.SaveFormat.MP4 }
    );
    
    setEditedVideoUri(manipulatedVideo.uri);
  };

  return (
    <View style={styles.container}>
      <Button title="Edit Video" onPress={editVideo} />
      {editedVideoUri && (
        <Video
          source={{ uri: editedVideoUri }}
          style={styles.video}
          useNativeControls
          resizeMode="contain"
        />
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  video: {
    width: 300,
    height: 400,
    marginTop: 20,
  },
});

export default VideoEditor;

高级视频编辑

对于更复杂的视频编辑需求，可以考虑集成第三方库，如react-native-video-processing，它提供了更丰富的视频编辑功能：

import React from 'react';
import { View, Button, StyleSheet } from 'react-native';
import Video from 'expo-video';
import RNVideoProcessing from 'react-native-video-processing';

const AdvancedVideoEditor = ({ videoUri }) => {
  const [processedVideoUri, setProcessedVideoUri] = React.useState(null);
  
  const processVideo = async () => {
    try {
      // 裁剪视频
      const croppedVideo = await RNVideoProcessing.cropVideo(videoUri, {
        startTime: 5, // 开始时间（秒）
        endTime: 15, // 结束时间（秒）
        width: 720,
        height: 1280,
      });
      
      // 添加水印
      const watermarkedVideo = await RNVideoProcessing.addWatermark(croppedVideo, {
        imageUri: 'path/to/watermark.png',
        position: 'bottomRight',
        scale: 0.5,
      });
      
      // 调整视频速度
      const finalVideo = await RNVideoProcessing.changeVideoSpeed(watermarkedVideo, {
        factor: 1.5, // 1.5x speed
      });
      
      setProcessedVideoUri(finalVideo);
    } catch (error) {
      console.error('Video processing error:', error);
    }
  };
  
  return (
    <View style={styles.container}>
      <Button title="Process Video" onPress={processVideo} />
      {processedVideoUri && (
        <Video
          source={{ uri: processedVideoUri }}
          style={styles.video}
          useNativeControls
          resizeMode="contain"
        />
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  video: {
    width: 300,
    height: 400,
    marginTop: 20,
  },
});

export default AdvancedVideoEditor;

最佳实践与性能优化

视频播放性能优化

1. 选择合适的视频格式和分辨率：根据目标设备选择适当的视频格式和分辨率，避免不必要的资源消耗。

2. 实现视频预加载策略：根据用户行为预测视频需求，提前加载视频内容。

3. 使用自适应流媒体：根据网络状况动态调整视频质量，平衡观看体验和带宽消耗。

4. 释放资源：在组件卸载时确保正确释放视频资源，避免内存泄漏。

// 正确释放视频资源的示例
useEffect(() => {
  return () => {
    if (videoRef.current) {
      videoRef.current.unloadAsync();
    }
  };
}, []);

兼容性处理

不同设备和系统版本对视频功能的支持程度可能有所不同，因此需要做好兼容性处理：

1. 检查设备支持情况：在使用高级功能前，检查设备是否支持该功能。

import { Camera } from 'expo-camera';

const checkCameraFeatures = async () => {
  const { camera } = await Camera.getAvailableCameraTypesAsync();
  const has4KSupport = await Camera.isAvailableAsync('4K');
  const hasStabilization = await Camera.hasStabilizationAsync();
  
  console.log('Available camera types:', camera);
  console.log('4K support:', has4KSupport);
  console.log('Stabilization support:', hasStabilization);
};

2. 提供降级方案：对于不支持高级功能的设备，提供基础功能的降级方案。

3. 处理错误和异常：合理处理视频播放和录制过程中可能出现的错误和异常情况。

安全考虑

在处理视频内容时，还需要注意以下安全问题：

1. 用户隐私保护：在录制视频时，确保获得用户明确授权，并保护用户隐私。

2. 内容安全：对于用户生成的视频内容，考虑添加内容审核机制，防止不当内容传播。

3. 安全存储：对于敏感视频内容，考虑使用加密存储和传输。

总结与展望

Expo提供了一套完整的视频功能解决方案，从基础的视频播放到复杂的录制和编辑，都能满足React Native开发者的需求。随着expo-video和expo-audio的推出，Expo的媒体处理能力更加专业化和高效化。

未来，Expo视频功能可能会在以下方面进一步发展：

1. 更强大的编辑功能：内置更多专业的视频编辑功能，减少对第三方库的依赖。

2. AI增强功能：集成AI技术，提供智能视频分析、内容识别和增强现实等高级功能。

3. 更好的Web支持：进一步优化Web平台的视频处理能力，实现更一致的跨平台体验。

无论你是开发简单的视频播放器还是复杂的视频编辑应用，Expo都能为你提供可靠、高效的技术支持。开始使用Expo视频功能，为你的应用添加丰富的多媒体体验吧！

官方文档：docs/pages/core-concepts.mdx 视频功能源码：packages/expo-video/ 社区教程：apps/expo-go/src/components/VideoPlayer.tsx