VideoTexture doesnt play on mobile

Questions
, ,
1

Hi,
here is the link of my work : https://cosmosv1.vercel.app/

My video texture is not playing on mobile, but it works just fine in desktop ?

I have tried lots of things lately, the code might have some stupid mistakes also. As a beginner, please be gentle if I did silly mistake.

here is a video of the situation : Youtube

here is the code of the video :

const video = document.getElementById("cosmosVideo");

video.setAttribute('crossorigin', 'anonymous');

video.playsInline = true;

video.src = "/Model/cosmosVideo3.mp4";

console.log(video)

const videoTexture = new THREE.VideoTexture(video);

videoTexture.needsUpdate = true;

videoTexture.toneMappingExposure = true;

videoTexture.toneMapping = true;

videoTexture.minFilter = THREE.LinearFilter;

videoTexture.magFilter = THREE.LinearFilter;

videoTexture.encoding = THREE.sRGBEncoding;

videoTexture.outputEncoding = THREE.sRGBEncoding;

and here is the code for the loader :

dracoLoader.setDecoderPath(`/node_modules/three/examples/jsm/libs/draco/`);
dracoLoader.setDecoderConfig({ type: "js" });
gltfLoader.setDRACOLoader(dracoLoader);
gltfLoader.load("/Model/cosmossonunda3.gltf", function (gltf) {
  cosmos = gltf.scene
  gltf.scene.children[1].material.map = videoTexture;
  gltf.scene.children[1].material.map.flipY = false;
  gltf.scene.children[1].material.map.rotation = Math.PI;
  gltf.scene.children[1].material.map.wrapS = THREE.RepeatWrapping;
  gltf.scene.children[1].material.map.wrapT = THREE.RepeatWrapping;
  gltf.scene.children[1].material.roughness = 0
  gltf.scene.children[1].material.lightMapIntensity = 1.3;
  scene.add(gltf.scene);
  console.log(gltf.scene);
  mixer = new THREE.AnimationMixer(gltf.scene);
  action = mixer.clipAction(gltf.animations[0]);
  console.log(action)
2

TBH, I’m not sure how to use the app. When loading it on my mobile phone I only see the driver’s seat from the top. I can’t really interact and control the camera so I can’t see whether the video texture is played or not.

Can you please verify if the following official example works for you? three.js webgl - equirectangular video panorama

I just want to know if there is a general issue with your device/browser.

3

Thank you,

Yes my code is still in progress, you can actually scroll when swipe on the control bar on the left. I am still trying to figure out how to do that efficiently by the way :smiley:

When you click playV from that menu and click unmute. you will probably hear a voice and not the video. The seat will do its animation without video.

I have checked that video alongside other examples with my phone and there is no problem with them.

4

Sometimes it’s easier to demonstrate issues in smaller examples instead of sharing the entire app. The best way is an editable live example like this one so it’s easy to change code and see what happens. three.js dev template - module - JSFiddle - Code Playground

5

Found the problem. I have erased this line and it worked! I have been working on it for 2 days and look at the solution :smiley:

1 Like