uniapp H5 原生video重写控制条倍速

由于video-player是依赖video.js的，体积太大，为了优化项目，特改用原生video，因为不包含倍速播放，重写了控制条，包含播放暂停、静音、进度条、倍速菜单、全屏、Loading、断点播放。

生如夏花S

1179人浏览 · 2023-02-23 14:15:10

生如夏花S · 2023-02-23 14:15:10 发布

由于video-player是依赖video.js的，体积太大，为了优化项目，特改用原生video，因为不包含倍速播放，重写了控制条，包含播放暂停、静音、进度条、倍速菜单、全屏、Loading、断点播放。

效果图

在这里插入图片描述

控制播放可以点击左下按钮和视频区域
进度条使用的内置组件slider，在videoLoaded事件根据播放时间滑动，可手动拖动
progress传入整数控制断点播放，例：10，就是10%，sliderValue也是同样的，progress* durationTime计算初始播放时间
在videoLoaded事件获取总时长后，再显示控制条
控制条会在5秒后过渡隐藏，点击视频区域重新显示

控制条部分

<!-- 控制条 -->
		<view :class="['controls-bar',controls?'show':'hide']">
			<!-- 播放 -->
			<view class="play-box" @click="videoPlayClick">
				<image
					src="https://spider-bucket.oss-cn-beijing.aliyuncs.com/ald-applets/images/business_opportunities/pause.png"
					mode="" class="play-icon" v-if="isVideoPlay"></image>
				<image
					src="https://spider-bucket.oss-cn-beijing.aliyuncs.com/ald-applets/images/business_opportunities/play.png"
					mode="" class="play-icon" v-else></image>
			</view>
			<!-- 声音 -->
			<view class="mute-box" @click="videoMuteClick">
				<image
					src="https://spider-bucket.oss-cn-beijing.aliyuncs.com/ald-applets/images/business_opportunities/sound.png"
					mode="" class="mute-icon" v-if="!isMute"></image>
				<image
					src="https://spider-bucket.oss-cn-beijing.aliyuncs.com/ald-applets/images/business_opportunities/mute.png"
					mode="" class="mute-icon" v-else></image>
			</view>
			<!-- 进度 -->
			<view class="progress">
				<view class="currtime">{{currentTimeStr}}</view>
				<view class='slider-container'>
					<slider @change="sliderChange" @changing="sliderChanging" :step="step" :value="sliderValue"
						backgroundColor="#9f9587" activeColor="#d6d2cc" block-color="#FFFFFF" block-size="12" />
				</view>
				<view class="druationTime">{{druationTimeStr}}</view>
			</view>
			<!-- 倍速 -->
			<view class="play-rate" @click="videoPlayRate">
				{{playbackRate}}x
			</view>
			<!-- 全屏 -->
			<view class='play-full' @click="videoFull">
				<image
					src="https://spider-bucket.oss-cn-beijing.aliyuncs.com/ald-applets/images/business_opportunities/fullscreen.png"
					mode="" class="play-icon" @click="videoFull"></image>
			</view>
			<!-- 倍速菜单 -->
			<ul class="play-rate-menu" :style="{height:`${height}`}" v-if="isShowRate">
				<li v-for="item in playbackRates" :key="item"
					:class="[{'activeRate':playbackRate===item},'play-rate-item']" @click="changePlayRate(item)">
					{{item}}x
				</li>
			</ul>
		</view>

插件已上传DClound插件市场，欢迎下载使用 -> XVideo