Que dois-je faire si la vidéo dans uniapp n'est pas en plein écran ?

Avant-propos

UniApp est un framework de développement d'applications multiplateforme développé sur la base de Vue.js, qui prend en charge la compilation en applications pour plusieurs plates-formes telles que iOS, Android et H5. Le composant vidéo est un composant qui intègre la vidéo et peut lire des vidéos sur des plateformes telles que les applications et H5. Cependant, de nombreux développeurs rencontreront un problème lors de l’utilisation du composant vidéo : la vidéo ne peut pas être lue en plein écran sur la plateforme H5. Cet article explique comment résoudre ce problème.

Symptômes du problème

Lors de l'utilisation du composant vidéo d'UniApp, nous constaterons que lors de la lecture d'une vidéo sur la plate-forme de l'application, vous pouvez cliquer sur le composant vidéo pour une lecture en plein écran. Sur la plateforme H5, lorsque l'on clique sur le bouton play du composant vidéo, seule une barre de contrôle avec un bouton play et une barre de progression apparaîtra au dessus de la vidéo, mais il n'y a pas de bouton plein écran. Impossible de lire la vidéo en plein écran.

Analyse des problèmes

Dans le composant vidéo d'UniApp, nous pouvons constater qu'il utilise en fait la balise vidéo native pour l'encapsulation. Sur la plateforme H5, la balise vidéo fournit un attribut appelé "webkit-playsinline". La valeur par défaut de cet attribut est "true", ce qui signifie que la vidéo ne sera lue que dans la page en cours et ne passera pas à une nouvelle page. . Par conséquent, nous ne pouvons pas lire la vidéo en plein écran sur la plateforme H5.

Solution

Nous pouvons modifier la balise vidéo à l'intérieur du composant vidéo, définir l'attribut "webkit-playsinline" sur "false", laisser la vidéo passer à une nouvelle page pour la lecture et obtenir une lecture en plein écran.

Les étapes spécifiques sont les suivantes :

1. Définissez un mixin global (mixin) dans n'importe quel fichier .vue du projet, réécrivez le cycle de vie créé du composant vidéo dans le mixin et modifiez les propriétés de la balise vidéo à l'intérieur le composant vidéo.

// main.js
importer Vue depuis 'vue'
importer l'application depuis './App'

Vue.mixin({
créé() {

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

}
})

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

2. Utilisez le composant vidéo dans le modèle, définissez l'attribut ":webkit-playsinline" sur la balise vidéo et liez le " show-fullscreen-btn", vous pouvez afficher le bouton plein écran sur la plateforme H5.

<script><br>export par défaut {<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">Copier après la connexion</div></div> <p>},<br> méthodes : { </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">Copier après la connexion</div></div> <p>}<br>}<br></script>

Résumé

Lors de l'utilisation du composant vidéo d'UniApp pour la lecture vidéo, vous rencontrerez le problème selon lequel la lecture plein écran ne peut pas être effectuée sur la plate-forme H5. En modifiant les propriétés de la balise vidéo à l'intérieur du composant vidéo et en définissant "webkit-playsinline" sur "false", vous pouvez lire la vidéo en plein écran sur la plateforme H5.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!