Video texture show black screen iOS only

Questions
,
1

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 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?

1 Like
2

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.

3

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

4

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.

5

Please share a live example that demonstrates the issue.

6

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.

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

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