React Native 生成​​视频 url 的缩略图

Question

我想在用户单击视频以查看完整视频之前将其显示为缩略图。他们不是本地的，我只有网址。有没有 RN 组件可以做到这一点？RN Image 组件不将视频 url 作为源。

Answer 1

可以使用Expo 视频缩略图库

就像这个例子一样

import React from 'react';
import { StyleSheet, Button, View, Image, Text } from 'react-native';
import * as VideoThumbnails from 'expo-video-thumbnails';

export default class App extends React.Component {
  state = {
    image: null,
  };

  generateThumbnail = async () => {
    try {
      const { uri } = await VideoThumbnails.getThumbnailAsync(
        'http://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4',
        {
          time: 15000,
        }
      );
      this.setState({ image: uri });
    } catch (e) {
      console.warn(e);
    }
  };

  render() {
    const { image } = this.state;
    return (
      <View style={styles.container}>
        <Button onPress={this.generateThumbnail} title="Generate thumbnail" />
        {image && <Image source={{ uri: image }} style={{ width: 200, height: 200 }} />}
        <Text>{image}</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
});

-更新-

另一种方法是使用视频库而不播放视频和控制器

例子：

npm install --save react-native-video



import Video from 'react-native-video';

// Within your render function, assuming you have a file called
// "background.mp4" in your project. You can include multiple videos
// on a single screen if you like.

<Video source={{uri: "background"}}   // Can be a URL or a local file.
       paused={true}
controls={false}
/>

在这个例子中，它将显示视频而不播放它，所以基本上会给你缩略图。

PS：如果同一视图中的多个视频超过 10 个，则不建议使用。

Answer 2

不可能。无法从视频 URL 自动生成视频缩略图。它应该与视频一起创建并存储在后端数据库中，当 RN 应用程序收到视频 URL 时，它也应该收到缩略图 URL。然后您可以使用Image和TouchableOpacity组件在缩略图上添加按压行为。

但是，如果您仅使用 Youtube 视频，那么react-native-thumbnail-video可能是您问题的快速解决方案。