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

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

描述：

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

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

  <view class="everyOnePerson" wx:for="{{ showData }}" wx:key="index">
    <view class="everyHeader">
      <!-- <image src="../../../images/icons/every.png"></image> -->
      <video id="{{item.id}}" bindplay="playVideoNow" bindfullscreenchange="screenChange" data-index="{{item.id}}"
        style="object-fit:cover;" src="{{item.video_url}}"></video>
    </view>
    <view class="everyMessage">
      <view class="nameSty">
        <text>{{item.user_name}}</text>
      </view>
      <view class="lineSty">
        <text>性别:{{item.sex == 0?'男':'女'}}</text>
        <text style="margin-left:30rpx">学历:{{item.edu_level}}</text>
      </view>
      <view class="lineSty">
        <text>身份证号:{{item.id_card}}</text>
      </view>
      <view class="lineSty">
        <text>政治面貌:{{item.po}}</text>
      </view>
      <view class="lineSty">
        <text>联系方式:{{item.user_mobile}}</text>
      </view>
      <view class="lineSty">
        <text>工作单位:{{item.work_addr}}</text>
      </view>
    </view>

  </view>

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的视频播放器，退出的时候暂停相应播放器的播放