当前位置: article > 正文

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

作者：正经夜光杯 | 2024-07-23 18:02:14

踩

js 让视频全屏播放

一款基于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特效

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