Commit 7a8b54e8 by 李嘉林

视频封面、底部优化

parent b6a74154
......@@ -17,7 +17,8 @@ const componentOptions = {
data: {
isPageHidden: false, // 页面是否处于隐藏状态
isPlay: false,
videoContext:"",
videoContext: "",
firstPlay: false,
},
// 数据监听器
observers: {},
......@@ -48,7 +49,7 @@ const componentOptions = {
if (type == 0) {
// 开始播放
this.videoContext.play();
this.setData({ isPlay: true });
this.setData({ isPlay: true,firstPlay:true });
} else if (type == 1) {
// 暂停播放
this.videoContext.pause();
......@@ -70,7 +71,7 @@ const componentOptions = {
this.videoContext.play();
}
isPlay = !isPlay;
this.setData({ isPlay });
this.setData({ isPlay,firstPlay: true });
}
},
// 组件生命周期
......
......@@ -15,7 +15,9 @@
controls="{{datas.componentData['nativeControl']}}"
loop="{{datas.componentData['loopPlay']}}"
poster="{{datas.componentData['poster']}}"
/>
>
<image wx:if="{{!firstPlay}}" src="{{datas.componentData['poster']}}" mode="widthFix"></image>
</video>
<view
class="playerBtn"
bindtap="playVideo"
......
......@@ -11,12 +11,26 @@
}
.main .isVideo{
width: 100%;
height:0;
padding-bottom:56.25%;
position: relative;
}
.main .isVideo video{
width: 100%;
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
display: block;
}
.main .isVideo video .posterImg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.main .isVideo .playerBtn{
position: absolute;
top: 50%;
......
......@@ -1206,16 +1206,16 @@
transform: translateY(-40%)
}
.isItem .antt{
width:100rpx;
height: 100rpx;
background: var(--main-color);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
border: 8rpx solid #fff;
box-sizing: border-box;
color: white;
width:100rpx;
height: 100rpx;
background: var(--main-color);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
border: 8rpx solid #fff;
box-sizing: border-box;
color: white;
}
.isItem .item .img-view{
width: 90rpx;
......@@ -1226,6 +1226,11 @@
justify-content: center;
align-items: center;
border: 4px solid #fff;
overflow: hidden;
}
.isItem .item .img-view image{
width: 90rpx!important;
height: 90rpx!important;
}
.icons {
width: 90rpx;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment