抖音小程序

app.json

{
  "pages":[
    "pages/video/video"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "抖音短视频",
    "navigationBarTextStyle":"black"
  }
}

video.xml

<!-- ---------- -->

<video autoplay='true' src='/resources/timo.mp4'
 
show-center-play-btn='false' show-play-btn='false'>

  <cover-view class='top'>{{top}}</cover-view>
  <cover-image class='avatar' src='/resources/5.png'></cover-image>
  <cover-image class='search' src='/resources/search.png'></cover-image>
  <cover-image class='live' src='/resources/dian.png'></cover-image>
  <cover-image class='jia' src='/resources/jian.png'></cover-image>
  <cover-image class='comments' src='/resources/comments.png'></cover-image>
  <cover-image class='like' src='/resources/xin.png'></cover-image>
  <cover-image class='share' src='/resources/share.png'></cover-image>

  <cover-view class='bottomlist1'>首页</cover-view>
  <cover-view class='bottomlist2'>关注</cover-view>
  <cover-view class='bottomlist3'>消息</cover-view>
  <cover-view class='bottomlist4'>我</cover-view>


  <cover-view class='like-Num'>3.7w</cover-view>
  <cover-view class='comments-Num'>1496</cover-view>
  <cover-view class='share-Num'>3682</cover-view>
  <cover-view class='admin'>#佛系少女手势舞 《佛系少女》手
  </cover-view>
  <cover-view class='admin1'>势舞来了,这是我自己的手势舞
  </cover-view>
  <cover-view class='admin2'>哦 ~ 喜欢就一起来玩挑战吧
  </cover-view>
</video>

video.wxss

/* pages/video/video.wxss */

video {
  width: 100%;
  height: 520px;
   /* position: relative;  */
}

.search {
  width: 20px;
  height: 20px;
  position: absolute; 
  left: 5%;
  top: 5%;
}

.top {
  color: white;
  position: absolute;
  left: 40%;
  top: 5%;
}

.avatar {
  width: 40px;
  height: 40px;
  position: absolute;
  right: 5px;
  top: 40%;
}

.jia {
  width: 40px;
  height: 40px;
  position: absolute;
  bottom: 6px;
  left: 45%;
}

.live {
  width: 38px;
  height: 35px;
  position: absolute;
  right: 5px;
  top: 4%;
}

.like {
  width: 40px;
  height: 40px;
  position: absolute;
  right: 8px;
  top: 50%;
}

.like-Num {
  position: absolute;
  right: 12px;
  top: 58%;
  font-size: 9px;
  color: white;
}

.comments {
  width: 26px;
  height: 28px;
  position: absolute;
  right: 10px;
  top: 63%;
}

.comments-Num {
  position: absolute;
  right: 11px;
  top: 69%;
  color: white;
  font-size: 9px;
}

.share {
  width: 26px;
  height: 28px;
  position: absolute;
  right: 10px;
  top: 72%;
}

.share-Num {
  position: absolute;
  right: 10px;
  top: 78%;
  color: white;
  font-size: 9px;
}

.bottomlist1 {
  color: white;
  position: absolute;
  bottom: 4%;
  left: 5%;
}

.bottomlist2 {
  color: white;
  position: absolute;
  bottom: 4%;
  left: 30%;
}

.bottomlist3 {
  color: white;
  position: absolute;
  bottom: 4%;
  left: 65%;
}

.bottomlist4 {
  color: white;
  position: absolute;
  bottom: 4%;
  left: 90%;
}

.admin {
  color: white;
  position: absolute;
  bottom: 20%;
  left: 5%;
  font-size: 12px;
}

.admin1 {
  color: white;
  position: absolute;
  bottom: 17%;
  left: 5%;
  font-size: 12px;
}

.admin2 {
  color: white;
  position: absolute;
  bottom: 14%;
  left: 5%;
  font-size: 12px;
}