Apakah yang perlu saya lakukan jika video dalam uniapp bukan skrin penuh?

Kata Pengantar

UniApp ialah rangka kerja pembangunan aplikasi merentas platform yang dibangunkan berdasarkan Vue.js, yang menyokong kompilasi ke dalam aplikasi untuk berbilang platform seperti iOS, Android dan H5. Komponen video ialah komponen yang membenamkan video dan boleh memainkan video pada platform seperti apl dan H5. Walau bagaimanapun, ramai pembangun akan menghadapi masalah apabila menggunakan komponen video: video tidak boleh dimainkan dalam skrin penuh pada platform H5. Artikel ini menerangkan cara menyelesaikan masalah ini.

Simptom Masalah

Apabila menggunakan komponen video UniApp, kami akan mendapati bahawa apabila memainkan video pada platform aplikasi, anda boleh mengklik komponen video untuk main semula skrin penuh. Pada platform H5, apabila kita mengklik butang main komponen video, hanya bar kawalan dengan butang main dan bar kemajuan akan muncul di atas video, tetapi tiada butang skrin penuh. Tidak dapat memainkan video dalam skrin penuh.

Analisis Masalah

Dalam komponen video UniApp, kita dapati ia sebenarnya menggunakan tag video asli untuk pengkapsulan secara dalaman. Pada platform H5, teg video menyediakan atribut yang dipanggil "webkit-playsinline". Nilai lalai atribut ini ialah "true", yang bermaksud bahawa video hanya akan dimainkan dalam halaman semasa dan tidak akan melompat ke halaman baharu. . Oleh itu, kami tidak boleh memainkan video dalam skrin penuh pada platform H5.

Penyelesaian

Kita boleh mencapainya dengan mengubah suai teg video di dalam komponen video dan menetapkan atribut "webkit-playsinline" kepada "false" untuk membolehkan video melompat ke halaman baharu untuk Main semula dalam skrin penuh.

Langkah khusus adalah seperti berikut:

1. Tentukan mixin global (mixin) dalam mana-mana fail .vue projek, tulis semula kitaran hayat yang dicipta bagi komponen video dalam mixin , dan ubah suai Atribut teg video di dalam komponen video.

// main.js
import Vue daripada 'vue'
import Apl daripada './App'

Vue.mixin({
dicipta( ) {

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

}
})

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

2. Gunakan komponen video dalam templat, tetapkan atribut ":webkit-playsinline" pada teg video dan ikat atribut "show-fullscreen-btn" video Anda boleh Paparkan butang skrin penuh pada platform H5.

< skrip>
eksport lalai {
data() {

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

},
kaedah: {

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

}
}
< ;/script>

Ringkasan

Apabila menggunakan komponen video UniApp untuk main balik video, anda akan menghadapi masalah tidak dapat bermain dalam skrin penuh pada platform H5. Dengan mengubah suai sifat teg video di dalam komponen video dan menetapkan "webkit-playsinline" kepada "false", anda boleh memainkan video dalam skrin penuh pada platform H5.

Atas ialah kandungan terperinci Apakah yang perlu saya lakukan jika video dalam uniapp bukan skrin penuh?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!