首页 > 解决方案 > 如何在使用 reactr-native-createthumbnail 和 react-native-video-player 上传视频之前显示缩略图

问题描述

我一直在使用 react-native 视频播放器来显示视频,直到视频加载我想显示缩略图,所以我使用 react-native-create-thumbnail 从视频生成缩略图

createThumbnail({
              url: video.path,
              timeStamp: 10000,
            })
              .then(response => {
                  console.log('thumbnail',response)
                  thumbnailUrl=response.path;
              }
              )
              .catch(err => console.log('thumbnail err',err));

在这里我得到以下对象

thumbnail {"height": 300, "path": "file:///data/user/0/com.sheolife/cache/thumbnails/thumb-4b75eaad-2afe-4c3d-994d-3f6206ce5b75.jpeg", "width": 300}

当我在我的 Videoplayer thumbnail 道具中添加上面的 thumbnailUrl 时,它仍然显示为黑色

我尝试添加如下

<VideoPlayer
            ref={videoplayerref}
            video={{
              uri: video
            }}
            paused={paused}
            videoWidth={Dimensions.get("window").width}
            videoHeight={400}
            thumbnail={{uri:thumbnailUrl}}
            resizeMode="contain"
            pauseOnPress
            // hideControlsOnStart
            onStart={(state) => onStart(state)}
            onPlayPress={(state) => onPlayPress(state)}
            hideControlsOnStart={true}
          /> 

现在这里的 thumbnailUrl 是本地文件,所以我想写如下:

thumbnail={require(`${thumbnailUrl}`)}

但这也是抛出错误,有人可以在这里帮助我吗,我如何访问视频播放器中的缩略图路径?任何线索都会很棒。

标签: reactjsreact-nativereact-native-androidreact-native-ios

解决方案


推荐阅读