0

I am trying to disable the seek function on react native video. I have a full video that I want to preview for 30 seconds. In order to do this I want to disable the seek button so a user cannot skip through the video.

I have tried giving onSeek the value of function that exits the video player however this does not seem to do anything.

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 />
    }
  }
tnaught
  • 301
  • 4
  • 13
  • What are you trying to do? Like describe more about the scenario, why you want to disable the seek function, etc. It's hard to understand what you're trying to accomplish – K.Wu Apr 20 '18 at 21:15
  • I have updated the question to be more clear. I want to preview a video for a user and use the same full file. – tnaught Apr 20 '18 at 22:18
  • 1
    Did you call `presentFullscreenPlayer()` to play the video? – K.Wu Apr 20 '18 at 22:21
  • Yes I called `presentFullscreenPlayer()` – tnaught Apr 20 '18 at 22:33

1 Answers1

2

Short answer: No, you can't.

You called presentFullscreenPlayer() to play the video, unfortunately, you can't disable any buttons on the player. Because that's the default player made by Apple if you're running your app on iPhone, not by the people who created react-native-video, and I don't believe there's any public API that allows you to do so.

What you can do, however, is to write your own full screen player, with any button you want/don't want on there. Here's some hint:

Create a custom component called CustomVideo, which takes the url of the video as a 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>
        );
    }
}

So, next time, when you want render a video, instead of calling <Video source={{ uri: '...' }} />, you can call your <CustomVideo url='https://....' /> component.

K.Wu
  • 3,553
  • 6
  • 31
  • 55