fix(useVideoTexture): playsInline for ios (#2127)

Author: abernier

.storybook/stories/VideoTexture.stories.tsx

@@ -35,7 +35,7 @@ function VideoTextureScene(props: React.ComponentProps<typeof VideoTexture>) {
 
 export const VideoTextureSt = {
   args: {
-    src: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
+    src: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
   },
   render: (args) => <VideoTextureScene {...args} />,
   name: 'Default',
@@ -64,7 +64,7 @@ function FallbackMaterial({ url }: { url: string }) {
 
 export const VideoTextureSt2 = {
   args: {
-    src: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
+    src: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
   },
   render: (args) => <VideoTextureScene2 {...args} />,
   name: 'Suspense',

docs/loaders/video-texture-use-video-texture.mdx

@@ -28,6 +28,7 @@ export function useVideoTexture(
     crossOrigin = 'anonymous',
     muted = true,
     loop = true,
+    playsInline = true,
     ...videoProps
   }: {
     unsuspend?: keyof HTMLVideoElementEventMap

src/core/VideoTexture.tsx

@@ -30,6 +30,7 @@ export function useVideoTexture(
     crossOrigin = 'anonymous',
     muted = true,
     loop = true,
+    playsInline = true,
     ...videoProps
   }: {
     unsuspend?: keyof HTMLVideoElementEventMap
@@ -39,7 +40,6 @@ export function useVideoTexture(
 ) {
   const gl = useThree((state) => state.gl)
   const hlsRef = useRef<Hls | null>(null)
-  const videoRef = useRef<HTMLVideoElement | null>(null)
 
   const texture = suspend(
     () =>
@@ -58,9 +58,9 @@ export function useVideoTexture(
           crossOrigin,
           loop,
           muted,
+          playsInline,
           ...videoProps,
         })
-        videoRef.current = video
 
         // hlsjs extension
         if (src && IS_BROWSER && src.endsWith('.m3u8')) {