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