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