<!-- 視頻資源 -->
<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)
},
})
轉載自
