1. 程式人生 > 其它 >解決uniapp ios播放本地視訊不顯示controls的問題、uni-app video開始播放如何設定預設全屏

解決uniapp ios播放本地視訊不顯示controls的問題、uni-app video開始播放如何設定預設全屏

一、uniapp ios播放本地視訊不顯示controls的問題

1、問題背景:在 app 上做視訊課程快取下載觀看的功能,把視訊下載,利用本地地址檢視,在安卓是正常的,但是在 ios 時會沒有 video 的 controls (暫停、全屏、進度條)那些

2、問題原因:不清楚,可能是 uniapp 裝置適配的問題,試了好幾個裝置 - 安卓裝置均正常、ios 裝置均不正常

3、解決方案:後來想到既然 ios 不能顯示 controls,我們使用 controls 主要也是為了展示全屏觀看,那麼能不能在播放視訊的時候就預設 video 全屏展示播放呢 - 後來發現預設全屏之後,這個問題就解決了,神奇

二、uni-app video開始播放預設全屏

1、第一種方式:requestFullScreen() 方法

<video id="myVideo" :autoplay="true" :src="curVideoUrl" controls></video>
this.$nextTick(_ => {
  let _myVideo = uni.createVideoContext('myVideo')
  _myVideo && _myVideo.requestFullScreen()
})
// 獲取 video 上下文 videoContext 物件
this.videoContext = uni.createVideoContext('video_play'); // 進入全屏狀態 this.videoContext.requestFullScreen();

2、第二種方式:通過 style 設定寬高均 100%

<video id="video_play"
:src="videosrc"

loop="false"
autoplay="true"

object-fit="fill"
page-gesture="true"
controls="false"
style="height: 100%;width: 100%">

</video>