uniapp的video没有全屏怎么办

前言

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”，让视频跳转到新页面进行播放，即可实现全屏播放。

具体操作步骤如下：

1. 在项目的任意 .vue 文件中定义一个全局混入（mixin），在该混入中重写 video 组件的 created 生命周期，修改 video 组件内部 video 标签的属性。

// main.js
import Vue from 'vue'
import App from './App'

Vue.mixin({
 created() {

人民网AIGC-X

国内科研机构联合推出的AI生成内容检测工具

下载

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)
})

2. 在模板中使用 video 组件，并给 video 标签设置“:webkit-playsinline”属性，绑定 video 组件的“show-fullscreen-btn”属性，可以在 H5 平台上显示全屏按钮。

<uni-video :src="videoUrl" :controls="true" :webkit-playsinline="false"
  show-fullscreen-btn @play="play"></uni-video>

<script><br/>export default {<br/> data() {</script>

return {
  videoUrl: 'http://www.example.com/example.mp4'
}

},
 methods: {

play() {
  // 点击播放按钮后，等待video标签创建之后再修改属性
  this.$nextTick(() => {
    const videoEl = this.$el.querySelector('video')
    videoEl.setAttribute('webkit-playsinline', 'false')
  })
}

}
}

总结

在使用 UniApp 的 video 组件进行视频播放时，会遇到 H5 平台上无法全屏播放的问题。通过修改 video 组件内部 video 标签的属性，“webkit-playsinline”设置为“false”，可以实现在 H5 平台上全屏播放视频。