├── app.wxss ├── README.md ├── image ├── xinlike.png ├── playvideo.png ├── shareicon.png └── shoucang.png ├── app.js ├── app.json ├── README1.md ├── project.config.json ├── utils ├── numbercount.wxs └── util.js └── index ├── index.wxml ├── index.wxss └── index.js /app.wxss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /image/xinlike.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yezisuper/wxvideos/HEAD/image/xinlike.png -------------------------------------------------------------------------------- /image/playvideo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yezisuper/wxvideos/HEAD/image/playvideo.png -------------------------------------------------------------------------------- /image/shareicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yezisuper/wxvideos/HEAD/image/shareicon.png -------------------------------------------------------------------------------- /image/shoucang.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yezisuper/wxvideos/HEAD/image/shoucang.png -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | App({ 2 | onLaunch: function () { 3 | 4 | }, 5 | Api_url: 'https://wx.test.anmeicare.com' 6 | }) 7 | -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages":[ 3 | "index/index" 4 | ], 5 | "window":{ 6 | "backgroundTextStyle":"light", 7 | "navigationBarBackgroundColor": "#fff", 8 | "navigationBarTitleText": "WeChat", 9 | "navigationBarTextStyle":"black" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /README1.md: -------------------------------------------------------------------------------- 1 | # wxvideos 2 | 微信小程序video组件列表播放视频 3 | video组件的几个bug需要注意的地方： 4 | 1video组件不能放在scroll-view中使用 5 | 2video层级最高 6 | 3列表循环中，每点击一个播放按钮渲染video情况下，播放视频，操作过快，会发生多个video同时播放，解决办法，把video定位，根据top值修改当前播放视频组建的位置。 7 | 4video 组件中点击全屏播放按钮与onPageScroll事件冲突（做播放中的视频滑出屏幕可视区域功能与全屏按钮冲突，官方问题，已提工单，在修复中，后续可关注下） 8 | -------------------------------------------------------------------------------- /project.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "项目配置文件。", 3 | "packOptions": { 4 | "ignore": [] 5 | }, 6 | "setting": { 7 | "urlCheck": true, 8 | "es6": true, 9 | "postcss": true, 10 | "minified": true, 11 | "newFeature": true 12 | }, 13 | "compileType": "miniprogram", 14 | "libVersion": "2.2.3", 15 | "appid": "touristappid", 16 | "projectname": "videos", 17 | "condition": { 18 | "search": { 19 | "current": -1, 20 | "list": [] 21 | }, 22 | "conversation": { 23 | "current": -1, 24 | "list": [] 25 | }, 26 | "game": { 27 | "currentL": -1, 28 | "list": [] 29 | }, 30 | "miniprogram": { 31 | "current": -1, 32 | "list": [] 33 | } 34 | } 35 | } -------------------------------------------------------------------------------- /utils/numbercount.wxs: -------------------------------------------------------------------------------- 1 | var filter = { 2 | numbercount: function (num) { 3 | var num2 = parseInt(num) 4 | if (num2>9999) { 5 | return (Math.floor(num2/1000)/10) + '万+' 6 | }else{ 7 | return num2 8 | } 9 | }, 10 | getMin: function (obj) { 11 | var time = parseInt(obj); 12 | var min = Math.floor(time / 60) < 10 ? '0' + Math.floor(time / 60) : Math.floor(time / 60); 13 | var s = time % 60 < 10 ? '0' + time % 60 : time % 60; 14 | return min + ':' + s ; 15 | }, 16 | getDateDiff: function (current_time,time) { 17 | var publishTime = parseInt(time), 18 | timeLag = parseInt(current_time) - publishTime, 19 | lag_day,lag_hours,lag_min,lag_M,lag_Y; 20 | lag_day = parseInt(timeLag / 86400); 21 | lag_hours = parseInt(timeLag / 3600); 22 | lag_min = parseInt(timeLag / 60); 23 | lag_M = parseInt(timeLag / (86400*30)); 24 | lag_Y = parseInt(timeLag / (86400 * 365)); 25 | if (timeLag < 30) { 26 | return '刚刚'; 27 | } else if (timeLag < 60 && timeLag > 30) { 28 | return timeLag + '秒前'; 29 | } else if (timeLag >= 60 && lag_hours < 1){ 30 | return lag_min + '分钟前'; 31 | } else if (lag_hours >= 1 && lag_day < 1) { 32 | return lag_hours + '小时前'; 33 | } else if (lag_day >= 1 && lag_M < 1) { 34 | return lag_day + '天前'; 35 | } else if (lag_M >= 1 && lag_Y < 1) { 36 | return lag_M + '月前'; 37 | } else if (lag_Y >= 1) { 38 | return lag_Y + '年前'; 39 | } 40 | } 41 | } 42 | var pushcolor = function (time) { 43 | var colorsa = ['#B2EAE3', '#EAB2B2', '#EACAB2', '#BCEAB2', '#B2D3EA', '#C8B2EA', '#C8B2EA']; 44 | var colorsb = ['#F0FBF9', '#FBF0F0', '#FBF4F0', '#F2FBF0', '#F0F6FB', '#F4F0FB', '#FBF0F7']; 45 | var week = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] 46 | var day = getDate(time).getDay(); 47 | return { a: colorsa[day], b: colorsb[day], c: week[day] } 48 | } 49 | var pushdate = function (time) { 50 | return time.substring(2, time.length) 51 | } 52 | var Round = function (num) { 53 | return Math.round(num) 54 | } 55 | module.exports = { 56 | numbercount: filter.numbercount, 57 | getDateDiff: filter.getDateDiff, 58 | getMin: filter.getMin, 59 | randomX: filter.randomX, 60 | randomY: filter.randomY, 61 | pushcolor: pushcolor, 62 | pushdate: pushdate, 63 | Round: Round 64 | } -------------------------------------------------------------------------------- /index/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | {{item.coursename}} 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | {{filter.numbercount(item.readnum)}}播放 18 | {{filter.getMin(item.video_avinfo)}} 19 | 20 | 21 | 当前为非WiFi网络 22 | 流量播放 23 | 24 | 25 | 当前为非WiFi网络 26 | 继续播放 27 | 28 | 29 | 30 | 31 | 32 | {{filter.numbercount(item.clickrate)}} 33 | +1 34 | 35 | 36 | 37 | 38 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | {{sharetitle}} 52 | 53 | 54 | 55 | 分享好友 56 | 57 | 58 | 59 | 制作海报 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | -------------------------------------------------------------------------------- /index/index.wxss: -------------------------------------------------------------------------------- 1 | page { 2 | border-top: 0; 3 | position: relative; 4 | } 5 | /* 头部小知识 */ 6 | .top_nowledge{ 7 | display: none; 8 | position: absolute; 9 | top:-1rpx; 10 | width: 100%; 11 | height: 40rpx; 12 | text-align: center; 13 | background: #FFFFFF; 14 | z-index: 10000; 15 | } 16 | .top_nowledge image{ 17 | width: 180rpx; 18 | height: 45rpx; 19 | position: relative; 20 | top: 6rpx; 21 | } 22 | .tipimg_tip{ 23 | background: rgba(178,234,227,0.20); 24 | box-shadow: 0 2px 15px 0 rgba(0,0,0,0.20); 25 | border-bottom-left-radius: 12px; 26 | border-bottom-right-radius: 12px; 27 | height: 80rpx; 28 | } 29 | .nowledgebox{ 30 | width: 600rpx; 31 | margin: 0 auto; 32 | position: absolute; 33 | top: 1rpx; 34 | z-index: 999999999999999999; 35 | left: 50%; 36 | margin-left: -300rpx; 37 | border-radius: 0; 38 | border-bottom-left-radius: 12px; 39 | border-bottom-right-radius: 12px; 40 | box-shadow: 0 2rpx 15rpx 0 rgba(0,0,0,0.20); 41 | opacity: 0; 42 | } 43 | .tipcontent{ 44 | padding: 48rpx 30rpx 48rpx 20rpx; 45 | } 46 | .shareimagebox .articletitle{ 47 | padding:0rpx 40rpx 0 40rpx; 48 | } 49 | /* .tipsbox .tipimg image{ 50 | width: 40rpx; 51 | height: 40rpx; 52 | } */ 53 | .tipsbox .tipimg .xialaicon{ 54 | width: 90rpx; 55 | height: 18rpx; 56 | position: relative; 57 | bottom:-1rpx; 58 | padding-top:50rpx; 59 | } 60 | /* 视频组件 */ 61 | video { 62 | width:100%; 63 | height:100%; 64 | margin: 0 auto; 65 | /* border-radius: 12rpx; */ 66 | } 67 | 68 | .videoBox { 69 | position: relative; 70 | width: 690rpx; 71 | margin: 0 auto; 72 | /* padding-top:40rpx; */ 73 | border-radius: 12rpx; 74 | } 75 | 76 | .videoBox .videoBox_item { 77 | height:389rpx; 78 | position: relative; 79 | border-radius: 12rpx; 80 | } 81 | 82 | .videoBox .cover-view { 83 | width: 100%; 84 | height: 100%; 85 | background-size: cover; 86 | position: absolute; 87 | top: 0; 88 | color: #fff; 89 | z-index: 999; 90 | border-radius: 12rpx; 91 | } 92 | 93 | .videoBox .cover-view cover-view cover-view { 94 | opacity: .8; 95 | font-size: 28rpx; 96 | margin-top: 10rpx; 97 | } 98 | 99 | .videoBox .cover-view .play { 100 | width: 100rpx; 101 | height: 100rpx; 102 | position: absolute; 103 | top: 50%; 104 | left: 50%; 105 | margin-top: -50rpx; 106 | margin-left: -50rpx; 107 | z-index: 9999; 108 | } 109 | 110 | .videoBox .MBplay { 111 | width: 100%; 112 | height: 100%; 113 | background: rgba(0,0,0,0.70); 114 | /* background: #000; */ 115 | position: absolute; 116 | top: 0; 117 | color: #fff; 118 | z-index: 9999; 119 | text-align: center; 120 | box-sizing: border-box; 121 | padding-top: 140rpx; 122 | } 123 | 124 | .videoBox .MBplay .MBplaybtn { 125 | width: 200rpx; 126 | height: 60rpx; 127 | line-height: 60rpx; 128 | background: #31D8C1; 129 | font-size: 28rpx; 130 | border-radius: 30rpx; 131 | margin: 30rpx auto; 132 | } 133 | 134 | /* .videoBox .MBplay .MBplaybtn cover-image { 135 | width: 40rpx; 136 | height: 40rpx; 137 | margin: 0 8px; 138 | } */ 139 | 140 | .videoBox .cover-view .bg { 141 | position: absolute; 142 | top: 0; 143 | width: 100%; 144 | height: 100%; 145 | z-index: -1; 146 | } 147 | 148 | .cover-view-pause { 149 | font-family: PingFangSC-Medium; 150 | color: #353535; 151 | text-align: left; 152 | font-size: 36rpx; 153 | /* padding: 20rpx 0rpx; */ 154 | height:90rpx; 155 | box-sizing: border-box; 156 | overflow: hidden; 157 | line-height:90rpx; 158 | /* width: 690rpx; */ 159 | /* position: absolute; */ 160 | /* z-index: 1000; */ 161 | /* top: 0rpx; 162 | height: 180rpx; 163 | opacity: 0.9; */ 164 | /* background-image: linear-gradient(0deg, rgba(0,0,0,0.00) 0%, #000000 100%); */ 165 | /* background-size:100%; 166 | border-top-left-radius: 12rpx; 167 | border-top-right-radius: 12rpx; */ 168 | 169 | } 170 | .videoBox_list{ 171 | /* margin-top: 30rpx; */ 172 | height: 100vh; 173 | position: relative; 174 | } 175 | .cover-view-pause .bfl_view { 176 | margin-top: 4rpx; 177 | font-size: 28rpx; 178 | opacity: .8; 179 | } 180 | 181 | .bfl_readnum, 182 | .bfl_avinfo { 183 | width: 345rpx; 184 | font-size: 26rpx; 185 | color: #FFFFFF; 186 | text-align: left; 187 | } 188 | 189 | .bfl_avinfo { 190 | text-align: right; 191 | } 192 | 193 | .bfl_view { 194 | position: absolute; 195 | z-index: 1000; 196 | display: flex; 197 | display: -webkit-flex; 198 | justify-content: center; 199 | -webkit-justify-content: center; 200 | bottom: 30rpx; 201 | width: 690rpx; 202 | box-sizing: border-box; 203 | padding: 0 30rpx; 204 | } 205 | 206 | .group_operate { 207 | background: #FFFFFF; 208 | /* box-sizing: border-box; */ 209 | display: flex; 210 | display: -webkit-flex; 211 | justify-content: center; 212 | -webkit-justify-content: center; 213 | /* padding: 20rpx 10rpx; */ 214 | height:93rpx; 215 | border-bottom: 1rpx solid #E3E3E3; 216 | /* border-bottom-left-radius: 12rpx; 217 | border-bottom-right-radius: 12rpx; */ 218 | } 219 | .group_operate>view{ 220 | margin-top: 20rpx; 221 | } 222 | .group_operate image { 223 | width: 50rpx; 224 | height: 50rpx; 225 | } 226 | 227 | .group_operate>view { 228 | width: 33%; 229 | height: 50rpx; 230 | } 231 | .clike{ 232 | position: relative; 233 | display: flex; 234 | align-items: center; 235 | font-size: 26rpx; 236 | /* background: #fff; */ 237 | } 238 | .group_operate>view.collect { 239 | text-align: center; 240 | } 241 | 242 | .group_operate>view.share { 243 | text-align: right; 244 | } 245 | .share button{ 246 | background: none; 247 | text-align: right; 248 | height: 50rpx; 249 | } 250 | .cover_view_fm{ 251 | width: 100%; 252 | height: auto; 253 | /* border-top-left-radius: 12rpx; 254 | border-top-right-radius: 12rpx; */ 255 | /* border-radius: 12rpx; */ 256 | } 257 | .like_ok { 258 | position: absolute; 259 | left:60rpx; 260 | color: #31D8C1; 261 | font-size: 34rpx; 262 | z-index: -1; 263 | top: 0; 264 | opacity: 1; 265 | 266 | } 267 | .like_ok.on { 268 | transition: all .7s; 269 | z-index: 11; 270 | top: -15rpx; 271 | opacity: 0; 272 | } 273 | .video-sss{ 274 | position:absolute; 275 | width:690rpx; 276 | height:389rpx; 277 | left: 50%; 278 | margin-left: -343rpx; 279 | top:70rpx; 280 | } 281 | -------------------------------------------------------------------------------- /utils/util.js: -------------------------------------------------------------------------------- 1 | // 验证登录状态 2 | function userlogin() { 3 | if (!getApp().globalData.customer_id) { 4 | wx.navigateTo({ 5 | url: '/pages/login/login' 6 | }) 7 | return false; 8 | } 9 | } 10 | const isEmptyObject = obj => { 11 | var name; 12 | for (name in obj) { 13 | return false; 14 | } 15 | return true; 16 | } 17 | // 中英文验证 18 | function checkChineseLen(name_pd){ 19 | if(name_pd.length < 1 ){ 20 | wx.showToast({ 21 | title: '没有输入昵称，请重新填写', 22 | icon: "none", 23 | duration: 2000 24 | }) 25 | return false; 26 | }else if(name_pd.length > 16){ 27 | wx.showToast({ 28 | title: '最多可输入16个字符的昵称', 29 | icon: "none", 30 | duration: 2000 31 | }) 32 | return false; 33 | } else if (!/^[^<>/\x22]{1,16}$/i.test(name_pd)) { 34 | wx.showToast({ 35 | title: '请不要输入特殊字符', 36 | icon: "none", 37 | duration: 2000 38 | }) 39 | return false; 40 | } 41 | return true; 42 | } 43 | 44 | /*保存到相册*/ 45 | function savePicToAlbum(tempFilePath) { 46 | let that = this; 47 | wx.getSetting({ 48 | success(res) { 49 | if (!res.authSetting['scope.writePhotosAlbum']) { 50 | wx.authorize({ 51 | scope: 'scope.writePhotosAlbum', 52 | success() { 53 | wx.saveImageToPhotosAlbum({ 54 | filePath: tempFilePath, 55 | success(res) { 56 | wx.showToast({ 57 | title: '保存成功' 58 | }); 59 | } 60 | }) 61 | }, 62 | fail() { 63 | // 用户拒绝授权,打开设置页面 64 | wx.openSetting({ 65 | success: function (data) { 66 | wx.saveImageToPhotosAlbum({ 67 | filePath: tempFilePath, 68 | success(res) { 69 | wx.showToast({ 70 | title: '保存成功', 71 | }); 72 | } 73 | }) 74 | } 75 | }); 76 | } 77 | }) 78 | } else { 79 | wx.saveImageToPhotosAlbum({ 80 | filePath: tempFilePath, 81 | success(res) { 82 | wx.showToast({ 83 | title: '保存成功', 84 | }); 85 | } 86 | }) 87 | } 88 | } 89 | }) 90 | } 91 | var Round = function (num) { 92 | return Math.round(num) 93 | } 94 | /* 点赞 */ 95 | function likeFn (e) { 96 | var that = getCurrentPages()[getCurrentPages().length - 1];//获取当前page实例 97 | var videoid = e.currentTarget.dataset.videoid; 98 | var isadd = e.currentTarget.dataset.isadd; 99 | var index = e.currentTarget.dataset.index; 100 | var num = e.currentTarget.dataset.num; 101 | if (isadd == 1) { 102 | that.setData({ 103 | clickindex: index 104 | }) 105 | } else { 106 | that.setData({ 107 | clickindex: null 108 | }) 109 | } 110 | wx.request({ 111 | url: getApp().Api_url + '/index.php/index/videoclick', 112 | method: 'POST', 113 | data: { 114 | customer_id: that.data.customer_id, 115 | video_id: videoid, 116 | is_add: isadd 117 | }, 118 | header: that.data.header, 119 | success: function (res) { 120 | if (res.data.status == 1) { 121 | var obj = 'myvideos[' + index + '].is_click'; 122 | var obj1 = 'myvideos[' + index + '].clickrate'; 123 | if (isadd == 1) { 124 | that.setData({ 125 | [obj]: isadd, 126 | [obj1]: parseInt(num) + 1 127 | }) 128 | if (getApp().globalData.cancellike.indexOf(videoid) != -1){ 129 | getApp().globalData.cancellike.splice(getApp().globalData.cancellike.indexOf(videoid),1) 130 | } 131 | getApp().globalData.pushlike.push(videoid) 132 | } else { 133 | that.setData({ 134 | [obj]: isadd, 135 | [obj1]: parseInt(num) - 1 136 | }) 137 | if (getApp().globalData.pushlike.indexOf(videoid) != -1) { 138 | getApp().globalData.pushlike.splice(getApp().globalData.pushlike.indexOf(videoid), 1) 139 | } 140 | getApp().globalData.cancellike.push(videoid) 141 | } 142 | } 143 | } 144 | }) 145 | } 146 | 147 | /* 取消收藏 */ 148 | function collectFn (e) { 149 | var that = getCurrentPages()[getCurrentPages().length - 1];//获取当前page实例 150 | var indexv = e.currentTarget.dataset.index; 151 | var video_id = e.currentTarget.dataset.videoid; 152 | wx.showModal({ 153 | title: '', 154 | content: '您要取消收藏的内容吗？', 155 | success: function (res) { 156 | if (res.confirm) { 157 | wx.request({ 158 | url: getApp().Api_url + '/index.php/index/videocollect', 159 | method: 'POST', 160 | data: { 161 | customer_id: that.data.customer_id, 162 | video_id: video_id, 163 | is_add: 0 164 | }, 165 | header: that.data.header, 166 | success: function (res) { 167 | var data = that.data.myvideos; 168 | data.splice(indexv, 1); 169 | if (that.data.MBIndex == indexv) { 170 | that.setData({ 171 | MBIndex: null 172 | }) 173 | } 174 | that.setData({ 175 | myvideos: data 176 | }) 177 | getApp().globalData.cancelcol.push(video_id); 178 | if (that.route == 'pages/videoplay/videoplay') { 179 | that.setData({ 180 | item0: that.data.myvideos[that.data.videobool] 181 | }) 182 | var pages = getCurrentPages(); 183 | var prevPage = pages[pages.length - 2]; 184 | var obj = prevPage.data.myvideos; 185 | for (var i = 0; i < obj.length; i++) { 186 | if (obj[i].id == e.currentTarget.dataset.videoid) { 187 | obj.splice(i, 1) 188 | prevPage.setData({ 189 | myvideos: obj 190 | }) 191 | } 192 | } 193 | if(data.length <= 0){ 194 | wx.navigateBack({ 195 | delta: 1 196 | }) 197 | } 198 | } 199 | } 200 | }) 201 | } 202 | } 203 | }) 204 | } 205 | module.exports = { 206 | userlogin: userlogin, 207 | checkChineseLen:checkChineseLen, 208 | savePicToAlbum: savePicToAlbum, 209 | likeFn: likeFn, 210 | collectFn: collectFn, 211 | savePicToAlbum: savePicToAlbum, 212 | Round:Round 213 | } 214 | -------------------------------------------------------------------------------- /index/index.js: -------------------------------------------------------------------------------- 1 | var app = getApp() 2 | import utils from '../utils/util.js'; 3 | var that; 4 | Page({ 5 | data: { 6 | pagenum: 0, 7 | customer_id: 0, 8 | loading: true, 9 | bootomtxt: false, 10 | covershow: true, 11 | coverhide: true, 12 | playshow: false, 13 | nowledgehide: true, 14 | tipsAnimation: {}, 15 | showshare: false, 16 | nowledge: '', 17 | autoplay: false, 18 | scrollTop: 0, 19 | nowledgescroll: true, 20 | playIndex: null, 21 | nowledgepd: false, 22 | videos:[ 23 | { 24 | id: "13", 25 | coursename: "可怕的大数据", 26 | thumb: "http://test.xiaoyingyang.com.cn/video_image_2018-08-22_5b7d31729f230.jpg", 27 | share_url: "https://workstation.test.anmeicare.com/Public/videocard/2018-08-22/crop_5b7d31777ba48.jpg", 28 | share_name: "https://workstation.test.anmeicare.com/Public/videocard/2018-08-22/5b7d31777ba48.jpg", 29 | autoplay:"false", 30 | clickrate:'0', 31 | introduction:'哼哼唧唧军军军', 32 | is_click:"0", 33 | is_collect:0, 34 | readnum:0, 35 | video:"http://style.aotemen.com/wyf/videos/bg.mp4", 36 | video_avinfo:"207.572000" 37 | 38 | }, 39 | { 40 | id: "11", 41 | coursename: "美女来跳舞", 42 | thumb: "http://test.xiaoyingyang.com.cn/video_image_2018-08-22_5b7d2687cfb0f.jpg", 43 | share_url: "https://workstation.test.anmeicare.com/Public/videocard/2018-08-22/crop_5b7d2687d8500.jpg", 44 | share_name: "https://workstation.test.anmeicare.com/Public/videocard/2018-08-22/5b7d2687d8500.jpg", 45 | autoplay: "false", 46 | clickrate: '0', 47 | introduction: '哼哼唧唧军军军', 48 | is_click: "0", 49 | is_collect: 0, 50 | readnum: 0, 51 | video: "http://style.aotemen.com/wyf/videos/bg.mp4", 52 | video_avinfo: "207.572000" 53 | }, 54 | { 55 | id: "2", 56 | coursename: "羽衣甘蓝羽衣甘蓝羽衣甘蓝羽衣甘蓝羽衣甘蓝", 57 | thumb: "http://test.xiaoyingyang.com.cn/vidoe_image_2018-08-12_5b6ff796096c2.jpg", 58 | share_url: "https://workstation.test.anmeicare.com/Public/videocard/2018-08-12/crop_5b6ff79615933.jpg", 59 | share_name: "https://workstation.test.anmeicare.com/Public/videocard/2018-08-12/5b6ff79615933.jpg", 60 | autoplay: "false", 61 | clickrate: '0', 62 | introduction: '哼哼唧唧军军军', 63 | is_click: "0", 64 | is_collect: 0, 65 | readnum: 0, 66 | video: "http://style.aotemen.com/wyf/videos/bg.mp4", 67 | video_avinfo: "207.572000" 68 | }, 69 | { 70 | id: "12", 71 | coursename: "猜题", 72 | thumb: "http://test.xiaoyingyang.com.cn/video_image_2018-08-22_5b7d2e20af642.jpg", 73 | share_url: "https://workstation.test.anmeicare.com/Public/videocard/2018-08-22/crop_5b7d2e20c54e8.jpg", 74 | share_name: "https://workstation.test.anmeicare.com/Public/videocard/2018-08-22/5b7d2e20c54e8.jpg", 75 | autoplay: "false", 76 | clickrate: '0', 77 | introduction: '哼哼唧唧军军军', 78 | is_click: "0", 79 | is_collect: 0, 80 | readnum: 0, 81 | video: "http://style.aotemen.com/wyf/videos/bg.mp4", 82 | video_avinfo: "207.572000" 83 | }, 84 | { id: "10", 85 | coursename: "偷黄豆", 86 | thumb: "http://style.aotemen.com/wyf/dist/images/touxiang.jpg", 87 | share_url: "https://workstation.test.anmeicare.com/Public/videocard/2018-08-22/crop_5b7cd0942ac36.jpg", 88 | share_name: "https://workstation.test.anmeicare.com/Public/videocard/2018-08-22/5b7cd0942ac36.jpg", 89 | autoplay: "false", 90 | clickrate: '0', 91 | introduction: '哼哼唧唧军军军', 92 | is_click: "0", 93 | is_collect: 0, 94 | readnum: 0, 95 | video: "http://style.aotemen.com/wyf/videos/bg.mp4", 96 | video_avinfo: "207.572000" 97 | }, 98 | { 99 | id: "9", 100 | coursename: "人才培训", 101 | thumb: "http://test.xiaoyingyang.com.cn/video_image_2018-08-22_5b7ccfca53d3f.jpg", 102 | share_url: "https://workstation.test.anmeicare.com/Public/videocard/2018-08-22/crop_5b7ccfcc19eb6.jpg", 103 | share_name: "https://workstation.test.anmeicare.com/Public/videocard/2018-08-22/5b7ccfcc19eb6.jpg", 104 | autoplay: "false", 105 | clickrate: '0', 106 | introduction: '哼哼唧唧军军军', 107 | is_click: "0", 108 | is_collect: 0, 109 | readnum: 0, 110 | video: "http://style.aotemen.com/wyf/videos/bg.mp4", 111 | video_avinfo: "207.572000" 112 | }, 113 | ] 114 | }, 115 | onLoad: function (options) { 116 | that = this; 117 | this.tipsheight = parseInt(wx.getSystemInfoSync().windowWidth / 750 * 400); 118 | this.tipsAnimation = wx.createAnimation({ 119 | duration: 500, 120 | }) 121 | // if(that.data.nowledge !=''){ 122 | 123 | // } 124 | }, 125 | onReady: function () { //创建视频上下文对象 126 | this.videoContextplay = wx.createVideoContext('myVideo') 127 | }, 128 | playvideo(e) { 129 | var videoindex = e.currentTarget.dataset.index; 130 | var videoid = e.currentTarget.dataset.videoid; 131 | that.setData({ 132 | playIndex: videoindex, 133 | videoid: videoid, 134 | videonum: e.currentTarget.dataset.videonum, 135 | heightclick: parseInt(e.detail.y), 136 | videosrc: e.currentTarget.dataset.videosrc 137 | }) 138 | this.tipsAnimation.translateY(-this.tipsheight).step(); 139 | this.setData({ 140 | tipsAnimation: this.tipsAnimation.export() 141 | }) 142 | // 检查网络状态 143 | wx.getNetworkType({ 144 | success: function (res) { 145 | if (res.networkType == '4g' || res.networkType == '3g' || res.networkType == '2g') { 146 | that.setData({ 147 | playshow: true, 148 | jxplay: false, 149 | }) 150 | // console.log('4G网络') 151 | } else if (res.networkType == "none" || res.networkType == "unknown") { 152 | wx.showToast({ 153 | title: '您的网络有问题', 154 | icon: 'none', 155 | duration: 1500 156 | }) 157 | // console.log('您的网络有问题') 158 | } else { 159 | var obj = 'videos[' + videoindex + '].readnum'; 160 | that.setData({ 161 | autoplay: true, 162 | [obj]: parseInt(that.data.videonum) + 1, 163 | jxplay: false, 164 | playshow: false 165 | }) 166 | /* console.log('jxplay111',that.data.jxplay)*/ 167 | // console.log("返回wifi状态111") 168 | } 169 | } 170 | }) 171 | }, 172 | playvideoll(e) { 173 | var videoindex = e.currentTarget.dataset.index; 174 | var videoid = e.currentTarget.dataset.videoid; 175 | var obj = 'videos[' + videoindex + '].readnum'; 176 | // let videoContextCurrent = wx.createVideoContext('myVideo-'+videoindex +'') 177 | that.setData({ 178 | playIndex: videoindex, 179 | videoid: videoid, 180 | playshow: false, 181 | autoplay: true, 182 | videonum: e.currentTarget.dataset.videonum, 183 | [obj]: parseInt(that.data.videonum) + 1, 184 | jxplay: false, 185 | Network: 1, 186 | videosrc: e.currentTarget.dataset.videosrc 187 | }) 188 | // videoContextCurrent.play() 189 | if (that.data.jxplay == false) { 190 | that.videoContextplay.play() 191 | } 192 | }, 193 | /* 播放量 */ 194 | hplay() { 195 | this.setData({ 196 | playshow: false, 197 | }) 198 | that.videoContextplay.play() 199 | // this.readnum(); 200 | }, 201 | end() { 202 | that.setData({ 203 | playIndex: null, 204 | videosrc: '' 205 | }) 206 | that.videoContext.exitFullScreen(); 207 | }, 208 | /* 视频播放中监测网络状态 */ 209 | update(e) { 210 | // return; 211 | wx.getNetworkType({ 212 | success: function (res) { 213 | if (res.networkType == 'none' && !that.data.jcnet) { 214 | that.setData({ 215 | jcnet: 1 216 | }) 217 | wx.showToast({ 218 | title: '您的网络有问题', 219 | icon: 'none', 220 | duration: 1500 221 | }) 222 | } else if ((res.networkType == '4g' || res.networkType == '3g' || res.networkType == '2g') && that.data.Network != 1) { 223 | // let videoContextCurrent = wx.createVideoContext('myVideo') 224 | that.setData({ 225 | jxplay: true, 226 | // playshow: true 227 | }) 228 | that.videoContextplay.pause() 229 | /* console.log("4g网络") */ 230 | } else { 231 | that.setData({ 232 | jxplay: false, 233 | playshow: false 234 | }) 235 | /* console.log('jxplay',that.data.jxplay) 236 | console.log("返回wifi状态") */ 237 | } 238 | } 239 | }) 240 | }, 241 | /* 滚动页面 */ 242 | onPageScroll: function (e) { 243 | if (e.scrollTop < 0) { 244 | return; 245 | } 246 | that.setData({ 247 | scrollTop: e.scrollTop, 248 | nowledgehide:true 249 | }) 250 | var Index=utils.Round(that.data.scrollTop/that.data.videoH) 251 | var scrollTopH=that.data.scrollTop 252 | if(that.data.scrollTop>=that.data.heightclick+100 || that.data.heightclick-that.data.scrollTop>=that.data.videoH3+that.data.videoH2){ 253 | if (that.data.sssss==1){ 254 | that.setData({ 255 | playIndex: that.data.playIndex 256 | }) 257 | }else{ 258 | that.setData({ 259 | playIndex: null 260 | }) 261 | } 262 | console.log('that.data.heightclick - that.data.scrollTop', that.data.heightclick - that.data.scrollTop) 263 | console.log('that.data.videoH3+that.data.videoH2', that.data.videoH3 + that.data.videoH2) 264 | }else{ 265 | return; 266 | } 267 | 268 | }, 269 | changescreen(e){ 270 | console.log(2222) 271 | console.log(e) 272 | if (e.detail.direction == "horizontal"){ 273 | that.setData({ 274 | playIndex: that.data.playIndex, 275 | sssss:1 276 | }) 277 | }else{ 278 | that.setData({ 279 | playIndex: that.data.playIndex, 280 | sssss: '' 281 | }) 282 | } 283 | } 284 | }) 285 | --------------------------------------------------------------------------------