android - 如何在横向 RN（IOS 和 Android）上将内嵌视频自动播放为全屏

Question

我用 React Native 为两个平台（Android 和 IOS）制作了一个项目，在第一页和帖子页面是自动播放的视频。这个视频有时是 youtube，有时是 m3u8。在纵向上我想在下面播放一些内容，在横向上我想全屏播放。

我使用 react-native-android-fullscreen-webview-video 来操作 WebView 组件，并且在 Android 上它可以工作。但顾名思义，它仅适用于 android。我也希望 IOS 有类似的行为。我尝试 react-native-af-video-player 但是当我设置依赖 react-native-orientation 时，视频卡在全屏模式。react-native-af-video-player 也仅适用于 mp4 播放器。

 if(livestream.type === 'youtube' && Platform.OS === 'android') {
            the_live_video = (
                <WebView
                    style={{ width: VIDEO_WIDTH, height: VIDEO_HEIGHT, alignSelf: 'stretch' }}
                    javaScriptEnabled
                    source={{
                    uri: livestream.url
                }}
                />
            ) 
        } else if(livestream.type === 'youtube' && Platform.OS === 'ios') {
            the_live_video = (
                <WebView
                    style={{ width: VIDEO_WIDTH, height: VIDEO_HEIGHT, alignSelf: 'stretch' }}
                    javaScriptEnabled
                    source={{
                    uri: livestream.url
                }}
                />
            ) 

        } else if(livestream.type === 'jwplayer' && Platform.OS === 'android') { 
            the_live_video = (
                <WebView
                    style={{ width: VIDEO_WIDTH, height: VIDEO_HEIGHT, alignSelf: 'stretch' }}
                    javaScriptEnabled
                    source={{
                    uri: livestream.url
                }}
                />
            ) 
        } else if(livestream.type === 'jwplayer' && Platform.OS === 'ios') {

            const video = {
                html: `<video width="${VIDEO_WIDTH}" height="${VIDEO_HEIGHT}"  controls  src="${
                    livestream.url
                }"></video>`
            };
            the_live_video = (
                <WebView
                    style={{ width: VIDEO_WIDTH, height: VIDEO_HEIGHT, alignSelf: 'stretch' }}
                    javaScriptEnabled
                    source={video}
                />
            ) 

        }

正如我所说，我也想要 IOS 平台的 react-native-android-fullscreen-webview-video 的行为。

标签： androidiosreact-nativevideo