uniapp のビデオが全画面表示でない場合はどうすればよいですか?

はじめに

UniApp は、Vue.js に基づいて開発されたクロスプラットフォーム アプリケーション開発フレームワークで、iOS、Android、H5 などの複数のプラットフォーム用のアプリケーションへのコンパイルをサポートします。ビデオコンポーネントはビデオを埋め込み、アプリやH5などのプラットフォームでビデオを再生できるコンポーネントです。ただし、多くの開発者は、ビデオ コンポーネントを使用するときに問題に遭遇します。H5 プラットフォームではビデオを全画面で再生できないということです。この記事では、この問題を解決する方法について説明します。

問題の症状

UniApp のビデオ コンポーネントを使用すると、アプリ プラットフォームでビデオを再生するときに、ビデオ コンポーネントをクリックして全画面再生できることがわかります。 H5 プラットフォームでは、ビデオ コンポーネントの再生ボタンをクリックすると、ビデオの上に再生ボタンと進行状況バーのあるコントロール バーのみが表示され、全画面ボタンはありません。ビデオを全画面で再生できません。

問題分析

UniApp のビデオ コンポーネントでは、実際にカプセル化にネイティブ ビデオ タグを使用していることがわかります。 H5 プラットフォームでは、ビデオ タグは「webkit-playsinline」という属性を提供します。この属性のデフォルト値は「true」です。これは、ビデオが現在のページでのみ再生され、新しいページにジャンプしないことを意味します。したがって、H5 プラットフォームではビデオを全画面で再生できません。

解決策

これを実現するには、ビデオ コンポーネント内のビデオ タグを変更し、「webkit-playsinline」属性を「false」に設定して、ビデオが新しいページにジャンプできるようにします。全画面で再生します。

具体的な手順は次のとおりです。

1. プロジェクトの任意の .vue ファイルでグローバル ミックスイン (ミックスイン) を定義し、作成したビデオ コンポーネントのライフ サイクルをミックスイン内で書き換えます。 、ビデオコンポーネント内のビデオタグの属性を変更します。

// 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. テンプレート内のビデオ コンポーネントを使用し、「:webkit-playsinline」属性をビデオ タグに設定し、ビデオ コンポーネントの「show-fullscreen-btn」属性をバインドします。 H5 プラットフォームで使用できる全画面表示ボタン。

<テンプレート>
<表示>

<uni-video :src="videoUrl" :controls="true" :webkit-playsinline="false"
  show-fullscreen-btn @play="play"></uni-video>

<スクリプト>
デフォルトのエクスポート {
data() {

return {
  videoUrl: 'http://www.example.com/example.mp4'
}

},
メソッド: {

play() {
  // 点击播放按钮后，等待video标签创建之后再修改属性
  this.$nextTick(() => {
    const videoEl = this.$el.querySelector('video')
    videoEl.setAttribute('webkit-playsinline', 'false')
  })
}

}
}

概要

UniApp のビデオ コンポーネントをビデオ再生に使用する場合、H5 プラットフォームで全画面再生を実行できないという問題が発生します。ビデオ コンポーネント内のビデオ タグのプロパティを変更し、「webkit-playsinline」を「false」に設定すると、H5 プラットフォームでビデオを全画面で再生できます。

以上がuniapp のビデオが全画面表示でない場合はどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。