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'
          })
        }
      }
    })
  }

})

3.覺得不錯請打賞，您的十分滿意是筆者的無限動力。