Video texture not working on mobile safari

Questions
, ,
1

import React from ‘react’
import { useGLTF, useTexture, useVideoTexture } from ‘@react-three/drei’
import { ShaderMaterial } from ‘three’;
import { vertexShader, fragmentShader } from ‘…/Shaders’;
import { ModelAnimation } from ‘@/animations/ModelAnimation’;

export function Model(props) {
const { nodes, materials } = useGLTF(‘/iphone15pro.glb’)
const texture1 = useVideoTexture(‘/textures/video.mp4’);
const texture2 = useTexture(‘/textures/texture2.png’);
const texture3 = useTexture(‘/textures/texture3.png’);
const texture4 = useTexture(‘/textures/texture4.png’);
const texture5 = useTexture(‘/textures/texture5.png’);
const texture6 = useVideoTexture(‘/textures/video2.mp4’);
const texture7 = useTexture(‘/textures/texture6.png’);

const blendMaterial = new ShaderMaterial({
uniforms: {
texture1: { value: texture1 },
texture2: { value: texture2 },
texture3: { value: texture3 },
texture4: { value: texture4 },
texture5: { value: texture5 },
texture6: { value: texture6 },
texture7: { value: texture7 },

  blendFactor1: { value: 0.0 },
  blendFactor2: { value: 0.0 },
  blendFactor3: { value: 0.0 },
  blendFactor4: { value: 0.0 },
  blendFactor5: { value: 0.0 },
  blendFactor6: { value: 0.0 },

},
vertexShader,
fragmentShader,
transparent: true,

});

const meshRef = ModelAnimation(blendMaterial);

return (
<group {…props}
dispose={null}
ref={meshRef}
rotation={[0, -Math.PI + 0.1, 0]}
position={[-3, 0, 0]}
>


…

I’m passing my textures like this to shaderMaterial,so the textures change where i added animation on scrolling , the issue is the video doesn’t support in mobile safari other textures works all fine.Does anyone know how to solve this issue?