前言
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”，让视频跳转到新页面进行播放，即可实现全屏播放。
具体操作步骤如下：
// 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)
})
<uni-video :src="videoUrl" :controls="true" :webkit-playsinline="false" show-fullscreen-btn @play="play"></uni-video>
<script><br>export default {<br> data() {</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">return { videoUrl: 'http://www.example.com/example.mp4' }</pre><div class="contentsignin">登录后复制</div></div> <p>},<br> methods: {</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">play() { // 点击播放按钮后，等待video标签创建之后再修改属性 this.$nextTick(() => { const videoEl = this.$el.querySelector('video') videoEl.setAttribute('webkit-playsinline', 'false') }) }</pre><div class="contentsignin">登录后复制</div></div> <p>}<br>}<br></script>
总结
在使用 UniApp 的 video 组件进行视频播放时，会遇到 H5 平台上无法全屏播放的问题。通过修改 video 组件内部 video 标签的属性，“webkit-playsinline”设置为“false”，可以实现在 H5 平台上全屏播放视频。
以上是uniapp的video没有全屏怎么办的详细内容。更多信息请关注PHP中文网其他相关文章！
