广告：宝塔Linux面板高效运维的服务器管理软件 点击【 https://www.bt.cn/p/uNLv1L 】立即购买

前言

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

<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没有全屏怎么办的详细内容，更多请关注9543建站博客其它相关文章！

广告：SSL证书一年128.66元起，点击购买~~~