React Native Expo视频av-expo --直接全屏播放

dzhpxtsq  于 2023-04-07  发布在  React
关注(0)|答案(2)|浏览(124)

我正在尝试通过react-native使用av-expo视频来实现这一点。
我想做的是直接全屏启动视频,而不需要通过“视频”堆栈(不需要双重加载MediaPlayerScreen堆栈+本机全屏堆栈)。
如果用户通过原生全屏输出按钮静音全屏,那么我们直接回到一个堆栈
我们的想法是只使用原生全屏堆栈来显示视频。这可能吗?
我不知道我是否清楚,如果它可以帮助理解,这里是我的MediaPlayerScreen组件的代码

export class MediaPlayerScreen extends Component {
    static navigationOptions = {
        //header: null,
        headerTitle: '',
        headerTransparent: false,
        headerTintColor: 'white',
    }

    constructor(props) {
        super(props)
        this.AG = AG.instance
        this.filePath =
            this.AG.getFilePath() + props.navigation.state.params.file
        this.windowWidth = Dimensions.get('window').width
        this.windowHeight = Dimensions.get('window').height
    }
    //
    onPlaybackStatusUpdate = (playbackStatus) => {
        if (playbackStatus.didJustFinish) {
            this.props.navigation.goBack()
        }
    }
    //
    _handleVideoRef = async (component) => {
        const playbackObject = component
        if (playbackObject) {
            await playbackObject.loadAsync({
                uri: this.filePath,
                shouldPlay: false,
                posterSource: this.poster,
            })
            // todo: Trigger fullScreen without videoStack loading
            //playbackObject.presentFullscreenPlayer();
            playbackObject.playAsync()
            //playbackObject.setOnPlaybackStatusUpdate(this.onPlaybackStatusUpdate);
        }
    }

    componentDidMount() {
        ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.LANDSCAPE)
    }

    componentWillUnmount() {
        //playbackObject.dismissFullscreenPlayer();
        //this.props.navigation.goBack();
        ScreenOrientation.lockAsync(
            ScreenOrientation.OrientationLock.PORTRAIT_UP
        )
    }
    
    onFullscreenUpdate = ({ fullscreenUpdate, status }) => {
        console.log(fullscreenUpdate, status)
        switch (fullscreenUpdate) {
            case Video.FULLSCREEN_UPDATE_PLAYER_WILL_PRESENT:
                console.log(' the fullscreen player is about to present')
                break
            case Video.FULLSCREEN_UPDATE_PLAYER_DID_PRESENT:
                console.log('the fullscreen player just finished presenting')
                break
            case Video.FULLSCREEN_UPDATE_PLAYER_WILL_DISMISS:
                console.log('the fullscreen player is about to dismiss')
                break
            case Video.FULLSCREEN_UPDATE_PLAYER_DID_DISMISS:
                console.log('the fullscreen player just finished dismissing')
        }
    }
    
    render() {
        return (
            <SafeAreaView style={styles.container}>
                <Video
                    ref={this._handleVideoRef}
                    useNativeControls
                    rate={1.0}
                    resizeMode="contain"
                    onPlaybackStatusUpdate={(playbackStatus) =>
                        this.onPlaybackStatusUpdate(playbackStatus)
                    }
                    onFullscreenUpdate={this.onFullscreenUpdate}
                    style={{
                        width: this.windowHeight,
                        height: this.windowWidth,
                    }}
                />
            </SafeAreaView>
        )
    }
}

谢谢你的帮助
Meums/

vsmadaxz

vsmadaxz1#

嘿,如果我没有误解你的意思,你想通过www.example.com全屏加载播放器default.you可以遵循这种方法:

const videoRef = useRef(null);
      <Video
       ref={videoRef}
       useNativeControls={false}
       style={styles.container}
       isLooping
       source={{
         uri: videoUri,
       }}
       onLoad={()=>{
       videoRef?.current?.presentFullscreenPlayer();
        }
       resizeMode="contain"
       onPlaybackStatusUpdate={(status) => setStatus(() => status)}
       />
zf9nrax1

zf9nrax12#

1.基本上,一个小的解决方法是在视图中渲染视频组件,其中视图的样式将高度和宽度设置为1(它将不可见)。
1.您还需要设置视频参考。

<View
      style={{
        height :1,
        width: 1,        
      }}
     <Video
       ref={videoRef}
...

然后,你可以使用这个useEffect:

useEffect(() => {
    let isMounted = true
    if (!id) return;

    (async () => {
      try {
        const response = await fetchVideUrl(id);
        if (response && isMounted) {          
            setSrc(response.url);                    
              const loaded = await videoRef.current?.loadAsync({ uri: response.url });
              const status = await videoRef.current?.playAsync();              
              await videoRef.current?.presentFullscreenPlayer();
          
        }
      } catch (e) {
        console.log(e);
      }
    })();

    return () => {
      isMounted = false;
    };
  }, [id]);

因此,当视频将被加载,它将开始在全屏模式(或它将看起来像那样)。
注意:如果你使用的是底部表单,模态等,你仍然可以使用相同的方法-渲染视频组件的地方,它将不会是可见的,然后启动全屏使用视频的参考。
我也不确定,如果视频加载两次,你会传递source={{uri:“"}”}添加到视频组件。

相关问题