javascript - react - prevent video from going fullscreen on iOS - Stack Overflow

admin管理员组

文章数量:1426048

I am making a web app with video playback and custom controls: a Next Video button and a Previous Video Button. My ponent looks like this:

const videos = [
    '.mp4',
    '.mp4',
    '.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>
    );
}

The problem is this: when I click Next or Prev buttons, the videos do switch between one another, but after every switch they are entering fullscreen mode on iOS. I don't need that, I need my controls around the video being played.

Is there a way to prevent that?

I am making a web app with video playback and custom controls: a Next Video button and a Previous Video Button. My ponent looks like this:

const videos = [
    'https://d3t1nqlebka5eu.cloudfront/videos3/82818a63-1972-4e39-b296-9cd3b85b0b39.mp4',
    'https://d3t1nqlebka5eu.cloudfront/videos3/dd4dd6c5-95b7-41c2-b131-7b62392ad1b5.mp4',
    'https://d3t1nqlebka5eu.cloudfront/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>
    );
}

The problem is this: when I click Next or Prev buttons, the videos do switch between one another, but after every switch they are entering fullscreen mode on iOS. I don't need that, I need my controls around the video being played.

Is there a way to prevent that?

• javascript
• ios
• reactjs
• video

Share Improve this question Follow edited Mar 12, 2020 at 20:41 kurtgn asked Mar 12, 2020 at 20:35 kurtgnkurtgn 8,7621515 gold badges6161 silver badges103103 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

Assuming you already found an answer but for other people looking at this in the future, I suspect the issue was your capitalization of playsinline - in React you have to provide it as playsInline in order for it to be applied correctly, but that prop should prevent iOS from forcing videos into fullscreen when they start playing.

本文标签： javascriptreactprevent video from going fullscreen on iOSStack Overflow