svg 视频播放器简洁页面效果-html代码-BFW代码库

代码语言：html

所属分类：多媒体

代码描述：svg 视频播放器简洁页面效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet">

<style>
:root {
	--accent: #00C6F2;
/* 	--accent: #d7577e; */
	
	--main: #ffffff;
}
body {
	width: 100%;
	height: 100%;
	background: #ff578e;
}
html {
	display: flex;
	justify-content: center;
	font-family: Comfortaa;
	font-style: normal;
	font-weight: normal;
	line-height: normal;
	font-size: 16px;
	color: var(--main);
}
.player-container {
	padding: 40px;
	max-width: 700px;
	margin: auto;
}
.player {
	width: 100%;
	height: 0;
	padding-bottom: 56.25%;
	box-shadow: 0px 10px 0px -3px rgba(0, 0, 0, 0.2);
	position: relative;
	overflow: hidden;
	background: #000000;
}
.player:fullscreen {
	padding-bottom: 100vh;
}
.player:-webkit-full-screen {
	padding-bottom: 100vh;
}
.player:-moz-full-screen {
	padding-bottom: 100vh;
}
.player:-ms-fullscreen  {
	padding-bottom: 100vh;
}
.player video {
	width: 100%;
	height: auto;
	position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.controls {
	padding: 0;
	position: absolute;
	bottom: -80px;
	width: 100%;
	height: 48px;
	box-sizing: border-box;
	background: linear-gradient(
		180deg,
		rgba(37, 37, 37, 0) 10%,
		rgba(37, 37, 37, 0.6) 80%
	);
	transition: all 0.2s ease-in 5s;
}
.player:hover .controls {
	bottom: 0;
	transition: all 0.2s ease-out;
}
.time {
	position: absolute;
	right: 30px;
	bottom: 100%;
	padding-bottom: 14px;
}
.progress {
	height: 8px;
	width: calc(100% - 40px);
	background: rgba(60, 60, 60, 0.6);
	margin: auto;
	border-radius: 6px;
	position: absolute;
	left: 20px;
	bottom: 100%;
	transition: height 0.1s ease-in-out;
}
.progress:hover {
	height: 10px;
}
.progress-filled {
	background: var(--accent);
	width: 0%;
	height: 100%;
	border-radius: 6px;
	transition: all 0.1s; 
}
.controls-main {
	width: calc(100% - 40px);
	margin: auto;
	height: 100%;
	display: flex;
	justify-content: space-between;
}
.controls-left,
.controls-right {
	flex: 1;
	display: flex;
	align-items: center;
	overflow: hidden;
}
.controls-left {
	margin-left: 10px;
}
.controls-right {
	margin-right: 10px;
	justify-content: flex-end;
}
.volume {
	display: flex;
	align-items: center;
}
.volume-btn {
	margin-right: 10px;
}
.volume-btn #volume-off, .volume-btn #volume-high {
	opacity: 0;
}
.volume-btn.loud #volume-high{
	opacity: 1;
}
.volume-btn.muted #volume-off {
	opacity: 1;
}
.volume-btn.muted #volume-high, .volume-btn.muted #volume-low {
	opacity: 0;
}
.volume-slider {
	height: 8px;
	width: 80px;
	background: rgba(60, 60, 60, 0.6);;
	border-radius: 6px;
	position: relative;
}
.volume-filled {
	background: var(--main);
	width: 100%;
	height: 100%;
	border-radius: 6px;
	transition: width 0.2s ease-in-out;
}
.volume-filled:hover, .play-btn:hover.play-btn:before, .play-btn:hover.play-btn:after{
	background: var(--accent);
}
button {
}
.play-btn {
	width: 30px;
	height: 30px;
	position: relative;
	margin: auto;
	transform: rotate(-90deg) scale(0.8);
	transition: -webkit-clip-path 0.3s ease-in 0.1s, shape-inside 0.3s ease-in 0.1s,
		transform 0.8s cubic-bezier(0.85, -0.25, 0.25, 1.425);
}
.play-btn.paused {
	transform: rotate(0deg);
}
.play-btn:before,
.play-btn:after {
	content: "";
	position: absolute;
	background: white;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	transition: inherit;
}
.play-btn:before {
	-webkit-clip-path: polygon(0 10%, 100% 10%, 100% 40%, 0 40%);
	shape-inside: polygon(0 10%, 100% 10%, 100% 40%, 0 40%);
}
.play-btn:after {
	-webkit-clip-path: polygon(0 60%, 100% 60%, 100% 90%, 0 90%);
	shape-inside: polygon(0 60%, 100% 60%, 100% 90%, 0 90%);
}
.play-btn.paused:before {
	-webkit-clip-path: polygon(10% 0, 90% 51%, 90% 51%, 10% 51%);
	shape-inside: polygon(0 0, 100% 51%, 100% 51%, 0 51%);
}
.play-btn.paused:after {
	-webkit-clip-path: polygon(10% 49.5%, 80% 49.5%, 90% 49.5%, 10% 100%);
	shape-inside: polygon(10% 49.5%, 80% 49.5%, 90% 49.5%, 10% 100%);
}
button:focus {
	outline: none;
}
.speed-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	margin-right: 20px;
	text-align: center;
}
.speed-list li {
	color: var(--main);
	padding: 5px;
	cursor: default;
}
.speed-list li:hover,
.speed-list li.active {
	color: var(--accent);
	font-weight: bold;
}
.fullscreen {
	display: flex;
	justify-content: center;
}
</style>

</head>
<body translate="no">
<div class='player-container'>
<div class='player'>
<video id='video' src='http://repo.bfw.wiki/bfwrepo/video/5d8449e2482ad.mp4' autoplay playsinline></video>
<div class='play-btn-big'></div>
<div class='controls'>
<div class="time"><span class="time-current"></span><span class="time-total"></span></div>
<div class='progress'>
<div class='progress-filled'></div>
</div>
<div class='controls-main'>
<div class='controls-left'>
<div class='volume'>
<div class='volume-btn loud'>
<svg width="26" height="24" viewBox="0 0 26 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.75497 17.6928H2C0.89543 17.6928 0 16.7973 0 15.6928V8.30611C0 7.20152 0.895431 6.30611 2 6.30611H6.75504L13.9555 0.237289C14.6058 -0.310807 15.6 0.151473 15.6 1.00191V22.997C15.6 23.8475 14.6058 24.3098 13.9555 23.7617L6.75497 17.6928Z" transform="translate(0 0.000518799)" fill="white" />
<path id="volume-low" d="M0 9.87787C2.87188 9.87787 5.2 7.66663 5.2 4.93893C5.2 2.21124 2.87188 0 0 0V2C1.86563 2 3.2 3.41162 3.2 4.93893C3.2 6.46625 1.86563 7.87787 0 7.87787V9.87787Z" transform="translate(17.3333 7.44955)" fill="white" />
<path id="volume-high" d="M0 16.4631C4.78647 16.4631 8.66667 12.7777 8.66667 8.23157C8.66667 3.68539 4.78647 0 0 0V2C3.78022 2 6.66667 4.88577 6.66667 8.23157C6.66667 11.5773 3.78022 14.4631 0 14.4631V16.4631Z" transform="translate(17.3333 4.15689)" fill="white" />
<path id="volume-off" d="M1.22565 0L0 1.16412L3.06413 4.0744L0 6.98471L1.22565 8.14883L4.28978 5.23853L7.35391 8.14883L8.57956 6.98471L5.51544 4.0744L8.57956 1.16412L7.35391 0L4.28978 2.91031L1.22565 0Z" transform="translate(17.3769 .........完整代码请登录后点击上方下载按钮下载查看