如何使用 Next.js 防止 IOS 设备点击 gif

Question

我实际上想循环显示一个视频，这也是视频无法在 iPhone 中自动启动的问题，所以我尝试仅在 iPhone 设备上使用 gif。但是 gif 也会出现问题，当有人点击 gif 时，它会以全屏方式打开它们，我想阻止这种点击，我在 gif 上创建了一个叠加层，但它也不起作用。

这是代码

import Link from 'next/link';
import React, { useEffect, useRef, useState } from 'react';
import { useRouter } from "next/router";
import trans from '../trans';
import Image from 'next/image';
import { LoadingOutlined } from '@ant-design/icons';

const DecaHeroSection = () => {
    const { locale } = useRouter();

    const {
        section1HeadingLine1,
        section1HeadingLine2,
        section1HeadingLine3,
        section2Subheading,
        section1paragraph,
        learnMore
    } = trans[locale];
    let sliderRef = useRef(null);
    const router = useRouter();
    const [Loading, setLoading] = useState(true);
    const [IsIphone, setIsIphone] = useState(false);

    const handleContextMenu = (event) => {
        event.preventDefault(); // Prevent the default context menu
    };
    useEffect(() => {
        const userAgent = window.navigator.userAgent.toLowerCase();

        if (userAgent.includes('iphone') | userAgent.includes('ipad')) {
            setIsIphone(true);

        }
        setTimeout(() => {
            setLoading(false)
        }, 1000);
    }, []);
    const preventFullScreen = (e) => {
        e.preventDefault();
    };

    return (
        <>
            <section className="heroSection relative">
                <div className="wrapHero container mx-auto flex flex-col-reverse sm:flex-row           sm:items-center sm:justify-between ">
                   
                    <div className="sm:w-[45%]  lg:w-[55%] min-h-[285px] overflow-hidden -z-10 relative">
                        {Loading ? <LoadingOutlined className='absolute top-1/2 bottom-1/2 left-1/2 right-1/2' /> : 
                        !IsIphone ? 
                        <video className="" playsinline autoplay="autoplay" loop="true" muted onContextMenu={handleContextMenu} onclick="this.play()">
                            <source src="/decaVideoWB.mp4" type="video/mp4" />
                            Your browser does not support the video tag
                        </video> :
                            <div className='-z-20 absolute top-0 bottom-1 left-0 right-0'>
                                <img src="/decaVideoWB.gif" className='-z-20 object-cover' draggable="false" style={{ touchAction: 'none' }} onClick={preventFullScreen} onContextMenu={handleContextMenu} />
                            </div>
                        }
                        <div className='absolute top-0 bottom-0 left-0 right-0 bg-transparent pointer-events-none'></div>

                    </div>
                </div>
            </section>
        </>
    );
}

export default DecaHeroSection;

Answer 1

iOS设备上视频无法自动播放的问题源于苹果的限制。这是为了避免自动播放视频而导致意外的数据使用。不过，如果满足某些条件，则允许视频自动播放：

• 视频应静音。
• 视频应内嵌播放。

<video playsInline autoPlay muted loop>
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" />
</video>