swiper切换 video视频自动暂停

threedeformity

已于 2024-02-03 14:00:34 修改

阅读量578

点赞数 10

文章标签： html javascript 前端

于 2024-01-31 16:52:09 首次发布

本文链接：https://blog.csdn.net/threedeformity/article/details/135957185

版权

//swiper代码如下

//swiper切换按钮
  <!-- <a class="arrow-left-1" href="javascript:;"> <img src="/templets/1/lysrmzf/img/left_btn.png" alt=""> </a>
<a class="arrow-right-1" href="javascript:;"> <img src="/templets/1/lysrmzf/img/right_btn.png" alt=""> </a> -->
              
  <div class="swiper swiper1">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <video width="1360px" height="552px" class="exciting_video" height="412px"
            poster="https://www.ly.gov.cn/templets/1/lysrmzf/video/luoyang.png" muted controls="controls"
            controlslist="nodownload">
            <source src="https://www.ly.gov.cn/templets/1/lysrmzf/video/luoyang.mp4" type="video/mp4">
          </video>
        </div>
        <div class="swiper-slide">
          <video width="1360px" height="552px" class="exciting_video" height="412px"
            poster="https://www.ly.gov.cn/templets/1/lysrmzf/video/luolyangydh.png" muted controls="controls"
            controlslist="nodownload">
            <source src="https://www.ly.gov.cn/templets/1/lysrmzf/video/luolyangydh.mp4" type="video/mp4">
          </video>
        </div>
        <div class="swiper-slide">
          <video width="1360px" height="552px" class="exciting_video" height="412px"
            poster="https://www.ly.gov.cn/templets/1/lysrmzf/video/luoyang5.png" muted controls="controls"
            controlslist="nodownload">
            <source src="https://www.ly.gov.cn/templets/1/lysrmzf/video/luoyang5.mp4" type="video/mp4">
          </video>
        </div>
        <div class="swiper-slide">
          <video width="1360px" height="552px" class="exciting_video" height="412px"
            poster="https://www.ly.gov.cn/templets/1/lysrmzf/video/luoyang4.png" muted controls="controls"
            controlslist="nodownload">
            <source src="https://www.ly.gov.cn/templets/1/lysrmzf/video/luoyang4.mp4" type="video/mp4">
          </video>
        </div>

      </div>
    </div>

j//s代码如下

var mySwiper = new Swiper('.swiper1', {
      pagination: '.pagination1',
      loop: true,
      grabCursor: true,
      on: {
        slideChangeTransitionEnd: function (swiper) {
          videoStopped()
        }
      }
    })
    //切换功能
        $('.arrow-left-1,.arrow-left-2').click(function (e) {
            videoStopped()
            e.preventDefault()
            mySwiper.slidePrev()
        })
        $('.arrow-right-1,.arrow-right-2').click(function (e) {
            videoStopped()
            e.preventDefault()
            mySwiper.slideNext()
        })

    //视频暂停
    function videoStopped() {
      $(".videoBox video").trigger('pause');
    }

    // html5-video标签屏蔽右键视频另存为的js代码
    $(".exciting_video").bind('contextmenu', function () {
      return false;
    })