设置 lp高度,即播放组件高度, 超过225px就无效了?
<view class="container page-live">
<view class="page-body">
<view class="page-section page-section-spacing swiper">
<swiper
indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" circular="{{circular}}" vertical="{{vertical}}"
interval="{{interval}}" duration="{{duration}}" previous-margin="{{previousMargin}}px" next-margin="{{nextMargin}}px">
<block wx:for="{{liveList}}" wx:key="*this">
<swiper-item>
<view class="video-name">{{item.deviceCode}}</view>
<view class="swiper-item">
<video src="{{item.liveUrl}}" autoplay wx:if="{{id != 4110}}" id="{{'video'+index}}" type="application/x-mpegURL" style="width:100%;height:65%"></video>
<live-player id="livePlayer" src="{{item.liveUrl}}" wx:else mode="RTC" autoplay bindstatechange="statechange" binderror="error" catchtap="onVideoTap" class="{{fullScreen ? 'video-item full-screen' :'video-item'}}" bindfullscreenchange="{{fullscreenChange}}" object-fit="{{objectFit}}" class="lp" >
<!-- 竖屏模式 -->
<cover-view class="{{fullScreen ? 'hidden' : ''}} video-controls-container">
</cover-view>
<cover-view class="{{(fullScreen || !showVideoControls) ? 'hidden' : ''}} video-controls-container">
<cover-image class="controls-img" catchtap="fullScreen" src="./images/video_icon_full.png"></cover-image>
</cover-view>
<!-- 横屏模式 -->
<cover-view class="{{!fullScreen ? 'hidden' : '' }}' video-back-container">
<cover-image class="back-img" src="./images/nav_icon_back_full.png" catchtap="unfullScreen"></cover-image>
<!-- <cover-view class="back-device">{{deviceName}}</cover-view> -->
</cover-view>
</live-player>
</view>
</swiper-item>
</block>
</swiper>
</view>
</view>
</view>
/* @import "./weui.wxss"; */
page{
height:100%;
background-color: grey;
}
.video-name{
color: white;
/* position: relative; */
text-align: center;
/* left: 180rpx; */
}
.page-live{
width: 100%;
height: 100%;
}
.page-body{
padding-top: 60rpx;
width: 100%;
background-color: hotpink;
height: 60vh;
}
.page-section{
width: 100%;
height: 50vh;
/* height: 100rpx; */
background-color: lawngreen;
/* margin-bottom: 60rpx; */
}
/* .swiper-item{
} */
.lp{
height:800px;
width: 100%;
}
/* .page-section_center{
display: flex;
flex-direction: column;
align-items: center;
} */
.page-section:last-child{
margin-bottom: 0;
}
/* .page-section-spacing{
padding: 0 50rpx;
} */
button{
margin-bottom: 30rpx;
}
button:last-child{
margin-bottom: 0;
}
/* 全屏播放 */
.full-screen {
height: 100%;
}
cover-view[hidden]{
display: none!important;
}
.video-controls-container {
position: absolute;
width: 100%;
bottom:0;
z-index: 1000;
/* display: flex; */
height: 84rpx;
left: 650rpx;
top: 180rpx;
/* //space-around */
/* justify-content:end;
align-items: flex-end;
align-content: flex-end;
flex-wrap:wrap; */
}
.video-controls-container .controls-img {
width: 60rpx;
height: 60rpx;
}
.video-back-container {
position: absolute;
width: 360rpx;
top:0;
z-index: 1000;
display: flex;
height: 84rpx;
justify-content:flex-start;
align-items: flex-start;
align-content: flex-start;
flex-wrap:wrap;
}
.video-back-container{
display: inline-block;
width:100%;
text-align: left;
left: 0;
background: rgba(0,0,0,0.30);
}
.video-back-container .back-img {
width: 40rpx;
height: 40rpx;
margin: 22rpx 20rpx 22rpx 30rpx;
display: inline-block;
}
.hidden {
display: none!important;
}
.back-img {
width: 40rpx;
height: 40rpx;
margin: 15rpx 0rpx;
float: left;
}
live-player
默认宽度300px、高度225px,可通过qss设置宽高。详情见官方文档:https://q.qq.com/wiki/develop/miniprogram/component/media/live-player.html