小程序展示视频控件的样式

描述：

在进行样式书写时候，会遇到展示视频的样式，需要点击进行视频全屏播放，推出全屏后结束播放。

所以就直接进行视频控件的加载
wxml

  
    
      
      
    
    
      
        {{item.user_name}}
      
      
        性别:{{item.sex == 0?'男':'女'}}
        学历:{{item.edu_level}}
      
      
        身份证号:{{item.id_card}}
      
      
        政治面貌:{{item.po}}
      
      
        联系方式:{{item.user_mobile}}
      
      
        工作单位:{{item.work_addr}}
      
    

  

wxss

.everyOnePerson {
  width: 100%;
  /* height: 240rpx; */
  background: #FFFFFF;
  padding: 30rpx;
  margin-bottom: 30rpx;
}

.everyOnePerson .everyHeader {
  width: 30%;
  display: inline-block;
  vertical-align: top;
}

.everyOnePerson .everyHeader image {
  width: 200rpx;
  height: 200rpx;
}
.everyOnePerson .everyHeader video {
  width: 200rpx;
  height: 200rpx;
}

.everyOnePerson .everyMessage {
  width: 70%;
  display: inline-block;
  font-size: 22rpx;
  line-height: 35rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #666666;
}

.everyOnePerson .everyMessage .nameSty {
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #333333;
}

js

//点击播放按钮
  playVideoNow(e) {
    let query = e.currentTarget.dataset.index;
    this.videoContext = wx.createVideoContext(JSON.stringify(query), this);
    this.videoContext.requestFullScreen({
      direction: 0
    });
  },
//  推出全屏的操作
  screenChange(e) {
    let fullScreen = e.detail.fullScreen
    let query = e.currentTarget.dataset.index;
    if (!fullScreen) { //退出全屏
      this.videoContext = wx.createVideoContext(JSON.stringify(query), this);
      this.videoContext.stop();
    }
  },

总之就是开始进行点击播放的时候，在id进行标识，点击开始播放操作对应id的视频播放器，退出的时候暂停相应播放器的播放