微信小程序video自定义control

最新推荐文章于 2026-03-28 09:09:28 发布

原创

最新推荐文章于 2026-03-28 09:09:28 发布 · 4.3k 阅读

标签

#小程序 #video自定义 #自定义control

收录于

本文介绍了如何在微信小程序中自定义video组件的控制功能，包括隐藏原生controls，重写播放、暂停、全屏等操作，并提供相关代码示例。在横竖屏切换时要注意进度条布局调整，以及在cover-view中的限制。推荐参考官方API和相关博客文章深入学习。

1.背景：

有些时候需要用到video自定需求，可以参考如下案例

2.思路

2.1 把原生的controls（底部的控制，进度条，暂停播放）隐藏掉，然后自己重写controls：
2.2 把原生的show-fullscreen-btn（全屏，退出全屏）隐藏掉，并重写；
2.3 定义bindplay（播放），bindpause（暂停），bindended（播放完毕），bindtimeupdate（更新播放时间，在拖动进度条时需要用到），一一通过代码实现即可

3.代码：

3.1wxml

<view class="main rowAndColCenter">
	<view class="mainC">
		<video class="video" id="myVideo" src="http://vjs.zencdn.net/v/oceans.mp4" object-fit="cover" show-fullscreen-btn="{
  
  {false}}" enable-play-gesture="{
  
  {true}}" play-btn-position="center" bindtimeupdate="videoUpdate" controls="{
  
  {false}}" bindplay="videoPlay" bindpause="videoPause" bindended="videoEnded">
			<view class='slider-container'>
				<view class="videoBtnBox">
					<image src="https://blog.csdn.net/image/play.png" class="pauseBtn" wx:if="{
  
  {videoBtn}}" catchtap="pauseVideo"></image>
					<image src="https://blog.csdn.net/image/playon.png" c