React Native - 如何在 IOS 中防止全屏视频模式？

Question

我正在为 IOS 使用 react native 创建一个简单的视频应用程序。但问题是，当我播放视频时，视频以全屏模式播放，即使我将属性 allowsInlineMediaPlayback 设置为 true 但仍然没有任何印象。谁能告诉我们为什么使用 allowsInlineMediaPlayback 属性以及如何在 IOS 中启用内联视频模式？

即使我也将 webkit-playsinline 属性添加到 HTML video 标签，但在 react native 网站上有记录（如下所示），但仍然无法正常工作。

NOTE:

In order for video to play inline, not only does this property need to be set to true, but the video element in the HTML document must also include the webkit-playsinline attribute.

请查看以下链接：

谢谢！！！

Answer 1

只需从 webkit-playsinline 中删除 webkit 前缀，因为不再需要也不支持 webkit 前缀。

以下是您在问题中分享的代码的正确修改代码片段：

import React, { Component } from 'react';
import { WebView, View } from 'react-native';

export default class MyVideoApp extends React.Component{
    render(){
        return(
            <View style={{
                flex: 1,
                flexDirection: 'column',
                justifyContent: 'center',
                alignItems: 'center'
            }}>
                <WebView
                source={{
                    html: '<video playsinline controls autoplay src="https://www.w3schools.com/html/mov_bbb.mp4" ></video>'
                }}
        useWebKit={true}
                originWhitelist={['*']}
                allowsInlineMediaPlayback={true}
                style={{
                    height: 600,
                    width: 400,
                }}/>
            </View>
        );
    }
}

Answer 2

在您的视频标签中输入 "playsInline"

React Native - 如何在 IOS 中防止全屏视频模式？

React Native - How to prevent full screen video mode in IOS?

html5-video

ios

reactjs

react-native