# Video texture show black screen iOS only

**URL:** <https://discourse.threejs.org/t/video-texture-show-black-screen-ios-only/16897>\
**Category:** Questions\
**Tags:** ios, video-texture\
**Created:** [July 8, 2020, 10:04am UTC](https://discourse.threejs.org/t/video-texture-show-black-screen-ios-only/16897 "2020-07-08T10:04:52Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Heiddo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/heiddo/32/11844_2.png) [@Heiddo](https://discourse.threejs.org/u/Heiddo)\
**Post date:** [July 8, 2020, 10:04am UTC](https://discourse.threejs.org/t/video-texture-show-black-screen-ios-only/16897/1 "2020-07-08T10:04:52Z")

</div>

I’m trying to get a video texture playing on iOS devices. But I keep just getting a black screen & no audio.

I’m not expecting it to autoplay. But I’m struggling to figure out what qualifies as ‘user interaction’.

The example [here](https://github.com/mrdoob/three.js/blob/25d16a2c3c54befcb3916dbe756e051984c532a8/examples/webgl_materials_video.html) works fine on my iOS test device. Is there something specific about the example that made it work? For example, does the user interaction have to be a button specifically. Does that button have to be used to init and animate your whole app like the example? Why do apple want me to suffer.

```
<video id="video" loop crossOrigin="anonymous" playsinline style="display:none">

        <source src="textures/whoops.ogv" type='video/ogg; codecs="theora, vorbis"'>

        <source src="textures/whoops.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>

    </video>

```

–

```
instructions.addEventListener( 'touchstart', function(evt){
				video = document.getElementById( 'video' );
				video.play();
				video.addEventListener('play', function() {
					this.currentTime = 3;
				}, false);

				texture = new THREE.VideoTexture( video );
				var parameters = { color: 0xffffff, map: texture };
				let videogeometry = new THREE.PlaneBufferGeometry(1280, 720);
				let videomaterial = new THREE.MeshLambertMaterial ( parameters );
				let videomesh = new THREE.Mesh( videogeometry, videomaterial );
				scene.add(videomesh)
				videomesh.scale.set(0.7,0.7,0.7);
				videomesh.position.y = 500;
				videomesh.position.z = -300;

			});

```

For reference this is what I had to do to get device orientation permission working:

> **Device Orientation Permission**
>
> ```
> dcontrols = new DeviceOrientationControls ( camera );
> 
> dcontrols.disconnect();
> 
>                 
> 
> instructions.addEventListener( 'touchend', function (evt) {
> 
>                     
> 
> console.log ('touch test');
> 
> dcontrols.connect();
> 
> dcontrols.enabled = true;
> 
> instructions.style.display = 'none';
> 
> blocker.style.display = 'none';
> 
> ```

Does anyone have recent experience with this?

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [July 8, 2020, 10:42am UTC](https://discourse.threejs.org/t/video-texture-show-black-screen-ios-only/16897/2 "2020-07-08T10:42:39Z")

</div>

> [@Heiddo](#):
>
> For example, does the user interaction have to be a button specifically.

No, but you should only start playing a video with sound if a user interaction has happened.

This policy does make sense since otherwise websites (especially content like banners) would just start playing unmuted videos which is in general a bad (and annoying) style.

---

<div class="post-metadata">

**Author:** ![Heiddo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/heiddo/32/11844_2.png) [@Heiddo](https://discourse.threejs.org/u/Heiddo)\
**Post date:** [July 8, 2020, 11:43am UTC](https://discourse.threejs.org/t/video-texture-show-black-screen-ios-only/16897/3 "2020-07-08T11:43:04Z")

</div>

Ok, i’ve been trying with this all morning. Made various buttons, blockers, listeners and functions to tell iOS that a user is initiating this video. Even when muted I get nothing. I will see how easily I can make a live example separate to my current project - I will update if I find a fix. Thanks

---

<div class="post-metadata">

**Author:** ![Heiddo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/heiddo/32/11844_2.png) [@Heiddo](https://discourse.threejs.org/u/Heiddo)\
**Post date:** [July 8, 2020, 12:40pm UTC](https://discourse.threejs.org/t/video-texture-show-black-screen-ios-only/16897/4 "2020-07-08T12:40:21Z")

</div>

I just tried loading a normal image texture with TextureLoader and also get a black plane on iOS. So I don’t think it’s a permission issue anymore.

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [July 8, 2020, 1:11pm UTC](https://discourse.threejs.org/t/video-texture-show-black-screen-ios-only/16897/5 "2020-07-08T13:11:21Z")

</div>

Please share a live example that demonstrates the issue.

---

<div class="post-metadata">

**Author:** ![Heiddo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/heiddo/32/11844_2.png) [@Heiddo](https://discourse.threejs.org/u/Heiddo)\
**Post date:** [July 8, 2020, 1:38pm UTC](https://discourse.threejs.org/t/video-texture-show-black-screen-ios-only/16897/6 "2020-07-08T13:38:29Z")

</div>

I made this live example with no issues. So i tried using the glitch provided links to assets in my own project and it worked! So for whatever reason - when I try to use a video stored in ‘textures/texture.mp4’ I get nothing. textures is folder in ‘public\_html’ on my server and in the project folder locally.

> **[Lackadaisical Vivacious Honeysuckle](https://glitch.com/~lackadaisical-vivacious-honeysuckle)**
>
> sky-shader-test 🎏 Glitch is the friendly community where everyone can discover & create the best apps on the web.

to be clear - I have to use an online link like:

‘[https://cdn.glitch.com/9931a610-b265-425a-9f82-16251fbe7c0a%2Fcoppafeel.jpg?v=1594212757587](https://cdn.glitch.com/9931a610-b265-425a-9f82-16251fbe7c0a%2Fcoppafeel.jpg?v=1594212757587)’ instead of a local/server stored src