前言
uniapp 是一款基于 vue.js 开发的跨平台应用开发框架，支持编译成 ios、android、h5 等多种平台的应用。其中的 video 组件是一个嵌入视频的组件，可以在 app 和 h5 等平台上播放视频。但是，很多开发者在使用 video 组件过程中会遇到一个问题：在 h5 平台上无法全屏播放视频。本文将介绍如何解决这个问题。
问题症状
在使用 uniapp 的 video 组件时，我们会发现在 app 平台上播放视频时，可以通过点击 video 组件进行全屏播放。而在 h5 平台上，当我们点击 video 组件的播放按钮时，在视频上方仅会出现带有播放按钮和进度条的控制栏，但是没有全屏按钮。无法全屏播放视频。
问题分析
在 uniapp 的 video 组件中，我们可以发现它内部实际上是使用了原生的 video 标签进行封装。在 h5 平台上， video 标签提供了一个属性叫“webkit-playsinline”，该属性默认值为“true”，代表视频播放时只在当前页面内播放，不会跳转到一个新的页面。因此，我们无法在 h5 平台上全屏播放视频。
解决方案
我们可以通过修改 video 组件内部的 video 标签，设置“webkit-playsinline”属性为“false”，让视频跳转到新页面进行播放，即可实现全屏播放。
具体操作步骤如下：
在项目的任意 .vue 文件中定义一个全局混入（mixin），在该混入中重写 video 组件的 created 生命周期，修改 video 组件内部 video 标签的属性。// main.js
import vue from 'vue'
import app from './app'
vue.mixin({
 created() {
if (this.$options.name === 'uni-video') {  // 如果当前组件为uni-video，则在created生命周期中修改video标签属性  const videocontext = uni.createvideocontext(this.videoid, this)  videocontext.pause()  videocontext.exitfullscreen()  this.$nexttick(() => {    videocontext.requestfullscreen()  })  // 修改 video 标签的webkit-playsinline属性  const videoel = this.$el.queryselector('video')  videoel.setattribute('webkit-playsinline', 'false')}
}
})
new vue({
 el: '#app',
 render: h => h(app)
})
在模板中使用 video 组件，并给 video 标签设置“:webkit-playsinline”属性，绑定 video 组件的“show-fullscreen-btn”属性，可以在 h5 平台上显示全屏按钮。<template>
 <view>
<uni-video :src="videourl" :controls="true" :webkit-playsinline="false" show-fullscreen-btn @play="play"></uni-video>
</view>
</template>
<script>
export default {
 data() {
return {  videourl: 'http://www.example.com/example.mp4'}
},
 methods: {
play() {  // 点击播放按钮后，等待video标签创建之后再修改属性  this.$nexttick(() => {    const videoel = this.$el.queryselector('video')    videoel.setattribute('webkit-playsinline', 'false')  })}
}
}
</script>
总结
在使用 uniapp 的 video 组件进行视频播放时，会遇到 h5 平台上无法全屏播放的问题。通过修改 video 组件内部 video 标签的属性，“webkit-playsinline”设置为“false”，可以实现在 h5 平台上全屏播放视频。
以上就是uniapp的video没有全屏怎么办的详细内容。