如何在React Native Expo中显示视频预览

Question

我在React Native(expo(中使用了一个文件选择器(expo图像选择器(，用户可以在其中选择图像或视频。一旦用户选择了视频，我希望能够在上传之前显示视频的预览。我可以使用返回的文件引用对图像进行处理，但我似乎无法使用相同的方法让我的视频播放器播放选择的视频文件。

我正在使用Expo AV库来显示视频，这对带有数据库URL的文件来说很好。但是，文件选择器返回如下引用：

ph://70A1FE9D-F640-4569-8D6D-8B8329A5FDC9

而如果选择了图像，则参考更可读：

file:///Users/Library/Developer/CoreSimulator/Devices/C2120292-116D-463D-BB6F-78A3306C531B/.../2DB7FE67-0B32-4FEB-A718-4B53AC8F220C.png

这是视频播放器的代码

let previewVideo;
if (route.params) {
if (route.params.selectedVideo) {
previewVideo = route.params.selectedVideo;
}
}
{previewVideo &&
<View style={tailwind('mt-2')}>
<Video
ref={video}
source={{ uri: previewVideo }}
useNativeControls
resizeMode="contain"
isLooping={false}
isMuted={false}
style={tailwind('h-52 w-80')}
/>
</View>
}

这真的可以做到吗？还是我需要先上传视频，然后显示缩略图/占位符或其他什么？非常感谢您的帮助。

编辑：

视频组件来自expo av

从"expo av"导入｛音频、视频｝；

编辑二：

我使用expo图像拾取器包来获取图像和视频。图像选择器基本上是另一个屏幕，所选文件的引用通过导航道具发送回"表单"屏幕

来自图像浏览器屏幕的代码：

const widgetNavigator = useMemo(
() => ({
...
onSuccess: (data) => onSuccess(data),
}),
[]
);

const onSuccess = async (data) => {
// get the selected image's file references and send to the form photo grid
const fileArray = [];
for (let i = 0; i < data.length; i++) {
fileArray.push(data[i].uri)
}
if (selector === 'photos') {
navigation.navigate('AddPost', { selectedPhotos:fileArray });
} else {
navigation.navigate('AddPost', { selectedVideo:fileArray[0] });
}
};

我将一个参数传递给名为选择器的文件选择器，该选择器告诉我用户是否正在选择视频或图像，如果图像，我们将它们作为参数发送给AddPost，如果选择了视频，也会发送给video。无论哪种方式，无论选择哪个文件，它们的引用都会作为参数传递到AddPost屏幕。正如我上面提到的，这对图像来说很好，但对视频的引用有点奇怪。

编辑3：从视频文件的expo图像选择器返回的额外数据：

data:  Array [
Object {
"creationTime": 1639135793000,
"duration": 23.423333333333332,
"filename": "IMG_0016.MP4",
"height": 360,
"id": "70A1FE9D-F640-4569-8D6D-8B8329A5FDC9/L0/001",
"mediaSubtypes": Array [],
"mediaType": "video",
"modificationTime": 1644649243588,
"uri": "ph://70A1FE9D-F640-4569-8D6D-8B8329A5FDC9",
"width": 640,
},
]

Answer 1

尝试使用MediaLibrary.getAssetInfoAsync(id)获取可访问的uri
此函数返回AssetInfo，其中包含资产的localUri
将此"id": "70A1FE9D-F640-4569-8D6D-8B8329A5FDC9/L0/001"作为id传递，它应该返回类似file:///Users/Library/Developer/...而不是ph://...的uri，然后您可以显示图像或播放视频。