React Native Windows播放本地C盘视频问题求助

方案1：使用react-native-video（推荐） #

这个库对RNW有良好支持且维护活跃，能直接处理本地视频文件。

步骤： #

1. 安装依赖

npm install react-native-video --save

2. 配置Windows项目
   RNW 0.69支持自动链接，若需访问C盘非应用目录，需手动在windows\YourAppName\Package.appxmanifest中配置权限：

• 打开文件切换到「功能」标签，勾选文件系统和受限的文件系统访问。

3. 使用示例

import Video from 'react-native-video';

// C盘视频路径需用正确的URI格式
const videoUri = 'file:///C:/route/video.mp4';

export default function VideoPlayer() {
  return (
    <Video
      source={{ uri: videoUri }}
      style={{ width: 320, height: 240 }}
      controls={true}
      resizeMode="contain"
    />
  );
}

若直接访问C盘路径触发权限报错，建议通过文件选择器获取可访问的视频URI：

import DocumentPicker from 'react-native-document-picker';

async function pickAndPlayVideo() {
  const result = await DocumentPicker.pickSingle({
    type: [DocumentPicker.types.video],
  });
  // 直接将result.uri传给react-native-video的source.uri即可
}

方案2：封装Windows原生MediaPlayer控件 #

如果需要更原生的播放体验，可封装Windows原生MediaPlayer：

1. 在RNW项目windows目录下新建原生模块（如VideoPlayerModule.cs），核心代码：

using Microsoft.ReactNative;
using Windows.Media.Playback;
using Windows.Storage;

namespace YourAppName
{
  [ReactModule]
  public class VideoPlayerModule : ReactContextBaseModule
  {
    private MediaPlayer _mediaPlayer;

    public VideoPlayerModule(IReactContext reactContext) : base(reactContext) { }

    public override string Name => "VideoPlayer";

    [ReactMethod]
    public async void PlayVideo(string filePath)
    {
      var file = await StorageFile.GetFileFromPathAsync(filePath);
      _mediaPlayer = new MediaPlayer();
      _mediaPlayer.Source = MediaSource.CreateFromStorageFile(file);
      _mediaPlayer.Play();
    }
  }
}

2. React Native端调用：

import { NativeModules } from 'react-native';
const { VideoPlayer } = NativeModules;

// 播放C盘视频
VideoPlayer.PlayVideo("C:\\route\\video.mp4");

方案3：修复WebView方案（不推荐，仅作参考） #

WebView在UWP中访问本地文件需配置权限和正确URI：

import { WebView } from 'react-native-webview';

<WebView
  source={{
    html: `<video width="320" height="240" controls>
            <source src="file:///C:/route/video.mp4" type="video/mp4">
          </video>`
  }}
  style={{ marginTop: 20, width: 300, height: 300 }}
  allowFileAccess={true}
/>

此方法受限于WebView的权限兼容性，稳定性不如原生视频组件。

内容的提问来源于stack exchange，提问作者LuisE