在ios和android上有显现的区分，假如你只是显现一个一般的网页，只需要在iOS上加上webkit-playsinline=”true” 安卓上x5-video-player-type=”h5″ x5-video-player-fullscreen=”true” x5-video-orientation=”portraint”，即可实如今微信上的同层播放；iOS和安卓显现和播放没有题目；
假如你跟我一样想要把视频放到swiper里，且不是在第一页播放视频，并想要视频有圆角。那末题目就来了。首先在swiper非第一屏播放安卓会涌现的题目是竖屏只要声响没有图象，我尝试了良久只需要去掉安卓部份的同层播放代码即可，即去掉x5-video-player-type=”h5″；假如视频在swiper里，你一定会有如许的需求，就是滑动到非视频页的时刻，停息视频，并涌现一个模仿的停息按钮在视频上方。这里能够如许写：

const mySwiper = new Swiper('.swiper-container', {
    direction: 'vertical',
    on: {
      slideChangeTransitionEnd: function() {
        if (this.activeIndex != 1) {
          //停息视频代码
        }
      }
    }
  })

这里定义一个是不是显现停息的按钮的变量showPoster，来显现停息模仿按钮和隐蔽video；
这里显现播放按钮必需和视频显现必需呈反相干，由于不如许作会有许多默许的bug，致使video_container的overflow:hidden不见效，没法显现圆角，这算是一种比较油滑的做法了；我试过将video的position设为fixed 如许虽然能一般显现和隐蔽模仿的点击按钮，但会让父级的overflow：hidden失效。没法显现视频圆角。代码也许以下：

<div class="video_container">
<div class="clickVideo" @click="playVideo()" v-show="showPoster">
  <img src="../assets/点击播放按钮.png"/>
</div> 
<video
  v-show="!showPoster" 
  src="../assets/QQ20181214-221408-HD.mp4"
  id="video"
  preload="auto"

  x5-video-player-fullscreen="true"
  x5-video-orientation="portraint"

  airplay="allow"
  x-webkit-airplay="allow"

  playsinline="true" 
  webkit-playsinline="true"
  style="object-fit:fill"
>
<!-- 
  controls="controls" 待加
  poster="../assets/share.png"
  安卓同层播放属性
  x5-video-player-type="h5" //启用同层播放。取值固定为'h5'。  启用以后仅安卓在swiper第二页播放竖屏不显现画面所以这里暂不必
  x5-video-player-fullscreen="true" //设置为 true 是防备横屏
   x5-video-orientation="portraint" //竖屏 landscape 横屏

  ios同层播放属性
  airplay="allow"
  x-webkit-airplay="allow"
  playsinline="true" //IOS微信浏览器支撑小窗内播放
  webkit-playsinline="true" // 这个属性是ios 10中设置能够让视频在小窗内播放，也就是不是是全屏播放
 -->
    </video>
</div>

<style lang="less">
    .video_container{
        @w: 670px/2;
        @h: 377px/2;
        @borderRadius: 50px;
        width:@w;
        height:@h;
        margin:100px auto;
        border-radius:@borderRadius;
        overflow: hidden;
        position: relative;
        .clickVideo{
          position: absolute;
          width:@w;
          height:@h;
          background:#ccc;
          z-index:999;
          & > img {
            @play:60px;
            width:@play;
            height:@play;
            position:absolute;
            top:50%;
            left:50%;
            transform: translate(-50%, -50%)
          }
        }
        video{
          width:@w;
          height:@h;
        }
    }
</style>

注：假如你在swiper的非第一页运用视频，在安卓手机上会涌现视频黑屏但能够播放声响的题目，这个时刻就能够不运用安卓的同层播放，即不运用x5-video-player-type=”h5″即可。
同层播放的材料参考链接：http://www.cnblogs.com/jinjin…