uniapp的video没有全屏怎么办

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全屏效果。

免责声明:本文来自互联网,本站所有信息(包括但不限于文字、视频、音频、数据及图表),不保证该信息的准确性、真实性、完整性、有效性、及时性、原创性等,版权归属于原作者,如无意侵犯媒体或个人知识产权,请来电或致函告之,本站将在第一时间处理。猿码集站发布此文目的在于促进信息交流,此文观点与本站立场无关,不承担任何责任。