1. uniapp的video没有全屏怎么办
在使用uniapp开发小程序或H5应用时,经常会遇到video组件没有全屏问题。正常情况下,我们可以通过控制video的宽度和高度,来实现播放器的全屏显示。然而,uniapp框架对于video组件的宽高有一定的限制,因此需要一些特殊的处理方法。下面将详细介绍如何实现uniapp的video全屏,帮助开发者更好地优化应用体验。
1.1 问题分析
在uniapp开发中,我们通常使用官方提供的video组件实现视频播放。video组件可以自适应父元素的大小,因此我们只需要给video父元素设置宽高即可控制video的大小。
例如:
<view style="width: 100%; height: 200rpx;">
<video src="xxx"></video>
</view>
这段代码中,给view设置了宽度为100%,高度为200rpx。因此,video会自适应它的父元素大小,显示为宽度为100%,高度为200rpx的大小。
但是,在实际开发中,我们很容易遇到video全屏的问题。即当用户点击video全屏按钮时,video无法全屏,显示的画面依然是原来的大小。这是因为uniapp框架下,video组件的宽高有一定的限制,在父元素的宽高不满足条件时,video无法全屏。
1.2 解决方案
为了解决这个问题,我们需要通过一些特殊的处理方法来实现video全屏的效果。下面将介绍两种方法:
1.2.1 使用插件
uniapp官方提供了一个插件uni-simple-router,它可以帮助我们实现页面之间的跳转,并支持页面的动画效果。一个页面跳转到另一个页面时,可以通过uni-simple-router提供的API,来实现对目标页面的控制。比如,我们可以在目标页面中使用API设置页面的样式。
因此,我们可以通过uni-simple-router插件,来实现video全屏的效果。具体步骤如下:
下载uni-simple-router插件
在App.vue中安装uni-simple-router插件
在目标页面中,使用uni-simple-router的API设置页面的样式
详细代码如下:
Step 1:下载uni-simple-router插件
npm install uni-simple-router
Step 2:在App.vue中安装uni-simple-router插件
<script>
import router from 'uni-simple-router';
Vue.use(router);
const Router = new router({
h5: {
paramsToQuery: true,
},
routes: ROUTES,
});
export default {
router: Router,
};
</script>
Step 3:在目标页面中,使用uni-simple-router的API设置页面的样式
<template>
<view :style="{ width: screenWidth + 'px', height: screenHeight + 'px' }">
<video :style="{ width: screenWidth + 'px', height: screenHeight + 'px' }" src="xxx"></video>
</view>
</template>
<script>
import { mapState } from 'vuex';
export default {
data() {
return {
screenHeight: 0,
screenWidth: 0,
};
},
computed: mapState({
isFullscreen: state => state.common.isFullscreen,
}),
onShow() {
uni.getSystemInfo({
success: (res) => {
this.screenHeight = res.windowHeight;
this.screenWidth = res.windowWidth;
},
});
},
mounted() {
const video = this.$refs.video.$el;
const player = video.getElementsByTagName('video')[0];
player.setAttribute('x5-video-player-type', 'h5');
player.setAttribute('x5-video-player-fullscreen', 'true');
player.setAttribute('webkit-playsinline', '');
player.setAttribute('playsinline', '');
},
watch: {
isFullscreen() {
const video = this.$refs.video.$el;
const player = video.getElementsByTagName('video')[0];
if (this.isFullscreen) {
player.webkitRequestFullScreen();
} else {
document.webkitCancelFullScreen();
}
},
},
};
</script>
在这段代码中,我们首先通过uni-simple-router的API获取了屏幕的宽高,并将它们赋值给了screenWidth、screenHeight变量。然后,在mounted函数中,我们通过refs属性获取到video组件的实例,然后获取video组件的DOM对象。接下来,我们使用setAttribute方法,为video组件添加属性,用于控制chrome浏览器和微信小程序中的全屏播放。最后,我们使用watch监听全屏状态的变化,如果全屏,就调用video的webkitRequestFullScreen方法实现全屏;否则,就调用document的webkitCancelFullScreen方法取消全屏。
1.2.2 使用uniapp API
另一种方法是使用uniapp提供的API,来实现video全屏的效果。具体步骤如下:
获取屏幕的宽高
在video组件中,设置宽高为屏幕的宽高
通过API设置video全屏
详细代码如下:
<template>
<view>
<video ref="video" src="xxx" :style="{ width: screenWidth + 'px', height: screenHeight + 'px' }"></video>
</view>
</template>
<script>
export default {
data() {
return {
screenHeight: 0,
screenWidth: 0,
};
},
onShow() {
uni.getSystemInfo({
success: (res) => {
this.screenHeight = res.windowHeight;
this.screenWidth = res.windowWidth;
},
});
},
mounted() {
const video = this.$refs.video.$el;
const player = video.getElementsByTagName('video')[0];
player.setAttribute('x5-video-player-type', 'h5');
player.setAttribute('x5-video-player-fullscreen', 'true');
player.setAttribute('webkit-playsinline', '');
player.setAttribute('playsinline', '');
},
methods: {
requestFullscreen() {
const video = this.$refs.video.$el;
const player = video.getElementsByTagName('video')[0];
player.webkitEnterFullscreen();
},
},
};
</script>
在这段代码中,我们首先通过uni.getSystemInfo方法获取到了屏幕的宽高,并将它们赋值给了screenWidth、screenHeight变量。然后,在video组件中,我们使用v-bind将它的宽高设置为屏幕的宽高。最后,我们通过methods中的requestFullscreen方法,使用video的webkitEnterFullscreen方法实现全屏。
1.3 总结
以上两种方法都可以实现uniapp的video全屏显示效果。具体方法根据项目的实际情况进行选择。通过使用插件,我们可以实现页面的跳转和样式控制,非常灵活,但是也比较麻烦。使用uniapp API则比较简单,适合完成一些简单的操作。无论使用哪种方法,我们都需要注意video组件宽高的限制,并且在全屏操作时,需要设置相应的属性和API。这样,才能实现uniapp的video全屏效果。