// 点击全屏
fullScreenHandler() {
if(this.fullScreen){
this.videoContext.exitFullScreen()
}else{
this.videoContext.requestFullScreen()
}
// 改变
this.fullScreen = !this.fullScreen
},
梦学谷
- 发布：2020-11-25 11:11
- 更新：2021-02-02 15:18
- 阅读：1482
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： mac
HBuilderX类型： 正式
HBuilderX版本号： 2.9.8
手机系统： iOS
手机系统版本号： iOS 13.4
手机厂商： 苹果
手机机型： iphone8
页面类型： nvue
打包方式： 云端
项目创建方式： HBuilderX
示例代码：
操作步骤：
// 点击全屏
fullScreenHandler() {
if(this.fullScreen){
this.videoContext.exitFullScreen()
}else{
this.videoContext.requestFullScreen()
}
// 改变
this.fullScreen = !this.fullScreen
},
// 点击全屏
fullScreenHandler() {
if(this.fullScreen){
this.videoContext.exitFullScreen()
}else{
this.videoContext.requestFullScreen()
}
// 改变
this.fullScreen = !this.fullScreen
},预期结果：
// 点击全屏
fullScreenHandler() {
if(this.fullScreen){
this.videoContext.exitFullScreen()
}else{
this.videoContext.requestFullScreen()
}
// 改变
this.fullScreen = !this.fullScreen
},
// 点击全屏
fullScreenHandler() {
if(this.fullScreen){
this.videoContext.exitFullScreen()
}else{
this.videoContext.requestFullScreen()
}
// 改变
this.fullScreen = !this.fullScreen
},实际结果：
// 点击全屏
fullScreenHandler() {
if(this.fullScreen){
this.videoContext.exitFullScreen()
}else{
this.videoContext.requestFullScreen()
}
// 改变
this.fullScreen = !this.fullScreen
},
// 点击全屏
fullScreenHandler() {
if(this.fullScreen){
this.videoContext.exitFullScreen()
}else{
this.videoContext.requestFullScreen()
}
// 改变
this.fullScreen = !this.fullScreen
},bug描述：
升级到HBuilderX 2.9.8 后，nvue页面video使用 exitFullScreen 无法正常退出全屏，只是视频区域缩小了一半，但还是全屏状态，未变为竖屏。但是在 2.9.3.20201014是可以正常横竖屏切换的。并且HBuilderX 2.9.8在nvue上面写的样式在全屏状态下也会错乱，2.9.3.20201014版本是正常的
梦学谷 (作者)
先点击全屏/取消全屏 全屏，再点击全屏/取消全屏 取消全屏时，会出现如下图效果(手机竖着看图，白色空白处是在屏幕下方）
<template>
<view class="video-box">
<video
id="video"
ref="video"
class="video"
:controls="false"
poster="https://s.yun-live.com/images/20200715/902844b0f1215ff236ad6b1bd1683555.jpg"
:src="src"
>
<!-- 全屏和取消全屏按钮 -->
<cover-view class="controls-bottom" >
<text class="video-btn" @click.stop="fullScreenHandler" >全屏/取消全屏</text>
</cover-view>
</video>
</view>
</template>
<script>
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
},
}
}
</script>
<style>
.video {
width: 750rpx;
}
/* 底部控制 */
.controls-bottom {
position:absolute;
bottom:0;
right: 0;
width: 750rpx;
}
</style>
你好升级一下HX到最新版本试一下吧，我这边用你提供的代码在基座中测试没有问题
-
梦学谷 (作者)
你好，我升级了3.0.4、3.0.5、3.0.7版本测试，还是一样的全屏播放后，再退出全屏播放无法正常返回坚屏效果。只有2.9.4以前的才可以。核心代码就是下面的，是自定了一个全屏按钮进行触发：
<video ref="video" />
let videoContext = null
export default {
data() {
return {
fullScreen: false,
}
},
mounted() {
// 在 subNvue中要使用这种方式获取video实例
videoContext = this.$refs.video
},
methods: {
fullScreenHandler() {
if(this.fullScreen){
//退出全屏
videoContext.exitFullScreen()
}else{
// 进入全屏
videoContext.requestFullScreen()
}
// 改变状态
this.fullScreen = !this.fullScreen
},
}
}2021-01-11 12:10
-
-
-
-
-
-
-
梦学谷 (作者)
已经提供了，请查收
2021-01-09 10:44