「小程式JAVA實戰」小程式視訊展示頁開發（51）
摘要：
這次說下，小程式的視訊元件，圖示放置 關聯到了之前沒有說過的一個元件cover-view。https://github.com/limingios/wxProgram.git 中No.15
覆蓋在原生元件之上的文字檢視
官網介紹 >https://developers....
這次說下，小程式的視訊元件，圖示放置 關聯到了之前沒有說過的一個元件cover-view。https://github.com/limingios/wxProgram.git 中No.15
覆蓋在原生元件之上的文字檢視
-
官網介紹
>https://developers.weixin.qq.com/miniprogram/dev/component/cover-view.html
視訊上需要新增功能
Page({
data: {
cover:'cover',
}
})
<view style='width:100%;height:100%'>
<video src="https://127.0.0.1:8081/180831CF2TS25MNC/4e0ca373-6520-45b9-a1a6-7ee8429dc5d8.mp4" muted='{{true}}' controls='{{false}}' autoplay='{{true}}' loop='{{true}}' enable-progress-gesture='{{false}}'
style='width:100%;height:100%;'
objectFit='{{cover}}'
>
<cover-view class='container'>
<!-- 上傳視訊 -->
<cover-image src='../../resource/images/camera.png' style='width:50rpx;height:50rpx;' bindtap='upload'></cover-image>
<!-- 搜尋按鈕 -->
<cover-image src='../../resource/images/search.png' style='width:45rpx;height:45rpx;' bindtap='showSearch'></cover-image>
</cover-view>
<cover-view class='container-me'>
<!-- 頭像 -->
<cover-image class="face" src='{{serverUrl}}{{publisher.faceImage}}' bindtap='showPublisher'></cover-image>
<!-- 喜歡收藏按鈕 -->
<block wx:if="{{userLikeVideo}}">
<cover-image class="size-me" src='../../resource/images/like.png' style='margin-top:30rpx;' bindtap='likeVideoOrNot'></cover-image>
</block>
<block wx:else>
<cover-image class="size-me" src='../../resource/images/unlike.png' style='margin-top:30rpx;' bindtap='likeVideoOrNot'></cover-image>
</block>
<!-- 評論按鈕 -->
<cover-image class="size-me" src='../../resource/images/comments.png' style='margin-top:30rpx;' bindtap='leaveComment'></cover-image>
<!-- 分享按鈕 -->
<cover-image class="size-me" src='../../resource/images/share.png' style='margin-top:30rpx;' bindtap='shareMe'></cover-image>
</cover-view>
<cover-view class='container-words'>
<cover-view>@{{publisher.nickname}}</cover-view>
<cover-view class='video-desc'>{{videoInfo.videoDesc}}</cover-view>
</cover-view>
<cover-view class='container-bottom'>
<!-- 首頁按鈕 -->
<cover-image class='' src='../../resource/images/index.png' class="size-bottom" bindtap='showIndex'></cover-image>
<!-- 我的按鈕 -->
<cover-image class='' src='../../resource/images/mine.png' class="size-bottom" bindtap='showMine'></cover-image>
</cover-view>
</video>
</view>
page {
height: 100%;
background-color: #141414;
}
.container {
display: flex;
margin-top: 20rpx;
margin-left: 50rpx;
margin-right: 50rpx;
justify-content: space-between;
}
.container-me {
margin-top: 360rpx;
margin-left: 50rpx;
width: 80rpx;
}
.container-words {
/* display: flex;
flex-direction: column; */
margin-top: 60rpx;
margin-left: 50rpx;
width: 100%;
color: white;
font-size: 14px;
}
.inputText {
background-color: gainsboro;
height: 35px;
}
.video-desc {
width: 600rpx;
height: 100rpx;
white-space: pre-wrap;
}
.container-bottom {
/* bottom: 10px;*/
display: flex;
margin-top: 60rpx;
margin-left: 50rpx;
margin-right: 50rpx;
/* margin-bottom: 10rpx; */
justify-content: space-between;
/* position: fixed;*/
}
.size-me {
width: 70rpx;
height: 70rpx;
}
.size-me-bgm {
width: 40rpx;
height: 40rpx;
}
.bgm-style {
display: flex;
flex-direction: row;
}
.size-bottom {
width: 60rpx;
height: 60rpx;
}
.face2 {
width: 75rpx;
height: 75rpx;
border: 0 solid #f00;
border-radius: 100rpx;
background-color: #f10b2e;
}
.face {
width: 75rpx;
height: 75rpx;
/* margin: 20rpx; */
border-radius: 50%;
}
.icoBtn {
flex: 1;
width: 80rpx;
height: 100%;
}
.comments-scoll {
height: 1200rpx;
}
.comments-all {
/* margin-top: 10px; */
margin-bottom: 10px;
/* border-bottom: solid 1px gray;*/
background-color: #141414;
color: #e8e8e8;
}
.face-comments {
width: 60rpx;
height: 60rpx;
border-radius: 50%;
margin-left: 5px;
}
.container-comments{
display: flex;
/* margin-top: 20rpx;
margin-left: 50rpx;
margin-right: 50rpx;
justify-content: space-between; */
}
.nickname-comments {
margin-left: 10px;
}
.nickname-lbl{
color: #a1a1a1;
}
.date-lbl{
color: #a1a1a1;
}
.comments-content{
margin-left: 5px;
margin-right: 5px;
/* margin-bottom: 10px; */
border-bottom: solid 1px #232323;
background-color: #141414;
}
.saySthView {
padding: 10px;
background-color: #141414;
line-height: 45px;
border-bottom: solid 1px #232323;
color: white;
}
.saySth {
margin-top: 10px;
margin-left: 10px;
font-size: 18px;
}
PS：如果我們把cover-view中的cover去掉的話，我們這個view肯定是無法儲存在我們的視訊裡面的。下面的我們來一起實現裡面的功能。
ofollow,noindex" target="_blank" href="http://zhanzhang.baidu.com/sitesubmit/index?sitename=https://idig8.com/2018/09/22/xiaochengxujavashizhanxiaochengxushipinzhanshiyekaifa51/">百度未收錄
>>原創文章，歡迎轉載。轉載請註明：轉載自IT人故事會，謝謝！
>>原文連結地址：