示例简介

本文介绍在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”来控制轮播或暂停轮播，增加体验。

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

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