Я пытаюсь показать видео внутри текста, обрезав видео на текстовую маску. Он отлично работает над Android и Windows, но не работает на устройствах iOS. Любое предложение о том, как это исправить. < /P>
const { useRef, useEffect } = React;
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 */}
);
}
ReactDOM.createRoot(document.getElementById("root")).render();< /code>
.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>
< /code>
< /div>
< /div>
< /p>
iPhone < /th>
< /th>
iPhone < /th>
/>
< /td>
Подробнее здесь: https://stackoverflow.com/questions/796 ... ils-to-cli
