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

时间:2018-04-20 20:46:51

标签: react-native react-native-video

我正在尝试禁用反应原生视频的搜索功能。我有一个完整的视频,我想要预览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 />
    }
  }

1 个答案:

答案 0 :(得分:2)

简短回答:不,你不能。

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

但是,你可以做的就是用自己想要/不想要的任何按钮来编写自己的全屏播放器。这里有一些提示:

创建一个名为CustomVideo的自定义组件,它将视频的网址作为道具:

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

因此,下次想要渲染视频时,您可以调用<Video source={{ uri: '...' }} />组件,而不是拨打<CustomVideo url='https://....' />