0

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

1 回答 1

2

简短的回答:不,你不能。

您打电话presentFullscreenPlayer()来播放视频,不幸的是,您无法禁用播放器上的任何按钮。因为如果您在 iPhone 上运行您的应用程序,那是 Apple 制作的默认播放器,而不是由创建react-native-video.

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

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

// 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://....' />组件,而不是调用 。

于 2018-04-20T22:49:29.100 回答