Question

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

即使我也向IOS标签添加了webkit-playsinline属性，但在HTML video网站上有记录（如下所示），但仍然无法使用。

注意：

要使视频内联播放，不仅此属性需要   设置为true，但HTML文档中的video元素也必须   包括webkit-playsinline属性。

请查看以下链接：

谢谢!!!

Answer 1

只需从webkit中删除webkit-playsinline前缀，因为不再需要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中的全屏视频模式？

2 个答案: