useVideoTexture shows black screen on IOS only

Questions
1

On computers (both MAC and Windows) video works well. However, on the iphone it’s showing a black screen.

https://ibrahim-samara.vercel.app/scene

        function VideoMaterial({ url, ...prop }) {
            const texture = useVideoTexture(`\Textures${url}`)

            return (<meshBasicMaterial ref={project} map={texture} toneMapped={false} {...prop} />)
        }
2

it should probably be /textures/${url}. yours looks like a windows filesystem path, not a url.

but either way, safari behaves different than other browsers, it can’t play video without previous user interaction, and they also implement load events differently - the standard load event isn’t triggered by safari.

best use a generic video element like you always would, not the hook. the hook suspend until the load fires, and that makes it hang on if it doesn’t.

1 Like
3

Thanks for your response. I don’t think its the path since I have a Textures folder in the public folder and the video works well on computers and interestingly enough on a iPhone 11(Safari and Chrome). However, the majority other iPhones don’t work.

I’m just starting out with three.js and I directly started using react-three/fiber. How do you suggest using a generic video element?

4

Ok the video started working on my device without changing anything. weird. Android phones seems to work normally. Anyone know why?

5

I have noticed that a video texture in my scene does not play on safari/Iphone when it is in energy saving mode. This only occurs for video textures, other videos in html does autoplay…