- 如何监听到播放的视频卡住了?
视频播放过程,突然掉线了,视频播放画面会出现第三方的提示画面,我想自定义。那么如何监听到视频播放停止呢?
2022-09-09 - swiper组件官方的例子,如何修改宽度和高度?
[图片]
2022-09-06 - 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; }
2022-09-06