Question

我有视频，我想在用户点击完整视频之前以缩略图形式显示这些视频。他们不是本地人，我只有网址。是否有RN组件可以做到这一点？ RN Image组件不会将视频网址作为来源。

Answer 1

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

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

Answer 2

您可以按照以下步骤进行操作：

步骤1：使用以下命令在当前项目上安装“ react-native-link-preview” 软件包：

yarn add react-native-link-preview

第2步：这是您可以获取链接详细信息的代码：如链接标题，链接缩略图等。

LinkPreview.getPreview('https://www.youtube.com/watch?v=MejbOFk7H6c')
        .then(data => console.debug(data));

完整代码：

import React, { Component } from 'react';
import { Text, View, FlatList, Image } from 'react-native';
import LinkPreview from 'react-native-link-preview';

let links = [
    {
        link: 'https://aws.amazon.com/'
    },
    {
        link: 'https://firebase.google.com/'
    },
    {
        link: 'https://www.youtube.com/watch?v=Kmiw4FYTg2U'
    },
    {
        link: 'https://en.wikipedia.org/wiki/React_Native'
    },
    {
        link:'https://stackoverflow.com/'
    }
];

export default class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            linkData: []
        };
    }

    async componentDidMount() {
        let _tempLinkData = [];
        for (let link of links) {
            await LinkPreview.getPreview(link.link)
                .then(data => {
                    console.debug("Data : ", data);
                    let _newLinkDetails = {
                        link: link.link,
                        title: data.title,
                        thumbnail: data.images[0]
                    };
                    _tempLinkData.push(_newLinkDetails);
                });

        }
        this.setState({ linkData: _tempLinkData });
    }

    render() {
        return (
            <View style={{ marginTop: 35 }}>
                <FlatList
                    contentContainerStyle={{ paddingHorizontal: 20}}
                    data={this.state.linkData}
                    renderItem={({ item }) => (
                        <View style={{ flex: 1, flexDirection: "row", padding: 5 }}>
                            <Image
                                style={{ width: 50, height: 50 }}
                                source={{ uri: item.thumbnail }}
                            />
                            <View style={{ marginLeft: 10, }}>
                                <Text style={{ fontSize: 16, lineHeight: 20, }}>{item.title}</Text>
                                <View style={{ flex: 1, flexDirection: "row", justifyContent: "space-between", }}>
                                    <Text style={{ fontSize: 16, lineHeight: 20, color: "#a1a1a1" }}>{item.link}</Text>
                                </View>
                            </View>
                        </View>
                    )}

                    keyExtractor={(item, index) => String(index)}
                />
            </View>

        );
    }
}

Answer 3

可以使用Expo Video Thumbnail library

就像这个例子

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',
  },
});

-UPDATE-

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

示例：

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}
/>

在此示例中，它将在不播放视频的情况下显示视频，因此基本上可以为您提供缩略图。

P.S：不建议您在同一视图中观看多个视频超过10个。

Answer 4

仅适用于 Android：

事实证明，您只能使用 <Image /> 或 <FastImage /> 并传递视频源，您只是无法选择用于缩略图的特定时间/帧。 tbh 麻烦多了。

来源：https://github.com/react-native-camera/react-native-camera/issues/700

使用 Expo 的 VideoThumbnail 包是一场噩梦，并且在尝试在 null 上调用 generateThumbnail() 时总是导致应用程序崩溃...

Answer 5

不幸的是，没有反应本机组件/ api可以做到这一点。但是，您可以利用本机OS api（在ios上为AVAssetImageGenerator，在android上为MediaMetadataRetriever）来从本机应用程序的视频URL生成缩略图。

要获取快速解决方案，可以使用react-native-create-thumbnail。它是上述系统api的包装，并支持远程和本地视频。

React Native为视频网址生成缩略图

5 个答案: