转自:https://idig8.com/2018/09/22/xiaochengxujavashizhanxiaochengxushipinzhanshiyekaifa51/
这次说下,小程序的视频组件,图标放置 关联到了之前没有说过的一个组件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肯定是无法保存在我们的视频里面的。下面的我们来一起实现里面的功能。
原文地址:https://www.cnblogs.com/sharpest/p/10312461.html
时间: 2024-11-05 13:04:11