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

作者：Gausst松鼠会 | 2024-02-22 13:06:49

踩

videojs的全屏事件

案例参考

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

需求

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

前期准备

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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/130232