话不多说,直接上代码
wxml文件
这里是原生video组件的方式
<video enable-progress-gesture="false" >
<cover-view class="{{bigsScreen?'bigScreen':'cover'}}"></cover-view>
</video>
这里是使用腾讯视频组件的方式
<player-component id="tvp-id"
bindfullscreenchange="screenChange"//大小屏幕切换触发事件
enable-progress-gesture="{{false}}" >//禁止左右滑动
<view slot="default" class="{{bigsScreen?'bigScreen':'cover'}}" ></view>
</player-component>
.json文件中
"usingComponents": {
"player-component": "plugin://player/video"
}
.js文件中
data: {
bigsScreen:false
},
screenChange(e){
let fullScreen = e.detail.fullScreen //值true为进入全屏,false为退出全屏
if (!fullScreen ){ //退出全屏
this.setData({
bigsScreen:false
})
}else{ //进入全屏
this.setData({
bigsScreen: true
})
}
},
.wxss文件中
.cover{
position: absolute;
bottom: 0;
z-index: 998;
height: 20%;
background-color: red;//暂定,方便调试使用
//background-color: rgba(255, 255, 255, 0.007);
margin-left: 60px;
width: 70%;
}
.bigScreen{
position: absolute;
bottom: 15%;
z-index: 998;
height: 10%;
background-color: red;//暂定,方便调试使用
background-color: rgba(255, 255, 255, 0.007);
margin-left: 0px;
width: 100%;
}
这里的background-color: red;是为了方便调试的时候使用,位置确定好之后可以使用下面注释的代码做替换
大致的就这么多了,如果代码有什么问题欢迎提问,我会尽我最大的努力帮助到您,如果有帮助到您,请给个关注,加个收藏,这将是我创作的最大力量,谢谢!