iOS Development

javascript – JS play button for HTML5 doesn’t work on iOS cellular

November 1, 2022

[ad_1]

I am making an attempt to get an HTML5 video to play on cellular iOS. Desktop & android work positive.
Clicking the button enters fullscreen mode and performs the video.
I am seeing experiences that some can’t click on the button in any respect although the video thumbnail is loading. The breakdown is presently:

iOS 16.0.2 not working
iOS 15.2.1 works utilizing safari however not firefox or chrome

HTML snippet
`

<div class="video-player">
        <video loop="true" width="400px" preload="auto" playsinline="true" controls="true">
          <supply src="media/video.mp4" sort="video/mp4" />
          <supply src="media/video.webm" sort="video/webm" />
          <p>Your browser does not help HTML5 video. Right here is
            a <a href="media/video.mp4">hyperlink to the video</a> as an alternative </p>
        </video>
        <button><img src="img/play_video.svg"></button>
      </div>

Script in Use


/* Get parts */
var brimmingVideo = doc.querySelector('#brimming .video-player video');
var brimmingFullscreen = doc.querySelector('#brimming .video-player button');
var brimmingIcon = doc.querySelector('#brimming .video-player button img');

/* Construct out features */
// toggle play/pause
perform brimmingtogglePlay() {
  var technique = brimmingVideo.paused ? 'play' : 'pause';
  brimmingVideo[method]();
}

// Create fullscreen video button
perform brimmingtoggleFullscreen() {
  if (brimmingVideo.requestFullScreen) {
    brimmingVideo.requestFullScreen();
    brimmingtogglePlay();
  } else if (brimmingVideo.webkitRequestFullScreen) {
    brimmingVideo.webkitRequestFullScreen();
    brimmingtogglePlay();
  } else if (brimmingVideo.mozRequestFullScreen) {
    brimmingVideo.mozRequestFullScreen();
    brimmingtogglePlay();
  } else if (vid.webkitEnterFullscreen) {
    vid.webkitEnterFullscreen();
 }
  ;
  brimmingVideo.controls = true;
  brimmingVideo.muted = false;
  brimmingIcon.className = "cover";
}

// what occurs whenever you exit fullscreen
perform brimmingexitHandler() {
  if (doc.webkitIsFullScreen === false) {
    brimmingtogglePlay();
    brimmingVideo.muted = true;
    brimmingVideo.controls = false;
  } else if (doc.mozFullScreen === false) {
    brimmingtogglePlay();
    brimmingVideo.muted = true;
    brimmingVideo.controls = false;
  } else if (doc.msFullscreenElement === false) {
    brimmingtogglePlay();
    brimmingVideo.muted = true;
    brimmingVideo.controls = false;
  }
}

/* Hook up occasion listeners */
// Click on occasions
brimmingFullscreen.addEventListener('click on', brimmingtoggleFullscreen);

// Exit fullscreen occasion
brimmingVideo.addEventListener('fullscreenchange', brimmingexitHandler, false);
brimmingVideo.addEventListener('mozfullscreenchange', brimmingexitHandler, false);
brimmingVideo.addEventListener('MSFullscreenChange', brimmingexitHandler, false);
brimmingVideo.addEventListener('webkitfullscreenchange', brimmingexitHandler, false);