解決uniapp ios播放本地視訊不顯示controls的問題、uni-app video開始播放如何設定預設全屏
阿新 • • 發佈:2021-11-17
一、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>