写一段在网页里插入视频且能循环播放的代码,运用Javascript,并且将视频铺满全屏,能跟随网页大小而改变
时间: 2023-07-15 14:15:10 浏览: 171
以下是一段能够在网页中循环播放视频并且能够跟随网页大小而改变的JavaScript代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>Looping Fullscreen Video</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
}
video {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1;
}
</style>
</head>
<body>
<video id="myVideo" autoplay loop>
<source src="myVideo.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<script>
var video = document.getElementById("myVideo");
var videoRatio = video.height / video.width;
function resizeVideo() {
var windowRatio = window.innerHeight / window.innerWidth;
if (windowRatio > videoRatio) {
video.style.width = "100%";
video.style.height = "auto";
} else {
video.style.width = "auto";
video.style.height = "100%";
}
}
window.onload = function() {
resizeVideo();
window.addEventListener("resize", resizeVideo);
};
</script>
</body>
</html>
```
这段代码会展示一个全屏的视频,并且能够随着网页大小的变化而改变。视频会不断循环播放,直到网页被关闭。
阅读全文