JS特效第159弹：全屏的视频播放video特效

马coder

于 2024-02-20 11:15:00 发布

阅读量458

点赞数 8

文章标签：音视频

本文链接：https://blog.csdn.net/weixin_38343072/article/details/136064313

版权

一款基于video制作大气全屏的视频播放，视频为背景的文字内容布局。这是一个带有全屏视频背景的登录页。随时可以在项目中使用此登录页。继续添加节，更改视频、内容等，先来看看效果：

一部分关键的代码如下：

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Video Landing Page</title>


<link rel="stylesheet" href="css/style.css">

</head>
<body>

<section class="showcase">
	<div class="video-container">
		<video src="video/video.mov" autoplay muted loop></video>
	</div>
	<div class="content">
		<h1>Shoot For The Stars</h1>
		<h3>全屏视频播放</h3>
		<a href="#about" class="btn">查看更多</a>
	</div>
</section>

<section id="about">
	<h1>关于我们</h1>
	<p>
		这是一个带有全屏视频背景的登录页。随时可以在项目中使用此登录页。继续添加节，更改视频、内容等
	</p>

	<h2>在社交媒体上关注我</h2>

</section>


</body>
</html>

全部代码：全屏的视频播放video特效