在播放视频之前反应原生视频显示缩略图

Posted 2023-02-25

【中文标题】在播放视频之前反应原生视频显示缩略图

【英文标题】：react native video display thumbnail before video is played

【发布时间】：2020-08-17 10:34:55

【问题描述】：

我正在使用 react-native-video 向用户 react-native-video-controls 显示视频以显示控件。我的目标是在播放视频之前显示缩略图。此缩略图是存储在服务器中的图像。但我不知道如何在反应原生视频组件中显示此缩略图。

谁能帮帮我？

提前谢谢你

这里是代码

从“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
      /> 


    </>

【参考方案1】：

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

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

注意暂停状态，视频组件应该在同一个视图中。

这是一个代码示例： `暂停 && (

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

希望这会有所帮助。

【讨论】：

我得到它（大部分）使用这种方法，除了我必须使用 videoPause ? ( /* 缩略图代码 */) : null

很高兴它有帮助，是的，显示图像组件而不是视频也可以

【参考方案2】：

视频有poster属性，不知道video player"组件是否支持。

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

语法：

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

*旁注：对于 youtube 缩略图可通过以下 url 方案访问。

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

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

对于高质量 (HQ) 缩略图：

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

【讨论】：

其实我已经通过海报道具了。它仅在视频加载时显示图像。见这里npmjs.com/package/react-native-video#poster。所以它对我不起作用

第二点这不是 youtube 视频。所以不能使用他们的缩略图