在 react-native-video 中如何禁用搜索功能？

Posted 2023-03-15

【中文标题】在 react-native-video 中如何禁用搜索功能？

【英文标题】：In react-native-video how can you disable the seek function?

【发布时间】：2018-04-20 20:46:51

【问题描述】：

我正在尝试禁用响应原生视频的搜索功能。我有一个完整的视频，我想预览 30 秒。为了做到这一点，我想禁用搜索按钮，这样用户就不能跳过视频。

我尝试将退出视频播放器的函数值赋予onSeek，但这似乎没有任何作用。

if(!loading) 
      return <Video source=uri: uri   // Can be a URL or a local file.
        onFullscreenPlayerDidDismiss=this.onDismiss
        preferredPeakBitrate=this.state.preferredPeakBitrate
        ref=(player) => 
          if(!this.state.playing && player) 
            player.presentFullscreenPlayer()
            this.setState( playing: true )
          
                                              // Store reference
        rate=1.0                              // 0 is paused, 1 is normal.
        volume=1.0                            // 0 is muted, 1 is normal.
        muted=false                           // Mutes the audio entirely.
        paused=false                          // Pauses playback entirely.
        resizeMode="cover"                      // Fill the whole screen at aspect ratio.*
        repeat=false                           // Repeat forever.
        playInBackground=true                // Audio continues to play when app entering background.
        playWhenInactive=true                // [ios] Video continues to play when control or notification center are shown.
        ignoreSilentSwitch="ignore"           // [iOS] ignore | obey - When 'ignore', audio will still play with the iOS hard silent switch set to silent. When 'obey', audio will toggle with the switch. When not specified, will inherit audio settings as usual.
        progressUpdateInterval=PROGRESS_MILLISECONDS // [iOS] Interval to fire onProgress (default to ~250ms)
        onError=this.onVideoError               // Callback when video cannot be loaded
        onProgress=this.onProgress
        onLoadStart=this.onStart
        onEnd=this.stopPlaybackPing
       /> 
     else 
      return <View />
    
  

【问题讨论】：

你想做什么？就像描述更多关于场景，为什么要禁用搜索功能等。很难理解你想要完成什么

我已将问题更新为更清晰。我想为用户预览视频并使用相同的完整文件。

您是否致电presentFullscreenPlayer() 播放视频？

是的，我打电话给presentFullscreenPlayer()

【参考方案1】：

简短回答：不，你不能。

您致电presentFullscreenPlayer() 播放视频，很遗憾，您无法禁用播放器上的任何按钮。因为如果你在 iPhone 上运行你的应用程序，那是 Apple 制作的默认播放器，而不是由创建 react-native-video 的人制作的，我不相信有任何公共 API 可以让你这样做。

但是，您可以做的是编写您自己的全屏播放器，其中包含您想要/不想要的任何按钮。这里有一些提示：

创建一个名为CustomVideo的自定义组件，它将视频的url作为prop：

// CustomVideo.js file
import React,  PureComponent  from 'react';
import  ...  from 'react-native';
import Video from 'react-native-video';

export class CustomVideo extends PureComponent 
    constructor(props) 
        super(props)
        this.state = 
            // Have any state you want here, for example
            paused: false,
            played: 0,
            duration: 0,
            isFullscreen: false
        
    

    render() 
        const  url  = this.props;
        const  paused, played, duration, isFullscreen  = this.state;

        return(
            <View style= ... >
                <Video
                    source= uri: url 
                    ...
                />
                // =======> Here, you add your custom buttons <=======
                // Suppose you want a pause/play button
                <TouchableOpacity onPress=this.toggleVideo>
                    <Text>paused ? "Play" : "Pause"</Text>
                </TouchableOpacity>
                // If you want a progress indicator, which users
                // can use to skip videos, then use `Slider` component
                <Slider
                    value=...
                    step=...
                    onValueChange=(value) => ...
                />
                // Here, you toggle whether you want to play the video
                // in full screen mode, if so, render it in a modal
                // Also, add a full screen toggle button to the video
                // the same way you add a play/pause button
                <Modal visible=isFullscreen>
                    <View>
                        <Video ... />
                    </View>
                </Modal>
            </View>
        );
    

所以，下次当你想要渲染视频时，你可以调用 <CustomVideo url='https://....' /> 组件，而不是调用 <Video source= uri: '...' />。

【讨论】：

在 Modal 中，您需要添加与上面定义相同的自定义按钮吗？