<!-- 视频资源 --> <video id="myVideo" src="{{vsrc[vid]}}" danmu-list="{{danmuList}}" autoplay='true' show-fullscreen-btn='false' show-center-play-btn='false' objectFit='fill' style='height:{{video_heighe}}vh;'></video><!-- 点击滑动蒙版图层 --><cover-view data-time="{{lastTapTime}}" class="ball{{ball_height}}" id="id" bindtap="multipleTap" bindtouchstart='touchstart' bindtouchend='touchend'> <!-- 播放按钮 --> <cover-image src='/img/play.png' class='videoplay' style='display:{{display_play}}'></cover-image></cover-view><cover-view class='comment_border' style='display:{{display_pl}}'> <cover-view class='sidebar_b_rt'> <!-- 头像 --> <cover-image src='../../img/Rotation_chart.jpg' data-userid='{{item.userid}}' class='head_img' catchtap=''></cover-image> <!-- <cover-view class='jia'>+</cover-view> --> </cover-view> <!-- 赞 --> <cover-view class='sidebar_b_rt'> <cover-image src="{{not_zan?'/img/fabulous1.png':'/img/fabulous.png'}}" catchtap='toCollect' class='comment_img ' data-vid='{{item.vid}}' data-uid='{{item.userid}}'></cover-image> <!-- 赞数 --> <cover-view class='comment_num' catchtap='toCollect'>赞</cover-view> </cover-view> <!-- 评论 --> <cover-view class='sidebar_b_rt'> <cover-image src='/img/comment.png' class='comment_img ' catchtap='showModal' data-vid="{{item.vid}}" data-img_url='{{item.wapimg}}'></cover-image> <!-- 评论数 --> <cover-view class='comment_num' catchtap='showModal' data-vid="{{item.vid}}" data-img_url='{{item.wapimg}}'>{{commentList.length}}</cover-view> </cover-view> <!-- 分享 --> <cover-view class='sidebar_b_rt'> <button class='comment__button' open-type='share'> <cover-image src='/img/share.png' class='comment_num'>转发</cover-image> </button> <!-- 转发数 --> <cover-view class='comment_num'>分享</cover-view> </cover-view></cover-view><!-- 隐藏评论窗口按钮 --><view animation="{{animationData}}" class="commodity_attr_box" wx:if="{{showModalStatus}}"> <!-- 评论遍历 --> <view class="commentTitle"> <image src='/img/pl.png' class='img'></image> <text>评论({{commentList.length}})</text> <image class='down' src='/img/down.png' bindtap='hideModal'></image> </view> <scroll-view scroll-y='true' style='height:500rpx'> <block wx:for='{{commentList}}' wx:key='item.vid'> <view class="commentContent"> <view class="contentLeft"> <view>{{item.username}}</view> <view>{{item.ComID}}楼 {{item.ComTime}}</view> </view> <view class="clear"></view> <view class="Comment"> <text>{{item.ComContent}}</text> </view> </view> </block> </scroll-view> <view class="commentInput"> <input placeholder="请填写评论内容 " class="input_box" bindblur='getComment' /> <button class="comment_btn" bindtap='bindContent' data-vid='{{vid}}'> <text class='comment_txt'>发送</text> </button> </view></view>page { background: #eeecec; width: 100%; height: 100%;} video { width: 100%; height: 100vh; } .ball2{ background-color: rgba(0, 0, 0, 0.103); width: 100%; height:100%; position: absolute; top: 0; left: 0; display: flex; justify-content: center; align-items: center;}.ball1 { background-color: rgba(0, 0, 0, 0.103); width: 100%; height: 45vh; position: absolute; top: 0; left: 0; display: flex; justify-content: center; align-items: center;} .videoplay { width: 160rpx; height: 160rpx; z-index: 100; position: absolute; left: 300rpx; top: 40%} .comment_border { position: absolute; top: 35%; right: 10rpx; text-align: center;} .head_img { width: 80rpx; height: 80rpx; border-radius: 50%; border: 5rpx #fff solid;}.jia{color:#ff0505;font-size: 60rpx;margin-top: -40rpx; }.comment_img { width: 60rpx; height: 60rpx; margin-left: 15rpx; margin-top: 50rpx}.comment_num { color: #fff; font-size: 24rpx; text-align: center; margin-top: 10rpx;}.comment__button{ width: 60rpx; height: 70rpx; text-align: center; line-height: 40rpx; background-color: rgba(3, 2, 2, 0); margin-top: 30rpx;}button::after { border: none;} /* 评论弹出层样式 */ .commodity_screen { width: 100%; height: 50%; position: fixed; top: 0; left: 0; background: #000; opacity: 0.2; overflow: hidden; z-index: 1000; color: #fff;} /*对话框 */ .commodity_attr_box { height: 50%; width: 100%; overflow: hidden; position: fixed; bottom: 0; left: 0; z-index: 2000; background: #fff; padding-bottom: 60rpx;} /* 评论区 */ .down { width: 46rpx; height: 46rpx; float:right;} .commentTitle { font-size: 34rpx; padding: 10rpx 20rpx; background: #fff;} .commentTitle .img { width: 36rpx; height: 36rpx; margin-right: 20rpx;} .commentContent { width: 90%; margin: 0 40rpx; padding-top: 10rpx; padding-bottom: 10rpx; border-bottom: 1rpx solid #bbb;} .contentLeft { font-size: 26rpx; color: #666;} .Comment { margin-top: 10rpx; margin-bottom: 20rpx; font-size: 28rpx;} .commentInput { position: fixed; bottom: 0; left: 0; width: 100%; background: #f0f0f0; display: flex; flex-direction: row; height: 80rpx} .input_box { width: 75%; height: 60rpx; line-height: 60rpx; margin: 8rpx; padding-left: 10rpx; background: #fff; border: 1rpx solid #f3f3f3; border-radius: 10rpx; font-size: 28rpx;} .comment_btn { font-size: 28rpx; float: right; width: 20%; border-radius: 10rpx; height: 60rpx; margin: 10rpx 0; line-height: 60rpx; background: #dedede;}Page({ data: { commentList: [{ username: '冷不过人心', ComID: '1', ComTime: '2019.1.1', ComContent: '评论评论评论', }, { username: '冷不过人心', ComID: '1', ComTime: '2019.1.1', ComContent: '评论评论评论', }, { username: '冷不过人心', ComID: '1', ComTime: '2019.1.1', ComContent: '评论评论评论', }, { username: '冷不过人心', ComID: '1', ComTime: '2019.1.1', ComContent: '评论评论评论', }, ], ball_height: 2, //播放按钮 display_play: 'none', //点击评论隐藏图标 display_pl: 'block', count: 1, index_num: 1, play: 'none', inputValue: '', index: 1, vid: 0, pagey: '', vsrc: ['http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" binderror="videoErrorCallback', 'http://v2018.zhuoxuncn.com/zhuoxunvideo/20181220/0104_1.mp4', 'http://v2018.zhuoxuncn.com/zhuoxunvideo/20181123/27.mp4', 'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" ,binderror="videoErrorCallback', 'http://v2018.zhuoxuncn.com/zhuoxunvideo/20181220/0104_1.mp4','http://v2018.zhuoxuncn.com/zhuoxunvideo/20181123/27.mp4', 'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" binderror="videoErrorCallback', 'http://v2018.zhuoxuncn.com/zhuoxunvideo/20181220/0104_1.mp4', ], src: '', }, /// 单击、双击 multipleTap: function(e) { var that = this var currentTime = e.timeStamp var lastTapTime = that.lastTapTime that.lastTapTime = currentTime if (currentTime - lastTapTime < 300) { // 双击触发 console.log("double tap") clearTimeout(that.lastTapTimeoutFunc); console.log(this.data) var that = this; // 提交点赞 var vid = this.data.vid; if (this.data.count == '1') { that.setData({ fav: -1, not_zan: true, count: 2 }) } else if (this.data.count == '2') { that.setData({ not_zan: true, count: 1 }) } } else { //单击触发 that.lastTapTimeoutFunc = setTimeout(function() { console.log(that.data) console.log(that.data.index_num) that.setData({ index_num: that.data.index_num + 1 }); if (that.data.index_num % 2 == 1) { console.log('播放') that.videoContext.play() that.setData({ display_play: 'none' }) } else { console.log('暂停') that.videoContext.pause() that.setData({ display_play: 'block' }) } }, 300); } }, onReady: function(res) { this.videoContext = wx.createVideoContext('myVideo') }, // 点击图片的点赞事件 这里使用的是同步的方式 toCollect: function(e) { console.log(e) var that = this; // 提交点赞 var vid = e.currentTarget.dataset.vid; if (this.data.count == 1) { that.setData({ fav: -1, not_zan: true, count: 2 }) } else { that.setData({ fav: 0, not_zan: false, count: 1 }) } }, bindPlay: function() { this.videoContext.play() }, touchstart: function(res) { this.setData({ pagey: res.changedTouches[0].pageY }) }, touchend: function(res) { if (res.changedTouches[0].pageY - this.data.pagey > 100) { var isZero = this.data.vid == 0 var id = this.data.vid == 0 ? 0 : this.data.vid - 1 if (isZero) { wx.showToast({ title: '已是第一个！', }) } else { this.setData({ vid: id, index: 1 }) var that = this setTimeout(function() { that.bindPlay() }, 500) } } else if (this.data.pagey - res.changedTouches[0].pageY > 100) { var islast = this.data.vid == this.data.vsrc.length - 1 var lid = this.data.vid == this.data.vsrc.length - 1 ? this.data.vsrc.length - 1 : this.data.vid + 1 if (islast) { wx.showToast({ title: '已是最后一个！', }) } else { this.setData({ vid: lid, index: 1 }) } var that = this setTimeout(function() { that.bindPlay() }, 500) } }, bindInputBlur: function(e) { this.inputValue = e.detail.value }, bindSendDanmu: function() { this.videoContext.sendDanmu({ text: this.inputValue, color: getRandomColor() }) }, // 播放 bindPlay: function() { this.videoContext.play() console.log(11) }, // 暂停播放 bindPause: function() { this.videoContext.pause() display_play: 'block' }, //播放结束 bindend: function() { var a = this.data.index var a_dow = a + 1 console.log(a + 1); this.setData({ index: a_dow, vid: this.data.scrollTop_list[parseInt(a_dow)].vid, display_play: 'none', video: [], }) // 获取视频 this.tab_video() // 获取评论列表 this.getcomment() }, videoErrorCallback: function(e) { console.log('视频错误信息:') console.log(e.detail.errMsg) }, //评论 showModal: function() { var animation = wx.createAnimation({ duration: 200, timingFunction: "linear", delay: 0 }) this.animation = animation animation.translateY(300).step() this.setData({ animationData: animation.export(), showModalStatus: true, heighTrue: false, video_heighe: 45, ball_height: 1, display_pl: 'none' }) setTimeout(function() { animation.translateY(0).step() this.setData({ animationData: animation.export() }) }.bind(this), 200) }, //隐藏对话框 hideModal: function() { // 隐藏遮罩层 var animation = wx.createAnimation({ duration: 200, timingFunction: "linear", delay: 0 }) this.animation = animation animation.translateY(300).step() this.setData({ animationData: animation.export(), }) setTimeout(function() { animation.translateY(0).step() this.setData({ animationData: animation.export(), showModalStatus: false, heighTrue: true, video_heighe: 100, ball_height: 2, display_pl: 'block' }) }.bind(this), 200) },})转载自
