「小程序JAVA实战」小程序视频展示页开发(52)
转自: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肯定是无法保存在我们的视频里面的。下面的我们来一起实现里面的功能。
「小程序JAVA实战」小程序视频展示页开发(52)的更多相关文章
- 「小程序JAVA实战」小程序视频封面处理(48)
转自:https://idig8.com/2018/09/16/xiaochengxujavashizhanxiaochengxushipinfengmianchuli47/ 截图这块,在微信小程序工 ...
- 「小程序JAVA实战」小程序的flex布局(22)
转自:https://idig8.com/2018/08/09/xiaochengxu-chuji-22/ 之前已经把小程序的框架说完了,接下来说说小程序的组件,在说组件之前,先说说布局吧.源码:ht ...
- 「小程序JAVA实战」小程序的留言和评价功能(70)
转自:https://idig8.com/2018/10/28/xiaochengxujavashizhanxiaochengxudeliuyanhepingjiagongneng69/ 目前小程序这 ...
- 「小程序JAVA实战」小程序的举报功能开发(68)
转自:https://idig8.com/2018/09/25/xiaochengxujavashizhanxiaochengxudeweixinapicaidancaozuo66-2/ 通过点击举报 ...
- 「小程序JAVA实战」小程序的个人信息作品,收藏,关注(66)
转自:https://idig8.com/2018/09/24/xiaochengxujavashizhanxiaochengxudegerenxinxizuopinshoucangguanzhu65 ...
- 「小程序JAVA实战」小程序的关注功能(65)
转自:https://idig8.com/2018/09/24/xiaochengxujavashizhanxiaochengxudeguanzhugongneng64/ 在个人页面,根据发布者个人和 ...
- 「小程序JAVA实战」小程序的视频点赞功能开发(62)
转自:https://idig8.com/2018/09/24/xiaochengxujavashizhanxiaochengxudeshipindianzangongnengkaifa61/ 视频点 ...
- 「小程序JAVA实战」小程序的springboot后台拦截器(61)
转自:https://idig8.com/2018/09/24/xiaochengxujavashizhanxiaochengxudespringboothoutailanjieqi60/ 之前咱们把 ...
- 「小程序JAVA实战」小程序首页视频(49)
转自:https://idig8.com/2018/09/21/xiaochengxujavashizhanxiaochengxushouyeshipin48/ 视频显示的内容是视频的截图,用户的头像 ...
- 「小程序JAVA实战」小程序上传短视频(46)
转自:https://idig8.com/2018/09/14/xiaochengxujavashizhanxiaochengxushangchuanduanshipin45/ 个人信息:用户上传短视 ...
随机推荐
- Java开源-astar:A 星算法
astar A星算法Java实现 一.适用场景 在一张地图中,绘制从起点移动到终点的最优路径,地图中会有障碍物,必须绕开障碍物. 二.算法思路 1. 回溯法得到路径 (如果有路径)采用“结点与结点的父 ...
- 使用扩展方法(Chapter3 P39-41)
namespace LanguageFeatures { public class ShoppingCart { public List<Product> Products { get; ...
- PHP:第五章——字符串过滤函数
<?php header("Content-Type:text/html;charset=utf-8"); //字符串过滤函数: //1.n12br 在所有新行之前插入Htm ...
- js使用post 方式打开新窗口,隐藏Url参数
要想在地址栏隐藏url传递的参数,不能直接隐藏,但有几下几个变通的方法. 使用类似Base64编码,将URL参数进行简单加密. 使用框架页; 使用POST方式传递数据; 使用Cookie传递数据; 下 ...
- XML——DTD
body, table{font-family: 微软雅黑; font-size: 10pt} table{border-collapse: collapse; border: solid gray; ...
- HDU 4068
http://acm.hdu.edu.cn/showproblem.php?pid=4068 暴力枚举两个全排列,犯了若干错误,以此为鉴 #include <iostream> #incl ...
- windows10企业版2016长期服务版激活 -------转
原地址: https://blog.csdn.net/chaoyu168/article/details/79241506 win10 2016 长期服务版的ISO文件中本身就带有KMS激活KEY,不 ...
- BZOJ3211: 花神游历各国(线段树)
3211: 花神游历各国 Time Limit: 5 Sec Memory Limit: 128 MBSubmit: 5692 Solved: 2114[Submit][Status][Discu ...
- 【C#】App_LocalResources实现多语言
介绍 如果您创建的网页将由使用不同语言的用户阅读,则必须为这些读者提供用他们自己的语言查看网页的方法.一种方法是分别用各语言重新创建页面,但这种方法可能需要大量工作量.容易出错并且在更改原始页时很难维 ...
- PostgreSQL性能极限
目前已有很多PostgreSQL的系统在实际生产环境下管理着超过4TB的数据.一些PostgreSQL系统的极限值如下表所列: 极限值: 最大单个数据库大小 不限 最大数据单表大小 32 TB 单条记 ...