微信小程序video标签默认播放控件重写

前言

微信小程序开发中，会经常遇到video默认播放控件重写的问题。本文将以uniapp框架演示如何进行重写video默认控件！ ps：请根据自己实际需求书写代码，本文仅演示进度条部分以起到构思学习作用，文末将放出完整代码

准备工作

首先定义一个video，并根据官网文档设置视频自动播放、不显示所以默认控件以及创建出video上下文的 videoContext对象

代码语言：javascript复制

		 <view class="page">
			<video 
			id="video" 
			:autoplay="true" 
			:controls="false"
			src="https://cn-gddg-ct-01-12.bilivideo.com/upgcxcode/27/52/203125227/203125227-1-16.mp4?e=ig8euxZM2rNcNbRVhwdVhwdlhWdVhwdVhoNvNC8BqJIzNbfq9rVEuxTEnE8L5F6VnEsSTx0vkX8fqJeYTj_lta53NCM=&uipk=5&nbs=1&deadline=1673419811&gen=playurlv2&os=bcache&oi=730548909&trid=00003c00dee95a3045b1a744e28849c8ca3ch&mid=0&platform=html5&upsig=c780dea18a2a0e07ce8baa3636f92f27&uparams=e,uipk,nbs,deadline,gen,os,oi,trid,mid,platform&cdnid=61312&bvc=vod&nettype=0&bw=58193&logo=80000000">
				
			</video>
		 </view>

代码语言：javascript复制

video{
	width:100%;
	}

页面打开后执行如下js创建出video上下文的Context对象！

代码语言：javascript复制

mounted(){
			this.video = uni.createVideoContext('video',this)
		},

定义进度条

根据uniapp-slider官方文档为slider绑定min、max、value、以及@change事件和@changing事件

代码语言：javascript复制

<slider :max="slider.max" :min="slider.min" :value="slider.value" @change="videochange" @changing="videochangeing" block-size="12"/>

编写slider对应事件

代码语言：javascript复制

		data() {
			return {
				slider:{
					min:0,
					max:0,
					value:0,
				},
				center:{
					time:"00:00/00:00",
					show:"none"
				}
			}
		},
methods: {
			videochange(e){
				this.video.seek(e.detail.value)
			},
			videochangeing(e){
				this.video.stop()
				this.video.seek(e.detail.value)
				this.video.play()
			},
			timeupdate(e){
				// 获取视频的长度以及播放进度（单位：s）
				this.slider.max = e.detail.duration;
				this.slider.value = e.detail.currentTime;
				this.center.time = this.time(Math.round(this.slider.value)) "/"  this.time(Math.round(this.slider.max));
			},
			// 字符串格式化为时间格式
			// TODO:未进行补零
			time(num){
				return parseInt(num / 60) ":" num % 60
			},
		}

完整代码

本文重点在于css的绝对定位（fixed）、垂直布局写法。

代码语言：javascript复制

<template>
		 <view class="page">
			<video 
			id="video" 
			:autoplay="true" 
			:controls="false"
			@timeupdate="timeupdate"
			src="https://cn-gddg-ct-01-12.bilivideo.com/upgcxcode/27/52/203125227/203125227-1-16.mp4?e=ig8euxZM2rNcNbRVhwdVhwdlhWdVhwdVhoNvNC8BqJIzNbfq9rVEuxTEnE8L5F6VnEsSTx0vkX8fqJeYTj_lta53NCM=&uipk=5&nbs=1&deadline=1673419811&gen=playurlv2&os=bcache&oi=730548909&trid=00003c00dee95a3045b1a744e28849c8ca3ch&mid=0&platform=html5&upsig=c780dea18a2a0e07ce8baa3636f92f27&uparams=e,uipk,nbs,deadline,gen,os,oi,trid,mid,platform&cdnid=61312&bvc=vod&nettype=0&bw=58193&logo=80000000">
				
				<!-- 视频中间 -->
				<view class="center">
					<text>{{center.time}}</text>
				</view>
				<!-- 视频下方 -->
				<view class="bottom">
					<slider :max="slider.max" :min="slider.min" :value="slider.value" @change="videochange" @changing="videochangeing" block-size="12"/>
				</view>
				
			</video>
		 </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				slider:{
					min:0,
					max:0,
					value:0,
				},
				center:{
					time:"00:00/00:00",
					show:"none"
				}
			}
		},
		onLoad() {

		},
		mounted() {
			this.video = uni.createVideoContext('video',this)
		},
		methods: {
			videochange(e){
				this.video.seek(e.detail.value)
			},
			videochangeing(e){
				this.video.stop()
				this.video.seek(e.detail.value)
				this.video.play()
			},
			timeupdate(e){
				// 获取视频的长度以及播放进度（单位：s）
				this.slider.max = e.detail.duration;
				this.slider.value = e.detail.currentTime;
				this.center.time = this.time(Math.round(this.slider.value)) "/"  this.time(Math.round(this.slider.max));
			},
			// 字符串格式化为时间格式
			// TODO:未进行补零
			time(num){
				return parseInt(num / 60) ":" num % 60
			},
		}
	}
</script>

<style>
	video{
		width: 100%;
	}
	.bottom{
		width: 100%;
		position: fixed;
		bottom: 0;
	}
	
	.center{
		text-align: center;
		display: flex;
		height: 50vh;
		flex-direction: column;
		 justify-content: center; 
	}
	.center text{
		color: white;
		
	}
	.display-block{
		display: block;
	}
	.display-none{
		display: none;
	}
</style>

编程算法 jqueryui

0 人点赞