유니앱의 영상이 전체화면이 되지 않을 경우 어떻게 해야 하나요?

Foreword

UniApp은 Vue.js를 기반으로 개발된 크로스 플랫폼 애플리케이션 개발 프레임워크로, iOS, Android, H5 등 여러 플랫폼용 애플리케이션 컴파일을 지원합니다. 비디오 컴포넌트는 비디오를 삽입하는 컴포넌트로, 앱, H5 등의 플랫폼에서 비디오를 재생할 수 있습니다. 그러나 많은 개발자는 비디오 구성 요소를 사용할 때 문제에 직면하게 됩니다. H5 플랫폼에서는 비디오를 전체 화면으로 재생할 수 없습니다. 이 문서에서는 이 문제를 해결하는 방법을 설명합니다.

문제 증상

UniApp의 비디오 구성 요소를 사용할 때 앱 플랫폼에서 비디오를 재생할 때 비디오 구성 요소를 클릭하면 전체 화면 재생이 가능한 것을 확인할 수 있습니다. H5 플랫폼에서는 동영상 구성 요소의 재생 버튼을 클릭하면 동영상 위에 재생 버튼과 진행률 표시줄이 있는 컨트롤 바만 표시되고 전체 화면 버튼은 없습니다. 전체 화면으로 영상을 재생할 수 없습니다.

문제 분석

UniApp의 비디오 구성 요소에서 실제로 캡슐화를 위해 네이티브 비디오 태그를 사용하는 것을 확인할 수 있습니다. H5 플랫폼에서 비디오 태그는 "webkit-playsinline"이라는 속성을 제공합니다. 이 속성의 기본값은 "true"입니다. 이는 비디오가 현재 페이지에서만 재생되고 새 페이지로 이동하지 않음을 의미합니다. . 따라서 H5 플랫폼에서는 동영상을 전체 화면으로 재생할 수 없습니다.

해결책

비디오 구성 요소 내부의 비디오 태그를 수정하고, "webkit-playsinline" 속성을 "false"로 설정하고, 비디오가 재생을 위해 새 페이지로 이동하도록 하고, 전체 화면 재생을 달성할 수 있습니다.

구체적인 단계는 다음과 같습니다.

1. 프로젝트의 .vue 파일에서 전역 믹스인(mixin)을 정의하고, 믹스인에서 생성된 비디오 구성 요소의 수명 주기를 다시 작성하고, 내부의 비디오 태그 속성을 수정합니다. 비디오 구성 요소.

// main.js
'vue'에서 Vue 가져오기
'./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 플랫폼에서 전체 화면 버튼을 표시할 수 있습니다.

<script><br>기본 내보내기 {<br> 데이터() {</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">로그인 후 복사</div></div> <p>},<br> 메소드: { </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">로그인 후 복사</div></div> <p>}<br>}<br></script>

Summary

동영상 재생을 위해 UniApp의 동영상 구성 요소를 사용할 때 H5 플랫폼에서 전체 화면 재생을 수행할 수 없는 문제가 발생합니다. 비디오 구성 요소 내부의 비디오 태그 속성을 수정하고 "webkit-playsinline"을 "false"로 설정하면 H5 플랫폼에서 비디오를 전체 화면으로 재생할 수 있습니다.

위 내용은 유니앱의 영상이 전체화면이 되지 않을 경우 어떻게 해야 하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!