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( ) {

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 平台上顯示全螢幕按鈕。

<script><br></template><br></p><script> <p>export default {<br>  data() {</p> <pre class="brush:php;toolbar:false">return {   videoUrl: 'http://www.example.com/example.mp4' }</pre> <p>},<br>  methods: {<br></p> <pre class="brush:php;toolbar:false">play() {   // 点击播放按钮后，等待video标签创建之后再修改属性   this.$nextTick(() =&gt; {     const videoEl = this.$el.querySelector('video')     videoEl.setAttribute('webkit-playsinline', 'false')   }) }</pre>}<p>}</p>#</script>

總結######在使用UniApp 的video 元件進行影片播放時，會遇到H5 平台上無法全螢幕播放的問題。透過修改 video 元件內部 video 標籤的屬性，“webkit-playsinline”設定為“false”，可以實現在 H5 平台上全螢幕播放影片。 ###

以上是uniapp的video沒有全螢幕怎麼辦的詳細內容。更多資訊請關注PHP中文網其他相關文章！