Video.js not working on iOS Safari, Chrome etc

Question

I use a slick-slider and Videojs. Everything works fine but videos on the Videojs do not start on iOS. I still couldn't solve this problem and it started to bother me now.

The banner of the video comes to the slider, but it does not start. The progress bar is progressing during the duration of the video.

Has anyone encountered this problem before? What kind of path should I follow?

Android, Desktop Browsers: OK! (Video format: MP4)

DevTools Toggle Device Toolbar: OK! (Video format: MP4)

iOS Browsers (Chrome, Safari etc.): Doesn't start (Video format: MP4)

main-slider.js

var sliderVideoDuration = 0
var videoElements = $(".bg-video-js")
if ($(".bg-video-js").length > 0) {
  var sliderVideoBG = videojs(videoElements.attr("id")).ready(function () {
    this.one("loadedmetadata", function () {
      sliderVideoDuration = this.duration()
    })

    var hasBgVideo = $(".main-slider")
      .find("[data-slick-index=" + 0 + "]")
      .hasClass("slide-video-bg")
    if (hasBgVideo) {
      $(".main-slider").slick("slickPause")
    }

    if (hasBgVideo) {
      setTimeout(() => {
        $(".slider-dots").each(function (index, element) {
          $(element)
            .find("[data-slide='0']")
            .find(".slider-progress-up")
            .animate({ width: "100%" }, Math.floor(sliderVideoDuration) * 1000)
        })
      }, 500)
    }
  })

  var MainSliderController = (function () {
    var sliderController = $(".slider-controller")

    /*sliderController
      .find('[data-slide="0"]')
      .find(".slider-progress-up")
      .animate({ width: "100%" }, 3 * 1000)*/
    var sliderArrow = sliderController.find(".slider-arrows")
    var sliderDot = sliderController.find(".slider-dot")
    sliderDot.click(function (e) {
      var $this = this
      $(sliderDot).removeClass("active")
      $($this).addClass("active")
      var slideNumber = $($this).data("slide")

      $(".main-slider").slick("slickGoTo", slideNumber)
    })

    videojs(videoElements.attr("id")).play()
    videoElements.on("ended", function () {
      $(".main-slider").slick("slickNext")
      $(".main-slider").slick("slickPlay")
    })

    $(".main-slider").on(
      "afterChange",
      function (event, slick, currentSlide, nextSlide) {
        var sliderController = $(".slider-controller")
        $(".slider-progress-up").css("width", "0px")
        sliderDot.removeClass("active")
        var currentSlideDot = sliderController.find(
          "[data-slide=" + currentSlide + "]"
        )

        sliderController
          .find('[data-slide="' + currentSlide + '"]')
          .addClass("active")

        var hasBgVideo = $(".main-slider")
          .find("[data-slick-index=" + currentSlide + "]")
          .hasClass("slide-video-bg")

        function slideBgVideo() {
          var currentSliderVideoID
          if (hasBgVideo) {
            currentSliderVideoID = $(".main-slider")
              .find("[data-slick-index=" + currentSlide + "]")
              .find("video")
              .attr("id")
            videojs(currentSliderVideoID).play()
            $(".main-slider").slick("slickPause")
          }
          console.log(currentSliderVideoID)
        }

        slideBgVideo()

        if (hasBgVideo) {
          currentSlideDot
            .find(".slider-progress-up")
            .animate({ width: "100%" }, Math.floor(sliderVideoDuration) * 1000)
        } else {
          currentSlideDot
            .find(".slider-progress-up")
            .animate({ width: "100%" }, 3 * 1000)
        }

        return false
      }
    )
  })()
}

my php file:

 <figure class="slide-bg-video">
  <div class="video-player">
   <video muted id="slider-video-bg-0" class="bg-video-js bg-video-js-0" data-setup='{"controls": false, "autoplay": true}'>
    <source src="assets/images/content/xxx.mp4" type="video/mp4" />
  </div>
 </figure>

my slick setup:

mainSlider: {
        dots: false,
        infinite: true,
        speed: 300,
        autoplay: true,
        autoplaySpeed: 3000,
        fade: true,
        cssEase: 'linear',
        arrows: true,
        appendArrows: HomeSliderController,
        prevArrow: HomeSliderController.find('.slider-arrow.arrow-left'),
        nextArrow: HomeSliderController.find('.slider-arrow.arrow-right'),
    },