What should I do if the video in uniapp is not full screen?

Preface

UniApp is a cross-platform application development framework developed based on Vue.js, which supports compilation into applications for multiple platforms such as iOS, Android, and H5. The video component is a component that embeds video and can play videos on platforms such as apps and H5. However, many developers will encounter a problem when using the video component: the video cannot be played in full screen on the H5 platform. This article explains how to resolve this issue.

Problem Symptoms

When using the video component of UniApp, we will find that when playing a video on the app platform, you can click the video component for full-screen playback. On the H5 platform, when we click the play button of the video component, only a control bar with a play button and a progress bar will appear above the video, but there is no full screen button. Unable to play video in full screen.

Problem Analysis

In the video component of UniApp, we can find that it actually uses the native video tag for encapsulation. On the H5 platform, the video tag provides an attribute called "webkit-playsinline". The default value of this attribute is "true", which means that the video will only be played in the current page and will not jump to a new page. Therefore, we cannot play the video in full screen on H5 platform.

Solution

We can achieve this by modifying the video tag inside the video component and setting the "webkit-playsinline" attribute to "false" to allow the video to jump to a new page for playback. Play in full screen.

The specific steps are as follows:

1. Define a global mixin (mixin) in any .vue file of the project, rewrite the created life cycle of the video component in the mixin, and modify Attributes of the video tag inside the video component.

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

2. Use the video component in the template, set the ":webkit-playsinline" attribute to the video tag, and bind the "show-fullscreen-btn" attribute of the video component, which can be used on the H5 platform Show full screen button.

<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">Copy after login</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(() =&gt; {     const videoEl = this.$el.querySelector('video')     videoEl.setAttribute('webkit-playsinline', 'false')   }) }</pre><div class="contentsignin">Copy after login</div></div> <p>}<br>}<br></script>

Summary

When using the video component of UniApp for video playback, you will encounter the problem that full-screen playback cannot be performed on the H5 platform. By modifying the properties of the video tag inside the video component and setting "webkit-playsinline" to "false", you can play the video in full screen on the H5 platform.

The above is the detailed content of What should I do if the video in uniapp is not full screen?. For more information, please follow other related articles on the PHP Chinese website!