内容简介

本文介绍在banner轮播基础上实现播放视频功能，有两种播放方式：

1、点击播放按钮，在banner图位置播放视频（效果如下）；

2、点击播放按钮，全屏播放视频。

实现过程

1、两种播放方式，css样式共用如下：

* {
  padding: 0;
  margin: 0;
}

.swiper-container {
  width: 100%;
  height: 211px;
}

.video {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  background-color: rgba(0, 0, 0, 0.5);
}

.loading-box {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  font-size: 0;
}

.loading-box .video-img {
  width: 100%;
  height: 100%;
}

.loading-box .palying-img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  opacity: 1;
  transition: opacity 0.3s;
}

.loading-box .loading-img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  opacity: 0;
  transition: opacity 0.3s;
}

.loading-box.loading .loading-img {
  animation: loading 1s infinite;
  -webkit-animation: loading 1s infinite;
  opacity: 1;
}

.loading-box.loading .palying-img {
  display: none;
}

.diy-buttons {
  overflow: hidden;
  text-align: center;
}

.diy-buttons a {
  float: left;
  width: 50%;
}

@keyframes loading {
  from {
    transform: translateX(-50%) translateY(-50%) rotate(0deg);
  }

  to {
    transform: translateX(-50%) translateY(-50%) rotate(360deg);
  }
}

2、第一种播放方式，html和js代码如下：

1）“onSlideChangeEnd”用来轮播结束回调函数“removeLoading”，移除加载效果，解决切换过快有时候还显示加载效果；

2）由于swiper为了循环轮播，复制了多一份数据，所以里面的video获取未使用ID；

3）监听video的状态“play”和“pause”来控制轮播或暂停轮播，增加体验。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
  <title>banner轮播视频</title>
  <link rel="shortcut icon" href="#" />
  <link rel="stylesheet" type="text/css" href="css/style.css" />
  <link href="css/swiper.min.css" rel="stylesheet">
</head>

<body>
  <div class="banner">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <video type="video/mp4" width="100%" height="211" id="video-1" class="video" src="video/1.mp4" webkit-playsinline="true" playsinline="true" x5-video-player-type="h5" x5-video-orientation="portrait" x5-video-player-fullscreen="true" onplaying="removeLoading()"></video>
          <div class="loading-box video-play" data-id="video-1">
            <img class="video-img" alt="" src="img/1.jpg">
            <img src="img/palying.png" alt="" class="palying-img">
            <img src="img/load-c.png" alt="" class="loading-img">
          </div>
        </div>
        <div class="swiper-slide">
          <video type="video/mp4" width="100%" height="211" id="video-2" class="video" src="video/2.mp4" webkit-playsinline="true" playsinline="true" x5-video-player-type="h5" x5-video-orientation="portrait" x5-video-player-fullscreen="true" onplaying="removeLoading()"></video>
          <div class="loading-box video-play" data-id="video-2">
            <img class="video-img" alt="" src="img/2.jpg">
            <img src="img/palying.png" alt="" class="palying-img">
            <img src="img/load-c.png" alt="" class="loading-img">
          </div>
        </div>
      </div>
    </div>
  </div>
  <script src="js/swiper.min.js"></script>
  <script src="js/jquery-1.12.4.min.js"></script>
  <script>
  $(function() {
    // 设置swiper参数
    var mySwiper = new Swiper('.swiper-container', {
      autoplay: 3000, // 3000    
      loop: true, // 循环模式选项
      pagination: {
        el: '.swiper-pagination',
      },
      onSlideChangeEnd: function() {
        removeLoading();
      }
    });

    $('.video-play').click(function(e) {      
      $('.video').css('display', 'none');
      var video = $(this).siblings('video.video');
      video.css('display', 'block');
      playVideo(mySwiper, video);
    });
  });

  // 全屏播放视频函数
  function playVideo(mySwiper, video) {
    $('.loading-box').addClass('loading');
    video[0].play();
    // 监听播放状态
    video.on('play', function() {
      mySwiper.stopAutoplay();
    });
    // 监听暂停状态
    video.on('pause', function() {
      mySwiper.startAutoplay();
      $('.video').css('display', 'none');
    });
  }

  function removeLoading() {
    $('.loading-box').removeClass('loading');
  }
</script>
</body>

</html>

3、第二种播放方式，html和js代码如下：

1）使用“webkitEnterFullScreen”全屏播放，兼容性比较好，可以在安卓和苹果正常使用。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
  <title>banner轮播视频</title>
  <link rel="shortcut icon" href="#" />
  <link rel="stylesheet" type="text/css" href="css/style.css" />
  <link href="css/swiper.min.css" rel="stylesheet">
</head>

<body>
  <div class="banner">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <video type="video/mp4" width="100%" height="211" id="video-1" class="video" src="video/1.mp4" webkit-playsinline="true" playsinline="true" x5-video-player-type="h5" x5-video-orientation="portrait" x5-video-player-fullscreen="true" onplaying="removeLoading()" onwebkitfullscreenchange="fullScreenChange(event)"></video>
          <div class="loading-box video-play" data-id="video-1">
            <img class="video-img" alt="" src="img/1.jpg">
            <img src="img/palying.png" alt="" class="palying-img">
            <img src="img/load-c.png" alt="" class="loading-img">
          </div>
        </div>
        <div class="swiper-slide">
          <video type="video/mp4" width="100%" height="211" id="video-2" class="video" src="video/2.mp4" webkit-playsinline="true" playsinline="true" x5-video-player-type="h5" x5-video-orientation="portrait" x5-video-player-fullscreen="true" onplaying="removeLoading()" onwebkitfullscreenchange="fullScreenChange(event)"></video>
          <div class="loading-box video-play" data-id="video-2">
            <img class="video-img" alt="" src="img/2.jpg">
            <img src="img/palying.png" alt="" class="palying-img">
            <img src="img/load-c.png" alt="" class="loading-img">
          </div>
        </div>
      </div>
    </div>
  </div>
  <script src="js/swiper.min.js"></script>
  <script src="js/jquery-1.12.4.min.js"></script>
  <script>
  $(function() {
    // 设置swiper参数
    var mySwiper = new Swiper('.swiper-container', {
      autoplay: 3000, // 3000    
      loop: true, // 循环模式选项
      pagination: {
        el: '.swiper-pagination',
      }
    });

    $('.video-play').click(function(e) {
      var idName = e.currentTarget.dataset.id;
      $('#' + idName).css('display', 'block');
      playVideo(idName);
    });
  });

  // 全屏播放视频函数
  async function playVideo(idName) {
    $('.loading-box').addClass('loading');
    var video = document.getElementById(idName);
    await video.play()
    video.webkitEnterFullScreen()
  }

  function removeLoading() {
    $('.loading-box').removeClass('loading');
  }

  function fullScreenChange(e) {
    $('.loading-box').removeClass('loading');
    var video = document.getElementById(e.target.id);
    if (!video.webkitDisplayingFullscreen) {
      video.pause();
      $('.video').css('display', 'none');
    }
  }
</script>
</body>

</html>

在banner轮播基础上实现播放视频功能

内容简介

实现过程

猜你喜欢