在播放视频之前对本地视频显示缩略图做出反应

问题描述

我正在使用react-native-video向用户 react-native-video-controls 显示视频以显示控件。我的目的是在播放视频之前显示缩略图。该缩略图是存储在服务器中的图像。但是我没有得到如何在react native video组件中显示此缩略图。

有人可以帮助我吗？

提前谢谢

这是代码

从“ react-native-video”导入视频；从“ react-native-video-controls”导入VideoPlayer；

const App = () => {

  return (
    <>

       <VideoPlayer
        source={{ uri: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4' }}
        ref={(ref) => {
          // console.log(ref)
          setData(ref)
        }}
        style={styles.backgroundVideo}
        onBuffer={onBuffer}                // Callback when remote video is buffering
        onError={videoError}               // Callback when video cannot be loaded
        fullscreen={true}
        resizeMode="contain"
        paused = {true}
      /> 


    </>

}

解决方法

我要做的是让每个视频对象都包含其URI和缩略图字段。

然后包括一个条件，当视频组件处于暂停状态时，缩略图应以较高的zIndex显示。

请注意暂停状态，并且视频组件应在同一视图中。

这是一个代码示例： `{已暂停&&（

{paused && (
                <View style={{
                    flex: 1,backgroundColor: 'rgba(0,0.2)',position: 'absolute',resizeMode: 'cover',zIndex: 10,height: '100%',width: '100%',}>
                  <Image
                    source={{
                      uri:'thumbnailuri'
                    }}
                    style={{
                    height: '100%',}
                  />
                </View>
              )}

希望这会有所帮助。

视频具有海报属性，不确定视频播放器的“组件”是否支持它。

poster="https://somesite/thumb.png""

语法：

<video height="" width="" poster="URL of the image to be displayed">

*旁注：对于YouTube缩略图，可通过以下网址方案访问。

对于默认和正常质量的缩略图：

http://img.youtube.com/vi/<youtube-video-id>/default.jpg

对于高质量（HQ）缩略图：

http://img.youtube.com/vi/<youtube-video-id>/hqdefault.jpg

react-native react-native-video reactjs reactjs