博客

使用jquery的全屏视频背景

  • Post category:jquery

使用jQuery实现全屏视频背景需要以下几个步骤：

1.创建一个包含视频的标签

使用<video>标签来嵌入视频。确保将视频的宽度和高度都设置为100%以获取全屏幕视频效果。

<video id="video-background" muted autoplay loop>
  <source src="video.mp4" type="video/mp4">
</video>

2.设置CSS样式

为了将视频定位为背景，需要设置z-index: -1和position: fixed。

#video-background {
  position: fixed; 
  right: 0; 
  bottom: 0;
  min-width: 100%; 
  min-height: 100%;
  width: auto; 
  height: auto; 
  z-index: -1;
  background-size: cover;
}

添加background-size: cover，确保视频始终覆盖整个屏幕，即使窗口大小改变也是如此。

3.在页面加载时自动播放视频

使用jQuery来控制视频的播放/暂停和音量等属性。在页面加载时自动播放视频。

<script>
    $(function() {
        $('#video-background').css({'opacity':0});
        $('#video-background').animate({'opacity':1},1000);
        $('#video-background').get(0).play();
    });
</script>

示例1：带控制按钮的全屏视频背景

下面这个示例是带有一个包含播放/暂停和音量控制按钮的全屏视频背景。

<!DOCTYPE html>
<html>
<head>
    <title>Full Screen Video Background with jQuery</title>
    <style>
        #video-background {
            position: fixed;
            right: 0;
            bottom: 0;
            min-width: 100%; 
            min-height: 100%;
            width: auto;
            height: auto;
            z-index: -1;
            background-size: cover;
        }
        .control-bar {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 1;
            text-align: center;
        }
        .control-bar button {
            background-color: rgba(0,0,0,0.5);
            border: none;
            color: white;
            cursor: pointer;
            padding: 15px 20px;
            margin: 10px;
            font-size: 20px;
            border-radius: 10px;
        }
    </style>
</head>
<body>
    <video id="video-background" muted autoplay loop>
        <source src="video.mp4" type="video/mp4">
    </video>
    <div class="control-bar">
        <button id="toggle-play">Play/Pause</button>
        <button id="toggle-mute">Mute/Unmute</button>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        var video = document.getElementById("video-background");
        var playButton = document.getElementById("toggle-play");
        var muteButton = document.getElementById("toggle-mute");

        $(function() {
            $('#video-background').css({'opacity':0});
            $('#video-background').animate({'opacity':1},1000);
            video.play();
        });

        playButton.addEventListener("click", function() {
            if (video.paused) {
                video.play();
                playButton.innerHTML = "Pause";
            } else {
                video.pause();
                playButton.innerHTML = "Play";
            }
        });

        muteButton.addEventListener("click", function() {
            if (video.muted) {
                video.muted = false;
                muteButton.innerHTML = "Mute";
            } else {
                video.muted = true;
                muteButton.innerHTML = "Unmute";
            }
        });
    </script>
</body>
</html>

示例2：在视频上添加文本

下面这个示例展示了如何在视频上添加文本。

<!DOCTYPE html>
<html>
<head>
    <title>Full Screen Video Background with Text Overlay</title>
    <style>
        #video-background {
            position: fixed;
            right: 0;
            bottom: 0;
            min-width: 100%; 
            min-height: 100%;
            width: auto;
            height: auto;
            z-index: -1;
            background-size: cover;
        }
        #video-overlay {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 1;
            text-align: center;
            color: white; 
            font-size: 40px;
        }
        #video-overlay h1 {
            margin-top: 0;
            font-size: 60px;
            text-shadow: 2px 2px 4px #000000;
        }
    </style>
</head>
<body>
    <video id="video-background" muted autoplay loop>
        <source src="video.mp4" type="video/mp4">
    </video>
    <div id="video-overlay">
        <h1>Welcome to My Site</h1>
        <p>Watch this amazing video background!</p>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        $(function() {
            $('#video-background').css({'opacity':0});
            $('#video-background').animate({'opacity':1},1000);
            $('#video-overlay').css({'opacity':0}).delay(1000).animate({'opacity':1},1000);
        });
    </script>
</body>
</html>

在这个示例中，我们添加了一个绝对定位的<div>元素来创建叠加在视频上的文本。使用text-shadow属性为文本添加阴影，以增加可读性和视觉效果。最后，使用jQuery来实现文本的渐入效果，延迟1秒后淡入文本。

Tags: