Video.js 不适用于 iOS Safari、Chrome 等

编程问答 2022-05-22

问题描述

我使用光滑的滑块和 Videojs。一切正常，但 Videojs 上的视频无法在 iOS 上启动。我仍然无法解决这个问题，现在它开始困扰我。

视频的横幅来到滑块，但没有启动。进度条在视频播放期间不断前进。

有没有人遇到过这个问题？我应该走什么样的路？

Android、桌面浏览器：好的！ （视频格式：MP4）

DevTools 切换设备工具栏：好的！ （视频格式：MP4）

iOS 浏览器（Chrome、Safari 等）：无法启动（视频格式：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
      }
    )
  })()
}

我的PHP文件：

 <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>

我巧妙的设置：

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'),},

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascriptjqueryvideo.js