微信小程序video自定义control

最新推荐文章于 2023-02-21 14:46:07 发布

hangGe0111

最新推荐文章于 2023-02-21 14:46:07 发布

阅读量3.5k

点赞数 2

分类专栏：微信小程序文章标签：小程序 video自定义自定义control

本文链接：https://blog.csdn.net/hangGe0111/article/details/109617142

版权

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

摘要由CSDN通过智能技术生成

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="../../image/play.png" class="pauseBtn" wx:if="{
  {videoBtn}}" catchtap="pauseVideo"></image>
					<image src