完整的SWIPER支持视频轮播的代码

以下是完整的一个代码，并测试了安卓，鸿蒙，IOS系统都可以播放。

 <div class="swiper-container index-banner">
    <div class="swiper-wrapper">
      {hmcms:list num=10  scode=60 order='sorting asc,id desc'}
       {hmcms:if('[list:enclosure drophtml=1 lencn=5]'>'')}  
       <div class="swiper-slide" >
            <video class="video" src="[list:enclosure]"  
             muted 
             autoplay 
             playsinline 
              webkit-playsinline 
             x5-playsinline 
             preload="auto"
             poster="[list:ico]"
             ></video>
               <div class="container">
                  <div class="position-absolute text-light text-center px-3" style="top:30%;">
                      <h1 class="fs-18 wow slideInUp fweight mb-4">[list:title]</h1>
                      <h2 class="fs-16 wow slideInUp mb-4">[list:subtitle]</h2>
                      <h3 class="fs-14 fs-sm-18 wow slideInUp">[list:content]</h3>
                  </div>
              </div>
          </div>
           {else}
           <div class="swiper-slide" >
            <a href="[list:outlink]">
              <img src="[list:ico]" class="d-block w-100" >
            </a>
              <div class="container">
                <div class="position-absolute text-light text-center px-3" style="top:30%;">
                <h1 class="fs-18 wow slideInUp fweight mb-4">[list:title]</h1>
                <h2 class="fs-16 wow slideInUp mb-4">[list:subtitle]</h2>
                <h3 class="fs-14 fs-sm-18 wow slideInUp">[list:content]</h3>
                </div>
            </div>
          </div>
              {/hmcms:if}
   {/hmcms:list}
    </div>
    <div class="swiper-button-prev d-none d-md-block"></div>
    <div class="swiper-button-next d-none d-md-block"></div>
    <div class="swiper-pagination"></div>
 
</div>
 
 
<script>
var mySwiper = new Swiper('.index-banner', {
  direction: 'horizontal',
  loop: true,
  speed: 1500,
  // 关闭 swiper 的 autoplay，使用视频结束来切换
  pagination: { el: '.swiper-pagination', clickable: true },
  navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' },
  on: {
    init: function () {
      playCurrentVideo(this);
    },
    // 等切换动画结束后再播放（避免动画中找不到 active）
    slideChangeTransitionEnd: function () {
      playCurrentVideo(this);
    }
  }
});

// 播放当前 activity 的视频，暂停其它并清理事件处理器
function playCurrentVideo(swiperInstance) {
  // 先暂停所有视频并清理 onended（避免重复触发）
  document.querySelectorAll('.swiper-slide video').forEach(function(v){
    try { v.pause(); } catch(e){}
    try { v.onended = null; } catch(e){}
  });

  // 取当前 active slide（兼容 loop 后的克隆）
  var currentSlide = document.querySelector('.swiper-slide-active');
  if (!currentSlide) return;

  var currentVideo = currentSlide.querySelector('video');
  if (currentVideo) {
    // 用 onended 属性绑定（覆盖旧的处理器，避免多次绑定）
    currentVideo.onended = function() {
      // 切到下一页（Swiper 会触发 slideChangeTransitionEnd，从而播放下一个视频）
      swiperInstance.slideNext();
    };

    // 触发播放（在微信/QQ 等也许被拦截，先尝试）
    currentVideo.play().catch(function(err){
      // 被浏览器拦截（例如微信需要手势），打印以便调试
      console.log('video.play() 被拦截或出错：', err);
    });
  } else {
    // 不是视频（比如图片），设置一个简单的停留时间后切换（可按需调整）
    setTimeout(function() {
      swiperInstance.slideNext();
    }, 3000);
  }
}

// 兼容微信/QQ 内核：在 JSBridgeReady 或首次触摸时，尝试播放当前视频
function playCurrentOnWeixin() {
  var active = document.querySelector('.swiper-slide-active');
  if (!active) return;
  var v = active.querySelector('video');
  if (v) {
    v.play().catch(function(err){
      console.log('微信/QQ play 被拦截：', err);
    });
  }
}
document.addEventListener("WeixinJSBridgeReady", function(){ playCurrentOnWeixin(); }, false);
document.addEventListener("touchstart", function(){ playCurrentOnWeixin(); }, { once: true });
</script>

另外推荐一个PC端的轮播视频，：https://www.jq22.com/jquery-info20585

但是代码最好修改一下，以下是我修改后更实用一点的。

<link rel="stylesheet" type="text/css" href="/static/css/style.css">
<div class='o-sliderContainer d-none d-md-block' id="pbSliderWrap0" style="margin:0; background:none!important;">
  <div class='o-slider' id='pbSlider0' style="background:none!important; opacity: 1; position: relative;">
   {hmcms:list num=5 scode=60 order='sorting asc,id desc'} 
      {hmcms:if('[list:enclosure drophtml=1 lencn=5]'>'')}  
    <div class="o-slider--item" style="background: url([list:ico]) center center; background-size: cover;">      
       <video class='video' autoplay muted loop poster="[list:ico]" >
          <source src="[list:enclosure]" type="video/mp4">
        </video>
        <div class="o-slider-textWrap">
          <div class="container">
               <div class="position-absolute container text-light text-center" style="top:30%;">
                <h1 class="fs-30 fs-sm-60 wow slideInUp fweight mb-5">[list:title]</h1>
                <h2 class="fs-18 fs-sm-24 wow slideInUp mb-5">[list:subtitle]</h2>
                <h3 class="fs-16 fs-sm-18 wow slideInUp">[list:content]</h3>
                </div>
            </div>
        </div>
    </div>
      {else}
        <div class="o-slider--item" >          
               <img src="[list:ico]" class="w-100" alt="">        
             <div class="index-bannertxt">
              <div class="container">
                    <div class="text-light text-center"  >
                    <h1 class="fs-30 fs-sm-60 wow slideInUp fweight mb-5">[list:title]</h1>
                    <h2 class="fs-18 fs-sm-24 wow slideInUp mb-5">[list:subtitle]</h2>
                    <h3 class="fs-16 fs-sm-18 wow slideInUp">[list:content]</h3>
                    </div>
                </div>
            </div>
      </div> 
     {/hmcms:if}
   {/hmcms:list}
 
  </div>

</div>


以下是引用JS，自己修改路径。
<script src='/static/js/hammer.min.js'></script>
<script src='/static/js/slider.js'></script>
<script>
  $('#pbSlider0').pbTouchSlider({
    slider_Wrap: '#pbSliderWrap0',
    slider_Threshold: 10,
    slider_Speed:600,
    slider_Ease:'ease-out',
    slider_Drag : true,//拖动
    auto:true,//是否自动滚动
    autoTime:6000,//设置图片自动时间
    slider_Arrows: {
      enabled : true//箭头
    },
    slider_Dots: {//显示点不
      class :'.o-slider-pagination',
      enabled : true,
      preview : false
    },
    
  });
</script>

以下是修改过的CSS样式：

@-webkit-keyframes ball-scale-multiple {
  0% {
    transform: scale(0) rotate(-90deg);
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  100% {
    transform: scale(1.2) rotate(90deg);
    opacity: 0;
  }
}
@keyframes ball-scale-multiple {
  0% {
    transform: scale(0) rotate(-90deg);
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  100% {
    transform: scale(1.2) rotate(90deg);
    opacity: 0;
  }
}
 
.loaderWrap {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0; 
  z-index: 123333333;
}

 
.ball-scale-multiple {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 50%);
}
.video{
	width: 100%;
  height: 100%;
  object-fit: cover;
   display: block; /* 加上这句可消除默认的 inline 间隙 */
}
 
.ball-scale-multiple > div {
  
  border-radius: 0;
  animation-fill-mode: both;
  position: absolute;
  left: -60px;
  top: -60px;
  opacity: 0;
  margin: 0;
  width: 120px;
  height: 120px;
  animation: ball-scale-multiple 1s 0s linear infinite;
   
}
 
.ball-scale-multiple > div:nth-child(1) {
  animation-delay: -1s;
}
 
.ball-scale-multiple > div:nth-child(2) {
  animation-delay: -0.8s;
}
 
.ball-scale-multiple > div:nth-child(3) {
  animation-delay: -0.6s;
}
 
.ball-scale-multiple > div:nth-child(4) {
  animation-delay: -0.4s;
}
 
.ball-scale-multiple > div:nth-child(5) {
  animation-delay: -0.2s;
}

 
.a-container {
  width: 1170px;
  margin: 20px auto;
}

 
.a-1_2 {
  width: 48%;
  display: inline-block;
  margin: 0 1%;
}


 
.o-sliderContainer {
  overflow: hidden;
  position: relative;
  width: 100%;
  min-height: 200px; 
  float: left;
  margin: 30px 0;
  height: 1080px
}
 
.o-sliderContainer.hasShadow {
  box-shadow: 0 39px 22px -29px rgba(0, 0, 0, 0.2);
}
 
.o-sliderContainer:hover .o-slider-next {
  right: 20px;
}
 
.o-sliderContainer:hover .o-slider-prev {
  left: 20px;
}

 
.o-slider--item {
  height: 100%;
  width: 0;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  float: left;
  transition: all 0.2s cubic-bezier(0.7, 0.18, 0.53, 0.75);
  opacity: 1; 
  transform-origin: center center;
  z-index: 99;
  overflow: hidden;
}
 
.o-slider--item::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;  
  z-index: 0;
  height: 100%;
}

.o-slider--item img{
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.index-bannertxt{
   display: block;
   width: 100%;
   position: absolute;
   left:0;
   top:30%;
   z-index: 999;
   height: auto;
}

 
.o-slider--item.isActive {
  opacity: 1; 
  background: none;
}
 
.o-slider--item.isMoving {
  opacity: 1; 
  z-index: 100;
}

 
.o-slider {
  width: auto;
  position: relative;
  display: none;
}
 
.o-slider.isVisible {
  display: table; 
}
 
.o-slider.isDraggable {
  cursor: move;
}

 
.o-slider-textWrap {
  left: 2%;
  bottom: 45px;
  height: auto;
  position: absolute;
  text-align: left;
  padding:0;
  width: 100%;
  transition: all 0.4s;
  opacity: 1;
  overflow: visible;
  perspective: 1000px;
  z-index: 2;
}

 
.isActive .o-slider-textWrap::after {
  width: 100%;
  left: 0;
}
 
.isActive .o-slider-paragraph {
  opacity: 1;
  transform: perspective(0) rotateY(0) translate(0, 0);
  transform-origin: 0 0;
  transition-delay: 1s;
}
 
.isActive .o-slider-title {
  opacity: 1;
  transform: perspective(0) rotateY(0) translate(0, 0);
  transform-origin: 0 0;
  transition-delay: 0.2s;
}
 
.isActive .o-slider-subTitle {
  opacity: 1;
  transform: perspective(0) rotateY(0) translate(0, 0);
  transform-origin: 0 0;
  transition-delay: 0.6s;
}

 
.o-slider-title {
  width: auto;
  margin: 0 0 5px 0;
  height: auto;
  color: #fff;
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
  font-size: 1.4rem;
  display: inline-block;
  padding: 0;
  transition: all 0.4s;
  transform-origin: 0 0;
  transform: perspective(1000px) rotateY(120deg) translate(100px, -100px);
  opacity: 0;
  position: relative;
  z-index: 1;
}

 
.o-slider-subTitle {
  width: auto;
  margin: 0 0 5px 0;
  height: auto;
  color: #fff;
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
  font-size: 1.4rem;
  display: inline-block;
  padding: 0;
  transition: all 0.4s;
  transform-origin: 0 0;
  transform: perspective(1000px) rotateY(120deg) translate(100px, -100px);
  opacity: 0;
  position: relative;
  z-index: 1;
  font-size: 1.2rem;
}

 
.o-slider-paragraph {
  width: auto;
  margin: 0 0 5px 0;
  height: auto;
  color: #fff;
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
  font-size: 1.4rem;
  display: inline-block;
  padding: 0;
  transition: all 0.4s;
  transform-origin: 0 0;
  transform: perspective(1000px) rotateY(120deg) translate(100px, -100px);
  opacity: 0;
  position: relative;
  z-index: 1;
  font-size: 0.8rem;
  max-width: 100%;
  display: none;
}


 







@media screen and (min-width: 768px) {
 
  .o-slider-textWrap {
    left: 5%;
    width: 90%;
  }

 
  .o-slider-title {
    font-size: 1.8rem;
  }

 
  .o-slider-subTitle {
    font-size: 1.4rem;
  }

 
  .o-slider-paragraph {
    max-width: 60%;
    font-size: 1rem;
    display: block;
  }
}
@media screen and (min-width: 1024px) {
 
  .o-slider-pagination {
    bottom: 6%;
  }

 
  .o-slider-textWrap {
    left: 0px;
    width: 100%;
    top:00px;
  }

 
  .o-slider-title {
    font-size: 2rem;
  }

 
  .o-slider-subTitle {
    font-size: 1.6rem;
  }

  
  .o-slider-paragraph {
    max-width: 40%;
    font-size: 1.2rem;
  }
}
 
.a-divider {
  display: block;
  width: 100%;
  height: 1px;
  margin: 2px 0;

}

 
.o-slider-controls {
  display: none;
}
 
.o-slider-controls.isVisible {
  display: block;
}

 
.o-slider-pagination {
  bottom: 2%;
  left: 0;
  position: absolute;
  text-align: left;
  width: 100%;
  z-index: 1444000;
  margin: 0; 
  padding: 0;
   padding-left: 20px;
}
 
.o-slider-pagination > li { 
	border-radius:5px;
  overflow: hidden;
  border:none;
  display: inline-block;
  position: relative;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 5px;
  width: 50px;
  margin-left: 10px;
  margin-right:10px;
  transition: all 250ms;
  cursor: pointer;
  background-clip: padding-box;
  z-index: 100;
  background: rgba(255,255,255,0.5); 
}
.nobg .jinDU{
    display: none!important;
} 
 
.isActive .jinDU{
  display:block!important;
}
 
.o-slider--preview {
  position: absolute;
  top: -70px;
  right: auto;
  bottom: auto;
  left: -65px;
  opacity: 0;
  width: 140px;
  height: 60px;
  background-size: cover;
  background-position: center center;
  transition: all 250ms;
  z-index: -1;
  border: 3px solid #000;
  transform: scale(0.2, 0.2);
  transform-origin: center bottom;
  display: none;
}
 
.o-slider--preview::before {
  content: "";
  position: absolute;
  top: auto;
  right: auto;
  bottom: -13px;
  left: 50%;
  margin: 0 0 0 -5px;
  height: 0;
  width: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #000;
}

 
.o-slider--preview.isActive,
.o-slider-pagination li:hover .o-slider--preview {
  opacity: 1;
  position: absolute;
  top: -76px;
  right: auto;
  bottom: auto;
  left: -65px;
  transform: scale(1, 1);
}

@media screen and (min-width: 768px) {
 
  .o-slider--preview {
    display: block;
  }
}
 
.o-slider-arrows {
  margin: 0;
  list-style: none;
  display: block;
}
 
.o-slider-next,
.o-slider-prev { 
    border-radius: 50%;
    background: rgba(255,255,255,0);
    position: absolute;
    left: 20px;
    top: 45%;
    margin-top: -35px;
    width: 50px;
    height: 50px;
    z-index: 999;
    opacity: 1;
}


.o-slider-next i,
.o-slider-prev i {
  position: absolute;
  top: 50%;
  left: 0;
  margin: -12px 0 0;
  text-align: center;
  width: 100%;
  font-size: 1.8rem;
  color: #fff;
}

 
.o-slider-next {
  left: auto;
  right: 20px;
}
 
.isDisabled {
  opacity: 0.1;
  cursor: auto;
}
@media screen and (max-width: 1920px) {
  .o-sliderContainer {
    height: 100vh;    
  }
}

@media screen and (max-width: 1800px) {
  .o-sliderContainer {
    height: 80vh;    
  }
}


@media screen and (max-width: 1280px) {
 
  .a-container {
    width: 970px;
  }
}
@media screen and (max-width: 1024px) {
  
  .o-slider-arrows {
    display: none;
  }

 
  .o-sliderContainer {
    height: 450px;
    width: 100%;
    margin: 0 0 50px 0;
  }
 
  .o-slider--item {
    height: 450px;
  }
}
@media screen and (max-width: 768px) {
 
  .a-container {
    width: 90%;
    margin: 20px auto;
  }

 
  .a-1_2 {
    width: 100%;
    display: block;
    margin: 0;
  }

 
  .o-slider-arrows {
    display: none;
  }
 
  .o-sliderContainer {
    height: 350px;
  }

 
  .o-slider--item {
    height: 350px;
  }

 
  .o-slider-panel img {
    left: -15%;
    width: 130%;
  }
}
@media screen and (max-width: 480px) {
 
  .o-slider--item {
    height: 270px;
  }
 
  .o-slider--item img {
    left: -20%;
    width: 140%;
  }

 
  .o-sliderContainer {
    height: 270px;
  }
}