E企盈营销工具技术服务商 热线:4006-838-530

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

E企盈直播平台营销卖货系统

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觉得不错请打赏,您的十分满意是笔者的无限动力。

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序例子——视频播放coverview遮盖层显示poster图片不显示和判断移动网络
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏