小程序根据是否wifi环境自动播放视频

做一个需求,在文章详情页面有一个新闻短视频,当在流量环境下时因为要加载视频,导致下面的内容也加载不出来,所以我需要判断是否wifi环境,从而选择是否自动播放视频

wx.getNetworkType(OBJECT)

获取网络类型。

OBJECT参数说明:

参数 类型 必填 说明
success Function 接口调用成功,返回网络类型 networkType
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)

success返回参数说明:

参数 说明
networkType 网络类型
wx.getNetworkType({
  success: function(res) {
    // 返回网络类型, 有效值:
    // wifi/2g/3g/4g/unknown(Android下不常见的网络类型)/none(无网络)
    var networkType = res.networkType
  }
})

networkType 有效值:

说明
wifi wifi 网络
2g 2g 网络
3g 3g 网络
4g 4g 网络
none 无网络
unknown Android下不常见的网络类型

wxss:

.show {
  display: block;
}
.hide {
  display: none;
}

显示与隐藏,小程序不能操作view,只好通过变量显示与隐藏view

wxml:

<block wx:if="{{ isWifi == true }}">
    <video src="{{ video_url }}" controls autoplay='true' ></video>
    </block>
    <block wx:else>
      <image src="{{ util.getImageSrc(article.image.key) }}" class="{{ coverImageClass }}">
        <cover-view class="play" bindtap="play">
          <cover-image class="img" bindtap='showVideo' src="https://www.jxcat.com/client/images/mobile/icons/play1.png" />
        </cover-view>
      </image>
      <video src="{{ coverVideoSrc }}" id="showVideoBox" controls class="{{ videoClass }}"></video>
    </block>

js:

data: {
    article: '',
    avatar: '',
    nick_name: '',
    video_url: '',
    coverImageClass: 'show',
    videoClass: 'hide',
    coverVideoSrc: '',
    videoContext : '',
    isWifi: false
  },
 onLoad: function (options) {
    this.getWifiEnv()
 },
 onReady: function () {
    this.videoContext = wx.createVideoContext('showVideoBox')
  },
  // 加载视频
  showVideo: function (event) {
    var that = this
    that.setData({
      coverImageClass: 'hide',
      videoClass: 'show',
      coverVideoSrc: that.data.video_url
    }, function() {
      that.videoContext.play()
    })
  },
  getWifiEnv: function () {
    var that = this
    wx.getNetworkType({
      success: function (res) {
        if (res.networkType == 'wifi') {
          that.setData({
            isWifi: true
          })
        }
      }
    })
  }

如果是wifi环境,就自动播放视频,如果不是,就先加载缩略图,点击播放按钮才加载视频并播放

猜你喜欢

转载自blog.csdn.net/tang05709/article/details/81100409