Was soll ich tun, wenn das Video in Uniapp nicht im Vollbildmodus angezeigt wird?

Vorwort

UniApp ist ein plattformübergreifendes Anwendungsentwicklungs-Framework, das auf Basis von Vue.js entwickelt wurde und die Kompilierung in Anwendungen für mehrere Plattformen wie iOS, Android und H5 unterstützt. Die Videokomponente ist eine Komponente, die Videos einbettet und Videos auf Plattformen wie Apps und H5 abspielen kann. Allerdings stoßen viele Entwickler bei der Verwendung der Videokomponente auf ein Problem: Das Video kann auf der H5-Plattform nicht im Vollbildmodus abgespielt werden. In diesem Artikel wird erläutert, wie Sie dieses Problem beheben können.

Problemsymptome

Bei Verwendung der Videokomponente von UniApp werden wir feststellen, dass Sie beim Abspielen eines Videos auf der App-Plattform auf die Videokomponente für die Vollbildwiedergabe klicken können. Wenn wir auf der H5-Plattform auf die Wiedergabeschaltfläche der Videokomponente klicken, wird über dem Video nur eine Steuerleiste mit einer Wiedergabeschaltfläche und einem Fortschrittsbalken angezeigt, es gibt jedoch keine Vollbildschaltfläche. Video kann nicht im Vollbildmodus abgespielt werden.

Problemanalyse

In der Videokomponente von UniApp können wir feststellen, dass tatsächlich das native Video-Tag zur Kapselung verwendet wird. Auf der H5-Plattform stellt das Video-Tag ein Attribut namens „webkit-playsinline“ bereit. Der Standardwert dieses Attributs ist „true“, was bedeutet, dass das Video nur auf der aktuellen Seite abgespielt wird und nicht zu einer neuen Seite springt . Daher können wir das Video auf der H5-Plattform nicht im Vollbildmodus abspielen.

Lösung

Wir können das Video-Tag innerhalb der Videokomponente ändern, das Attribut „webkit-playsinline“ auf „false“ setzen, das Video zur Wiedergabe auf eine neue Seite springen lassen und eine Vollbildwiedergabe erreichen.

Die spezifischen Schritte sind wie folgt:

1. Definieren Sie ein globales Mixin (Mixin) in einer beliebigen .vue-Datei des Projekts, schreiben Sie den erstellten Lebenszyklus der Videokomponente im Mixin neu und ändern Sie die Eigenschaften des darin enthaltenen Video-Tags die Videokomponente.

// main.js
Vue aus 'vue' importieren
App aus './App' importieren

Vue.mixin({
erstellt() {

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

}
})

neues Vue({
el: '#app',
render: h => h(App)
})

2. Verwenden Sie die Videokomponente in der Vorlage, legen Sie das Attribut „:webkit-playsinline“ auf das Video-Tag fest und binden Sie das „ Mit dem Attribut „show-fullscreen-btn“ können Sie die Vollbildschaltfläche auf der H5-Plattform anzeigen.

<script><br>export default {<br> data() {</p> <pre class="brush:php;toolbar:false">return {   videoUrl: 'http://www.example.com/example.mp4' }</pre> <p>},<br> Methoden: { </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>}<br>}<br></script>

Zusammenfassung

Bei Verwendung der Videokomponente von UniApp für die Videowiedergabe tritt das Problem auf, dass auf der H5-Plattform keine Vollbildwiedergabe möglich ist. Indem Sie die Eigenschaften des Video-Tags innerhalb der Videokomponente ändern und „webkit-playsinline“ auf „false“ setzen, können Sie das Video im Vollbildmodus auf der H5-Plattform abspielen.

Das obige ist der detaillierte Inhalt vonWas soll ich tun, wenn das Video in Uniapp nicht im Vollbildmodus angezeigt wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!