Play both video and its audio on both Android and IOS.

[Fatima-Aslam]

Is there any method to play a video (not with muted param) in both Android and IOS. Can it be done with "Autoplay"? If yes, then can you please provide me its code? If not, then can please provide me a code with Play, Pause, and Stop buttons for the video which appears after marker detection? Here's my code: ` <video id="Bunny" loop="true" autoplay="false" playsinline webkit-playsinline crossorigin="anonymous" src="https://cdn.glitch.global/ed59f392-98b4-4e03-a125-c1959cb5a0bb/y2mate.com%20-%20Big%20Bunny%201%20min%2053mb_360p.mp4?v=1693619290153">

  <a-video src="#Bunny" width="1" height="0.552" position="0 0 0" play-on-click></a-video>
  <a-plane color="blue" opaciy="0.5" position="0 0 0.3" height="0.552" width="1" rotation="0 0 0"
           text="align:center;
            width:4;
            wrapCount:100;
            color: white;
            value: Click or tap to start video" hide-on-play="#Bunny">
  </a-plane>

<script>
AFRAME.registerComponent('play-on-click', {
  init: function () {
    this.onClick = this.onClick.bind(this);
  },
  play: function () {
    window.addEventListener('click', this.onClick);
  },
  pause: function () {
    window.removeEventListener('click', this.onClick);
  },
  onClick: function (evt) {
    var videoEl = this.el.getAttribute('material').src;
    if (!videoEl) { return; }
    this.el.object3D.visible = true;
    videoEl.play();
  }
});
AFRAME.registerComponent('hide-on-play', {
  schema: {type: 'selector'},
  init: function () {
    this.onPlaying = this.onPlaying.bind(this);
    this.onPause = this.onPause.bind(this);
    this.el.object3D.visible = !this.data.playing;
  },
  play: function () {
    if (this.data) {
      this.data.addEventListener('playing', this.onPlaying);
      this.data.addEventListener('pause', this.onPause);
    }
  },
  pause: function () {
    if (this.data) {
      this.data.removeEventListener('playing', this.onPlaying);
      this.data.removeEventListener('pause', this.onPause);
    }
  },
  onPlaying: function (evt) {
    this.el.object3D.visible = false;
  },
  onPause: function (evt) {
    this.el.object3D.visible = true;
  }
});
</script>

The error, in this code is... audio doesn't stop as the "marker lost" in both Android and IOS. I want both video and audio only on marker detection. Thanks in advance!

[ZhilinAR]

hello! I have the same problem. Have you found a solution to the problem?

[hiukim]

not entirely sure I follow your logic. but you didn't call any videoEl.pause()? did you? that's why the video(audio) is still playing?

[ZhilinAR]

не совсем уверен, что следую вашей логике. но ты никому не звонил videoEl.pause()? ты сделал? вот почему видео (аудио) все еще воспроизводится? The video starts when you click on it. and pauses when clicked. When I remove the camera from the trigger, the audio from the video continues to play. Tell me if I can send you my code so you can see my error. I will be very grateful.

[hiukim]

you need to call videoEl.pause, otherwise the video doesn't stop