移动端自定义video播放控件controls（带播放暂停，进度条拖拽）

最新推荐文章于 2025-06-13 17:06:26 发布

萌面怪瘦呀

最新推荐文章于 2025-06-13 17:06:26 发布

阅读量8.4k

点赞数 3

CC 4.0 BY-SA版权

分类专栏：前端文章标签： video video控件自定义video controls video播放控件移动端进度条拖拽

本文链接：https://blog.youkuaiyun.com/weixin_39924326/article/details/94619971

本文介绍了如何在移动端自定义video播放控件，包括播放暂停功能和进度条拖拽操作。由于video标签原生不支持本地视频进度拖动，作者提供了解决方案，并给出了html结构和JS实现部分的详细内容。注意，示例中使用的视频链接可能无法保证始终可用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图如下

在这里插入图片描述

html结构部分

<div class="player">
	<video id="video" muted poster="images/video_poster.png">
		<source src="https://video.pearvideo.com/mp4/adshort/20190702/cont-1572578-14079299_adpkg-ad_sd.mp4">
	</video>
	<!--播放控件-->
	<div class="controls">
		<div class="playBtn"></div>
		<div class="progress">
			<div class="duration"></div>
			<i></i>
		</div>
		<div class="time">
			<span class="current">00:00</span>/