收藏
回答

live-player 设置高度超过225px就无效?

设置 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;

}











回答关注问题邀请回答
收藏

1 个回答

登录 后发表内容