Я пытаюсь показать видео внутри текста, обрезав видео на текстовую маску. Он отлично работает над Android и Windows, но не работает на устройствах iOS. Любое предложение о том, как это исправить."use client";
import { useRef, useEffect } from "react";
export default function AnimatedVideoText() {
const videoRef = useRef(null);
useEffect(() => {
// autoplay if allowed
videoRef.current?.play().catch(() => {});
}, []);
return (
{/* three lines of white text punch holes in the mask */}
Your Creative
Development
Agency
{/* foreignObject spans the full SVG and is clipped by our mask */}
);
}
< /code>
Это CSS, который я использую < /p>
.video-text-mask {
-webkit-mask-image: text;
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: contain;
-webkit-mask-position: center;
mask-image: text;
}
.video-section {
overflow: hidden;
position: relative;
width: 400px;
height: 200px;
background-color: rgb(255, 255, 255);
}
.video-section video {
width: 100%;
height: 100%;
object-fit: cover;
}
.video-copy {
height: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
font-size: 48.4vw;
margin-left: -2vw;
line-height: 78vw;
user-select: none;
mix-blend-mode: multiply;
}
< /code>
iPhone. alt = "iPhone выпуск" src = "https://i.sstatic.net/cwg3mnqg.png"/>
/>
Подробнее здесь: https://stackoverflow.com/questions/796 ... ils-to-cli
