# videoTexture does not appear on iPhone (iOs)

**URL:** <https://discourse.threejs.org/t/videotexture-does-not-appear-on-iphone-ios/43543>\
**Category:** Questions\
**Tags:** ios, video, video-texture, threejs, textures\
**Created:** [October 12, 2022, 8:25am UTC](https://discourse.threejs.org/t/videotexture-does-not-appear-on-iphone-ios/43543 "2022-10-12T08:25:51Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Kemura](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/kemura/32/27932_2.png) [@Kemura](https://discourse.threejs.org/u/Kemura)\
**Post date:** [October 12, 2022, 8:25am UTC](https://discourse.threejs.org/t/videotexture-does-not-appear-on-iphone-ios/43543/1 "2022-10-12T08:25:51Z")

</div>

I have a video texture that doesn’t appear or play when activated on an iPhone and it gives off this WebGL error

```javascript
THREE.WebGLState:
(anonymous)	@	sse-hooks.f742b80f43…19b0d97b5886cd.js:2
texImage2D	@	three.module.js:21276
uploadTexture	@	three.module.js:22207
setTexture2D	@	three.module.js:21734
safeSetTexture2D	@	three.module.js:22627
setValueT1	@	three.module.js:17147
(anonymous)	@	three.module.js:17651
setProgram	@	three.module.js:26039
(anonymous)	@	three.module.js:24882
renderObject	@	three.module.js:25631
renderObjects	@	three.module.js:25601
(anonymous)	@	three.module.js:25398
render	@	app.js:376

```

```javascript
  function render() {
    requestAnimationFrame(render);
    let deltaTime = clock.getDelta();
    TWEEN.update();
    hotspots.HotspotUpdate();
    if (resizeRendererToDisplaySize(renderer)) {
      const canvas = renderer.domElement;
      canvas.style.background = "black";
      camera.aspect = canvas.clientWidth / canvas.clientHeight;
      camera.updateProjectionMatrix();
    }

    water.position.z += movementSpeed * deltaTime;
    modelLoader.frontFoam_L ? animateFrontFoam(deltaTime) : null;
    modelLoader.frontFoam_R ? animateFrontFoam(deltaTime) : null;
    modelLoader.FoamAnimMat.needsUpdate = true;

    controls.update();

    renderer.render(scene, camera);
// this is line 376
    renderer.clearDepth(); // important! clear the depth buffer

    //renderer.render(scene2, camera);

    modelLoader.modelAnimationMixers.forEach((_mixer) => {
      _mixer.update(deltaTime);
    });

    //updateMovement();
    //requestAnimationFrame(render);
  }

```

I followed this [example](https://github.com/mrdoob/three.js/blob/d081c5a3501d272d19375fab1b01fedf9df29b22/examples/webgl_materials_video.html) on threejs and it still does not work.

Below I’ll be comparing my code to the one on github.

It states that I need a startButton variable which has an eventlistener

```javascript
			const startButton = document.getElementById( 'startButton' );
			startButton.addEventListener( 'click', function () {

				init();
				animate();

			} );

```

This is between line 71 - 77

This is my code

```javascript
$("#launch").click(function () {
  $("#c").show();
  $("#cwrapper").show();
  $("#startContainer").addClass("hidden");
  $("#load-wrapper").removeClass("hidden");
  $("#load-wrapper").focus();

  attachArrowFontSizingHooks();
  main.start();
...

```

I call the render function inside of `main.start` function and it looks like this

```javascript
  function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

    renderer.setSize(window.innerWidth, window.innerHeight);

    render();
  }

```

Next up it tells me I need to fetch the video from a html tag, play it, add an eventlistener to it and assign it to a texture that then gets assigned to an object material. Like so:

```javascript
				video = document.getElementById( 'video' );
				video.play();
				video.addEventListener( 'play', function () {

					this.currentTime = 3;

				} );

				texture = new THREE.VideoTexture( video );

				const parameters = { color: 0xffffff, map: texture };

```

This is what I have done

```javascript
let video = document.getElementById("video"); // link video HMTL element to JS
video.play();
video.addEventListener( 'play', function () {

  this.currentTime = 3;

} );

let videoTexture = new THREE.VideoTexture(video); // create texture for video

export let FoamAnimMat = new THREE.MeshBasicMaterial({
  alphaMap: videoTexture,
  alphaTest: 0.45,
  side: THREE.DoubleSide,
  fog: false
});

```

This is my HTML tag

```javascript
    <video
      id="video"
      loop
      crossorigin="anonymous"
      style="display: none;"
      playsinline
      autoplay
      muted
    >
      <source
        src="videos/Foam_512.mp4"
        type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'
      />
    </video>

```

This is what I get

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/3/0/30ebb269cdba8ef1d1e8d7de5429175c8efeac50.jpeg)

This is what appears in the browser(windows/mac)  
 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/4/b/4bee294d67f5bfe60f47e0e2c4dbbd7c68738914.png)

Why isn’t it working?

UPDATE:  
I forked the threejs example and re-built it in codesandbox because I wanted to see if it my video file was corrupt or if the code didn’t work as intended. You can test it here

> **[webgl\_materials\_video\_test - CodeSandbox](https://codesandbox.io/s/eloquent-andras-tfx4ht?file=%2Findex.html)**
>
> webgl\_materials\_video\_test by Kemura

**It didn’t work.** But when I visit the same example on the examples [page](https://threejs.org/examples/?q=video#webgl_materials_video) it _works_. Is sandbox as a platform the problem or I am still missing something?

---

<div class="post-metadata">

**Author:** ![Kemura](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/kemura/32/27932_2.png) [@Kemura](https://discourse.threejs.org/u/Kemura)\
**Post date:** [October 13, 2022, 1:31pm UTC](https://discourse.threejs.org/t/videotexture-does-not-appear-on-iphone-ios/43543/2 "2022-10-13T13:31:49Z")

</div>

Solved it. Seems to be a **codesandbox** issue. I set up a nodejs project and hosted it on heroku. The hosted version works on mobile devices ([https://webgl-texture-example.herokuapp.com](https://webgl-texture-example.herokuapp.com)) and it is exactly the same.  
I suspect some kind of CORS-error that does not get displayed or something. Because something blocks the video from correctly loading (as you can’t see any images, but the sound plays) and that issue resides within the code editor.