微信小程序开发|视频弹幕评论

image.png

wxml:

<!-- <view class='vbox'  wx:for="{{movies}}" wx:key="item">
    <video src='{{item.url}}' playerid='txv1'>123</video>
</view> -->


<!-- <view class="section tc">
  <video src="{{src}}"   controls ></video>
  <view class="btn-area">
    <button bindtap="bindButtonTap">获取视频</button>
  </view>
</view> -->

<view class="section tc">
  <video id="myVideo" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400"
    danmu-list="{{danmuList}}" enable-danmu danmu-btn controls autoplay="{{true}}"></video>
  <view class="btn-area">
    <!-- <button bindtap="bindButtonTap">获取视频</button> -->
    <input bindblur="bindInputBlur" />
    <button bindtap="bindSendDanmu">发送弹幕</button>
  </view>
</view>


<!-- 评论 -->

<view class="tool">
  <view class="tool-item" catchtap='Up' id="{{detail.id}}">
    <image src="/images/icon/like.png" />
  </view>
  <view class="tool-item" catchtap='Comment' id="{{detail.id}}">
    <image bindtap="bindReply" src="/images/icon/chat.png"></image>
  </view>
</view>


<view class="comment_release">
  <view class="left">
    <textarea class="text" placeholder-class="weui-input" fixed="true" maxlength="-1" show-confirm-bar="false" cursor-spacing="15" auto-height="true" bindtap="bindReply" focus="{{releaseFocus}}" placeholder="写评论" />
    <view class="line" />
  </view>
  <image class="emoji" src="/images/icon/emoji.png" />
  <!-- <button form-type="submit" class="submit">发送</button> -->
  <button bindtap="bindSendDanmu" class='submit'>发送弹幕</button>

</view>
```

CSS
```

.vbox {
  margin-top: 120rpx;
  /* border: 1px solid red; */
  height: 100%;
  width: 100%;
}

.section video{
  /* border: 1px solid red; */
  margin-top: 100rpx;
  width: 100%;
} 
.vbox video{
width: 100%;
}

/* 评论 */
/*整体样式，就是黑色的容器*/
.comment_release{
  display: flex;
  align-items: flex-end; 
  justify-content: space-between; 
  box-sizing: border-box;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 8px 0 8px 13px;
  background-color: #ffffff;
  font-size: 12px;
  z-index: 999;
}
/**第一个红色的容器
 *大概想法就是给flex-direction赋一个colomn的值，并列放置
 */
.comment_release.left{
  display: flex;
  flex-direction: column;
}
/*输入框*/
.comment_release .text{
  width: 222px;
  min-height: 17px;
  max-height: 51px; /*最多显示三行*/
  line-height: 17px;
  font-size: 12px;
  margin-bottom: 4px;
  margin-left: 10px;
}
/*线*/
.comment_release .line{
margin-bottom: 0 ;
width: 222px;
height: 1rpx;
background-color: #4B5CD7;
}
/*表情图标*/
.comment_release .emoji{
  width: 24px;
  height: 24px;
  line-height: 27px;
  margin-right: 5px;
  margin-left: 5px;
}
/*发送按钮*/
.comment_release .submit{ 
  width: 60px;
  height: 27px;
  line-height: 27px;
  text-align: center;
  margin-right: 10px;
  background-color: #4B5CD7;
  color: #ffffff;
  font-size: 12px;
}
 
.tool{
  height: 64rpx;
  text-align: right;
  line-height: 64rpx;
  margin:20rpx 28rpx 20rpx 0;
}
.tool-item{
  display: inline-block;
  vertical-align: top;
  margin-right: 30rpx;
}
.tool-item image{
  height: 50rpx;
  width: 50rpx;
}

```