iOS playsInline not working

Bugs
1

“Im in Ionic Angular ,When playing the video from iOS, it opens the default video player instead of playing the video inline.”

 // This creates a basic Babylon Scene object (non-mesh)
  this.scene = new BABYLON.Scene(this.engine);

  // This creates and positions a free camera (non-mesh)
  var camera = new BABYLON.FreeCamera("camera", new BABYLON.Vector3(0, 0, -10), this.scene);

  // Disabilita i controlli della telecamera
  camera.detachControl(this.canvas);

  // Creazione del piano
  var planeOpts = {
      height: 5.4762, // Altezza sufficiente per coprire l'intera visuale
      width: 7.3967,  // Larghezza sufficiente per coprire l'intera visuale
      sideOrientation: BABYLON.Mesh.DOUBLESIDE
  };
  var ANote0Video = BABYLON.MeshBuilder.CreatePlane("plane", planeOpts, this.scene);

  // Posiziona il piano davanti alla telecamera
  ANote0Video.position = camera.position.add(new BABYLON.Vector3(0, 0, 10)); // Distanza di 10 unità dalla telecamera

  // Applica la texture video al piano
  var ANote0VideoMat = new BABYLON.StandardMaterial("m", this.scene);
  var ANote0VideoVidTex = new BABYLON.VideoTexture("vidtex", "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4", this.scene, true, false, true);
  ANote0VideoVidTex.video.playsInline = true;
  ANote0VideoVidTex.video.loop = false;
  ANote0VideoVidTex.video.controls = false;
  ANote0VideoVidTex.video.title = false;
  console.log(ANote0VideoVidTex.video, 'viddeo')
  ANote0VideoMat.diffuseTexture = ANote0VideoVidTex;
  ANote0VideoMat.roughness = 1;
  ANote0VideoMat.emissiveColor = new BABYLON.Color3.White();
  ANote0Video.material = ANote0VideoMat;

  // Gestione della riproduzione/pausa del video al click del mouse
  this.scene.onPointerObservable.add(function (evt) {
      if (evt.pickInfo.pickedMesh === ANote0Video) {
          if (ANote0VideoVidTex.video.paused)
              ANote0VideoVidTex.video.play();
          else
              ANote0VideoVidTex.video.pause();
          console.log(ANote0VideoVidTex.video.paused ? "paused" : "playing");
      }
  }, BABYLON.PointerEventTypes.POINTERPICK);```
2

is it the same when you try this particular PG ? https://playground.babylonjs.com/#ZMCFYA#83

4

then, it might have more to do with Ionic Angular than Babylon.js

5

On a recent project, I believe we had the same issue with Angular and Three.js. I’ll update this if I can dig up how they fixed it but fairly confident this is iOS and Angular.

1 Like
6

It looks like this is how we got it to work

this._video.setAttribute('playsInLine', 'playsInLine');
this._video.controls = true;
this._video.playsInline = true;
1 Like
7

wouldnt playsInline = true; overrides the setAttribute(‘playsInLine’, ‘playsInLine’); ?

8

We are actually setting it up like this

image

and I wonder if we should change it ?

9

Apparently, on webkit, it looks for the attribute to be set. I don’t think that setting the property on the video element overrides attributes for standard HTML elements.