react - 防止视频在 iOS 上全屏显示答案

【问题标题】：react - prevent video from going fullscreen on iOSreact - 防止视频在 iOS 上全屏显示
【发布时间】：2020-03-12 20:35:43
【问题描述】：

我正在制作一个带有视频播放和自定义控件的网络应用程序：一个下一个视频按钮和一个上一个视频按钮。我的组件如下所示：


const videos = [
    'https://d3t1nqlebka5eu.cloudfront.net/videos3/82818a63-1972-4e39-b296-9cd3b85b0b39.mp4',
    'https://d3t1nqlebka5eu.cloudfront.net/videos3/dd4dd6c5-95b7-41c2-b131-7b62392ad1b5.mp4',
    'https://d3t1nqlebka5eu.cloudfront.net/videos3/29812506-e67d-4cab-b2b3-82461a4eadf1.mp4',
]

function App() {

    const [videoIndex, setVideoIndex] = useState(0);
    const h1Ref = useRef<HTMLVideoElement>(null);

    return (
        <div>
            <DivButton onClick={() => {
                setVideoIndex(getPrevIndex(videoIndex));
                h1Ref.current!.load();
            }}>
                Prev
            </DivButton>
            {' '}
            <DivButton onClick={() => {
                setVideoIndex(getNextIndex(videoIndex));
                h1Ref.current!.load();
            }}>
                Next
            </DivButton>
            <div>
                <video id="video_player" autoPlay muted loop playsinline preload="" ref={h1Ref}>
                    <source id="video_player_source" src={videos[videoIndex]} type="video/mp4"/>
                </video>

            </div>

        </div>
    );
}

问题是这样的：当我单击 Next 或 Prev 按钮时，视频确实会在彼此之间切换，但每次切换后它们都会在 iOS 上进入全屏模式。我不需要那个，我需要控制正在播放的视频。

有没有办法防止这种情况发生？

【问题讨论】：

标签： javascript ios reactjs video

【解决方案1】：

假设您已经找到了答案，但对于其他人在未来查看此问题，我怀疑问题是您的 playsinline 大写 - 在 React 中，您必须将其提供为 playsInline 才能应用它正确，但该道具应防止 iOS 在视频开始播放时强制进入全屏模式。

【讨论】：