前言
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 平台上显示全屏按钮。
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 平台上全屏播放视频。
