微信小程序video标签默认播放控件重写
前言
微信小程序开发中，会经常遇到video默认播放控件重写的问题。本文将以uniapp框架演示如何进行重写video默认控件！ ps：请根据自己实际需求书写代码，本文仅演示进度条部分以起到构思学习作用，文末将放出完整代码
准备工作
首先定义一个video，并根据官网文档设置视频自动播放、不显示所以默认控件以及创建出video上下文的 videoContext对象
<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>video{
width:100%;
}页面打开后执行如下js创建出video上下文的Context对象！
mounted(){
this.video = uni.createVideoContext('video',this)
},定义进度条
根据uniapp-slider官方文档为slider绑定min、max、value、以及@change事件和@changing事件
<slider :max="slider.max" :min="slider.min" :value="slider.value" @change="videochange" @changing="videochangeing" block-size="12"/>编写slider对应事件
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）、垂直布局写法。
<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>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2023-01-11，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读