wxml:
<video id="myVideo" class="video" src="{{videoSrc}}" enable-danmu controls show-fullscreen-btn show-center-play-btn="{{false}}" auto-pause-if-navigate auto-pause-if-open-native show-play-btn object-fit="contain" bindpause="bindpause" bindended="bindended" bindfullscreenchange="bindfullscreenchange" title="保单服务" bindcontrolstoggle="bindcontrolstoggle" poster="{{videoCoverImg}}">
<cover-view class="videoH" wx:if="{{isvideoH}}">
<cover-view class="videoH-01" data-id="2" bindtap="clickList">
<cover-image src="https://yjm.henan100.com/littleCode/images/product_01.png" mode="widthFix" class="videoH-01-cover-image"></cover-image>
<cover-view class="videoH-01-text">详情</cover-view>
</cover-view>
<cover-view class="videoH-01" data-id="3" bindtap="clickList">
<cover-image src="https://yjm.henan100.com/littleCode/images/product_02.png" mode="widthFix" class="videoH-01-cover-image"></cover-image>
<cover-view class="videoH-01-text">流程</cover-view>
</cover-view>
<cover-view class="videoH-01" data-id="4" bindtap="clickList">
<cover-image src="https://yjm.henan100.com/littleCode/images/product_03.png" mode="widthFix" class="videoH-01-cover-image"></cover-image>
<cover-view class="videoH-01-text">案例</cover-view>
</cover-view>
</cover-view>
</video>
wsxx:
.videoH{ width:200rpx; height: 100vh; position: absolute; left:0; top: 0; z-index: 99999; background: rgba(0,0,0,1); display: flex; align-items: center; justify-content: center; flex-direction:column;}
.videoH-01{ width:50%; text-align: center; padding-top: 40rpx;}
.videoH-01-cover-image{ width:80rpx; height: 80rpx; margin:0 auto;}
.videoH-01-text{ display: block; width:100%; font-size: 30rpx; color:#fff; padding-top:10rpx;}
js:
bindfullscreenchange:function (e) {
let screen = e.detail.fullScreen;
let direction = e.detail.direction;
if (direction=="horizontal" ){
this.setData({
direction:"horizontal",
fullScreen:screen,
isvideoH:true
})
}else{
this.setData({
direction:"vertical",
fullScreen:false,
isvideoH:false
})
}
console.log("是否全屏"+screen);
console.log("屏方向"+direction);
console.log("出现了么"+this.data.isvideoH);
},
bindcontrolstoggle:function (e) {
if(this.data.fullScreen && e.detail.show && this.data.direction=="horizontal"){
console.log("aa");
this.setData({
isvideoH:true
})
}else{
console.log("bb");
this.setData({
isvideoH:false
})
}
}
cover-view 正常