微信小程序播放详情页，附带：点赞.双击点赞.单击控制视频播放.上下滑动切换视频等功能

淩亂°似流年 2021-09-17 12:02 289阅读 0赞

![20190104141943141.png][]

<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>
      
      <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)
      },
    })

目前video组件层级最高，如果要评论的话只能让整个视频的高度调整一下，不然手机上到时候用不了，而且

标签cover-view里不能放input，所以没有什么更好的办法；

各位有更好的建议欢迎指点

有问题的朋友们可以加QQ群：![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjQxNTA0_size_16_color_FFFFFF_t_70][]

[20190104141943141.png]: /images/20210724/73f58f1a4c1241b3913c0757c5563ff5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjQxNTA0_size_16_color_FFFFFF_t_70]: /images/20210724/20a24a24a4c6497b8ee46d864127d82b.png