先点击全屏/取消全屏 全屏,再点击全屏/取消全屏 取消全屏时,会出现如下图效果(手机竖着看图,白色空白处是在屏幕下方)
id="video"
ref="video"
class="video"
:controls="false"
poster="https://s.yun-live.com/images/20200715/902844b0f1215ff236ad6b1bd1683555.jpg"
:src="src"
>
全屏/取消全屏
export default {
data() {
return {
src: "https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4",
fullScreen: false
}
},
mounted() {
// #ifndef MP-ALIPAY
// this.videoContext = uni.createVideoContext('video')
// 注意,在 subNvue中要使用这种方式获取video实例
this.videoContext = this.$refs.video
// #endif
},
methods: {
// 点击全屏
fullScreenHandler() {
if(this.fullScreen){
this.videoContext.exitFullScreen()
}else{
this.videoContext.requestFullScreen()
}
// 改变
this.fullScreen = !this.fullScreen
},
}
}
.video {
width: 750rpx;
}
/* 底部控制 */
.controls-bottom {
position:absolute;
bottom:0;
right: 0;
width: 750rpx;
}