Video with custom controls not Playing on iOS (safari & chrome)

Question

I'm developing a platform with Django which hosts videos that are uploaded directly on a server. I'm testing the app and the result I got is that the videos are playing fine on Desktop but they are not playing on mobile iOS (safari & chrome), instead they are playing in mobile with android 10. The videos follow the proper format (mp4) and encoding standards (H264, AAC).

I've read different topics that talk about the proper way to trigger and play a video (ex.1 ex.2) on iOS, but even if I'm following this guideline I'm unable to trigger the video to play when pressing the play button. I've no idea what's wrong with it.

Here is the code:

     <div class="c-video">

      <video class="video" id="video" src="{{ video.video.url }}" type='video/mp4' poster="{{ video.image.url }}"> </video>

      <div class="controls">
        <div class="bar">
          <div class="dragger"></div>
          <div class="barline"></div>
        </div>
        <div class="buttons">
          <button id="play-pause"></button>
        </div>
        <div class="volume-slider">
          <input id="vol-control" type="range" min="0" max="100" step="1" oninput="SetVolume(this.value)" onchange="SetVolume(this.value)"></input>
        </div>
      </div>
     </div>


    <script>

    var video = document.getElementById("video");
    var btn = document.getElementById("play-pause");

    btn.addEventListener('click', function(e) {
        if (video.paused || video.ended) video.play();
        else video.pause();
    });
    </script>

I've also tried to trigger the play event directly from the button as follow but nothing changed:

   <div class="buttons">
   <button id="play-pause" onclick="togglePlay();"></button>
   </div>

   <script>

     var video = document.getElementById("video");
     var btn = document.getElementById("play-pause");

     function togglePlay() {
       if (video.paused || video.ended)
         video.play();
       else
         video.pause();
      }

   </script>

Answer 1

Just add "playsinline" in video tag and its start playing on IOS mobile. working for me.

For Example in my code

<video class="slide-video slide-media" autoplay playsinline  loop muted preload="auto">
   <source src="resources/images/10.mp4" type="video/mp4" />
</video>

Answer 2

I was dealing with a similar issue and the problem wasn't the video format, but the fact that my API din't support HTTP Range Requests which iOS devices require. Django devel server doesn't seem to support the range requests by default judging based on this ticket, but if you set up apache or nginx to serve your video files it should work fine.

I solved the issue by uploading the videos to AWS S3 and serving them directly from there using pre-signed url. This solution gave me both iOS support and access control for the video.

Answer 3

As suggested by @Mick the problem could be on the encoding of the video files this is the output result when running ffprobe on one of the videofiles uploaded to the app:

ffprobe version 4.4 Copyright (c) 2007-2021 the FFmpeg developers
  built with Apple clang version 11.0.0 (clang-1100.0.33.17)
  configuration: --prefix=/usr/local/Cellar/ffmpeg/4.4_2 --enable-shared --enable-pthreads --enable-version3 --cc=clang --host-cflags= --host-ldflags= --enable-ffplay --enable-gnutls --enable-gpl --enable-libaom --enable-libbluray --enable-libdav1d --enable-libmp3lame --enable-libopus --enable-librav1e --enable-librubberband --enable-libsnappy --enable-libsrt --enable-libtesseract --enable-libtheora --enable-libvidstab --enable-libvorbis --enable-libvpx --enable-libwebp --enable-libx264 --enable-libx265 --enable-libxml2 --enable-libxvid --enable-lzma --enable-libfontconfig --enable-libfreetype --enable-frei0r --enable-libass --enable-libopencore-amrnb --enable-libopencore-amrwb --enable-libopenjpeg --enable-libspeex --enable-libsoxr --enable-libzmq --enable-libzimg --disable-libjack --disable-indev=jack --enable-avresample --enable-videotoolbox
  libavutil      56. 70.100 / 56. 70.100
  libavcodec     58.134.100 / 58.134.100
  libavformat    58. 76.100 / 58. 76.100
  libavdevice    58. 13.100 / 58. 13.100
  libavfilter     7.110.100 /  7.110.100
  libavresample   4.  0.  0 /  4.  0.  0
  libswscale      5.  9.100 /  5.  9.100
  libswresample   3.  9.100 /  3.  9.100
  libpostproc    55.  9.100 / 55.  9.100
Input #0, mov,mp4,m4a,3gp,3g2,mj2, from 'SANCHO_LUA.mp4':
  Metadata:
    major_brand     : mp42
    minor_version   : 0
    compatible_brands: mp42mp41
    creation_time   : 2021-06-13T02:23:50.000000Z
  Duration: 00:07:48.07, start: 0.000000, bitrate: 10305 kb/s
  Stream #0:0(eng): Video: h264 (Main) (avc1 / 0x31637661), yuv420p(tv, bt709), 1280x720, 9984 kb/s, 25 fps, 25 tbr, 25k tbn, 50 tbc (default)
    Metadata:
      creation_time   : 2021-06-13T02:23:50.000000Z
      handler_name    : ?Mainconcept Video Media Handler
      vendor_id       : [0][0][0][0]
      encoder         : AVC Coding
  Stream #0:1(eng): Audio: aac (LC) (mp4a / 0x6134706D), 48000 Hz, stereo, fltp, 317 kb/s (default)
    Metadata:
      creation_time   : 2021-06-13T02:23:51.000000Z
      handler_name    : #Mainconcept MP4 Sound Media Handler
      vendor_id       : [0][0][0][0]