微信小程序例子——视频播放cover-view遮盖层显示poster图片不显示和判断移动网络

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>

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