JS自定义多媒体Video控制条（控制视频播放、进度、全屏案例）

最新推荐文章于 2025-07-03 09:45:52 发布

原创

最新推荐文章于 2025-07-03 09:45:52 发布 · 3.2w 阅读

79 ·

CC 4.0 BY-SA版权

文章标签：

#多媒体 #自定义视频控制条 #Video对象

这篇博客详细介绍了如何使用JavaScript自定义多媒体Video的控制条，包括播放暂停、显示时间、进度条操作以及全屏功能的实现。通过HTML、CSS和JS代码展示了具体实现过程，并提出了全屏功能的解决方案，同时指出后续可以添加的声音、清晰度和快进等扩展功能。

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

案例参考

先来看一下一些视屏控件
腾讯视屏控件

需求

点击按钮实现视频的播放和暂停
按钮切换全屏和退出全屏功能
进度条和时间

前期准备

HTML DOM Video 对象文档
 图标字体库下载和文档
案例目录
所有目录

HTML代码

我们自定义实现控制条，所以video不要使用controls属性
从其他网站视频播放，一般都是要自己实现控制条来达到我们想要的效果，使用video提供的控制条相关属性就很难修改，也可能不搭配网站，不美观
html代码

<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>自定义视频控制条</title>
	<link rel="stylesheet" href="css/index.css">
	<link rel="stylesheet" href="css/font-awesome.min.css">
</head>
<body>
	<div class="wrap">
		<h3>视频控制案例</h3>
		<div class="content">
			<div class="player">
				<video src="source/trailer.mp4">
				您的浏览器不支持 video 标签。
				</video>
				<div class="control">
					<div class="fa fa-play play_pause"></div>
					<div>
						<span class="progress"></span>
					</div>
					<div class="timer">
						<span class="progress_timer">00:00:00