iOS playsInline not working

“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

  // 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", "", this.scene, true, false, true); = true; = false; = false; = false;
  console.log(, '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 (
          console.log( ? "paused" : "playing");
  }, BABYLON.PointerEventTypes.POINTERPICK);```

is it the same when you try this particular PG ?

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

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

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

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

We are actually setting it up like this


and I wonder if we should change it ?

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.