1.   主要内容

总结一下微信小程序中的video组件在需要加poster的情况下有时会失效如何解决。该文还会介绍如何在移动网络的情况下利用cover-view实现显示”您正在使用移动网络，继续播放将消耗流量“的功能。有问题希望在博客下面留言一起讨论。

2.主要代码。

（1）wxml代码

  video id='myVideo' bindplay='play' Autoplay='{{liuliang}}' src="{{videoSrc}}" poster="{{videoPoster}}" objectFit='fill'      cover-view class='liuliang'        cover-view style='display:{{liuliangshow}}' class='iconfont'           您正在使用移动网络，继续播放将消耗流量            /cover-view      /cover-view      cover-view style='display:{{coverdisplay}}'              cover-image mode="widthFix" src='{{videoPoster}}'/cover-image      /cover-view     /video

（2）wxss代码

.videoplay{  width: 750rpx;   z-index:0;  position: relative;  /* border-bottom: 30rpx solid #f8f8f8; */  /* border-top: 20rpx solid #f8f8f8; */}.videoplay video{    width: 750rpx;    height: 404rpx;     /* margin:20rpx 20rpx 15rpx;    */  position: relative;  }.controls{  position: relative;  display: flex;}

（3） js代码

Page({  /**   * 页面的初始数据   */  data: {        internet:'',//网络状态    liuliang:'false',//自动播放    liuliangshow: 'false',//网络状态显示    coverdisplay: 'none'//poster图片显示  },onLoad: function () {    var that = this;    // 获取首页视频地址,我们的网络地址是动态从后台获取的    wx.request({      method: 'POST',      url: '',      data: {        centerId:''

      },      header: {        'content-type': 'application/x-www-form-urlencoded' // 默认值      },      success: function (res) {        console.log(res.data.url)        that.setData({          videoSrc:res.data.url,          videoPoster: res.data.content        });             }          })  }, onReady: function (res) {    var that=this;    wx.onNetworkStatusChange(function (res) {      if (res.networkType == 'wifi') {        console.log('自动播放')        that.setData({          coverdisplay: 'none',          liuliang: 'true',          liuliangshow: 'none',        })        console.log(that.data.liuliang)        that.data.videoContext.pause()        that.data.videoContext.play()      } else {        that.data.videoContext.pause()        that.setData({          liuliang: 'false',          liuliangshow: 'block'        })      }    })    wx.getNetworkType({      success: function (res) {        // 返回网络类型, 有效值：        // wifi/2g/3g/4g/unknown(Android下不常见的网络类型)/none(无网络)        var res = res.networkType        console.log(res);        that.data.videoContext = wx.createVideoContext('myVideo');        if (res == 'wifi') {          console.log('自动播放')          that.setData({            coverdisplay: 'none',                        liuliang: 'true',            liuliangshow: 'none',          })          console.log(that.data.liuliang)          that.data.videoContext.pause()          that.data.videoContext.play()        } else {          that.data.videoContext.pause()          that.setData({            liuliang: 'false',            liuliangshow: 'block'          })        }      }    })  }})

提供另一种思路，因为video层级是最高的，现在采用的播放视频的方式是像下面这样，先展示图片层，在点击播放的时候让video层展示，图片层隐藏，注意高度一致，不要出现一抖一抖的情况。

video wx:if="{{videoShow1}}" id="tryVideo" controls src="{{videoSrc}}" show-center-play-btn='{{false}}' bindplay='current' objectFit='fill' bindtimeupdate='bindtimeupdate' poster='{{currentPoster}}'      /video//video 层      view class="currentControls" wx:if="{{!videoShow1}}"//poster图片和播放按钮        view class="playImg" bindtap="current" style='display:{{Show}}'          image class='coverPic' src="{{currentPoster}}" /          view class='currentIcon'            image class="icon" src="../../images/icon/play.png" /          /view        /view      /view      view class='fs'当前播放：{{currentTitle}}/view    /view

觉得不错请打赏，您的十分满意是笔者的无限动力。