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

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

浏览量:3276 时间: 来源:tang05709

 

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

wx.getNetworkType(OBJECT)

获取网络类型。

OBJECT参数说明:

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

success返回参数说明:

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

 

networkType 有效值:

说明
wifiwifi 网络
2g2g 网络
3g3g 网络
4g4g 网络
none无网络
unknownAndroid下不常见的网络类型

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环境,就自动播放视频,如果不是,就先加载缩略图,点击播放按钮才加载视频并播放

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎