uni-app中隐藏进度条后，进入全屏和退出全屏的方法

Stitch_xiao

已于 2022-07-15 10:25:59 修改

阅读量4.2k

点赞数 1

分类专栏： uni-app 文章标签： javascript vue.js 前端

于 2022-01-14 11:05:01 首次发布

本文链接：https://blog.youkuaiyun.com/Stitch_xiao/article/details/122489593

版权

uni-app 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了一种自定义video组件的方法，通过隐藏原生进度条并使用JS控制全屏和退出全屏功能。利用cover-view覆盖video组件，实现自定义进度条及全屏按钮。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目中需要这样一个功能，需要隐藏video原生的进度条，并且还能进入全屏，进入全屏后还能退出全屏。由于原生的video组件在隐藏进度条后就没有进入全屏和退出全屏按钮，此时我们必须要用js去控制进入和退出全屏。

html:

<video id="myVideo"  class="myVideo" :custom-cache="false"
					:src="xxx" :autoplay="false" :controls="false" :page-gesture='true'
					:show-progress="true" :show-play-btn="false" :show-center-play-btn="false"
					:enable-progress-gesture="false" @loadedmetadata="loadedmetadata" @timeupdate="timeupdate"
					@ended="ended" @error="videoErrorCallback" @fullscreenchange="playerFullScreen"
					@click="hideAndShow">
					<cover-view class="cover-container" v-if="onShow&&myVideo">
						<template>
							<cover-view class="currentTim" v-if="onShow&&myVideo">
								{{currentProgress?currentProgress:'00:00'}}
							</cover-view>
							<cover-view class="progress-container">
								<cover-view class="progress" v-if="onShow&&myVideo" :style="{width:progressWidth}">
									<cover-view class="circle" v-if="onShow&&myVideo"></cover-view>
								</cover-view>
								<cover-view class="total-progress" v-if="onShow&&myVideo"></cover-view>
							</cover-view>
							<cover-view class="totalTim" v-if="onShow&&myVideo">{{totalProgress?totalProgress:'00:00'}}
							</cover-view>
						</template>
						<cover-view class="screen" v-if="openScreen&&myVideo" @click="quitFullScreen">退出全屏</cover-view>
						<cover-view class="screen" v-if="!openScreen&&myVideo" @click="getIntoScreen">全屏</cover-view>
					</cover-view>
				</video>

js:

methods:{
        getIntoScreen() {
				this.myVideo = uni.createVideoContext('myVideo')
				// 进入全屏状态
				this.myVideo.requestFullScreen();
				this.openScreen = true;
			},
        quitFullScreen() {
				this.myVideo = uni.createVideoContext('myVideo')
				// 退出全屏状态
				this.myVideo.exitFullScreen();
				this.openScreen = false;
			}
}

注意：cover-view可以覆盖video组件，可以在视频上写一些样式