⚠️ 重要提示：用户体验与广告拦截
- 用户体验差：这种“强打扰”式的广告会严重影响用户体验，导致用户流失，请谨慎使用，并确保广告内容与网站高度相关,且不会无限循环播放。
- 广告拦截器：许多浏览器广告拦截插件（如 Adblock Plus, uBlock Origin）默认会阻止这种弹窗广告,可能导致你的广告无法被用户看到。
- 浏览器政策：浏览器（尤其是移动端浏览器）对自动播放视频有严格限制，通常要求视频必须被用户交互（如点击）后才能播放声音。
完整代码示例
你可以直接将以下代码保存为 .html 文件,然后在浏览器中打开查看效果。
（图片来源网络，侵删）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">右下角视频广告示例</title>
<style>
/* 基础页面样式，为了演示 */
body {
font-family: Arial, sans-serif;
padding: 20px;
line-height: 1.6;
}
p {
margin-bottom: 20px;
}
/* 广告容器样式 */
#ad-container {
position: fixed; /* 固定定位 */
right: 20px; /* 距离右边 20px */
bottom: 20px; /* 距离底部 20px */
width: 350px; /* 设置一个合适的宽度 */
z-index: 9999; /* 确保广告在最上层 */
box-shadow: 0 0 15px rgba(0,0,0,0.5); /* 添加阴影，使其更突出 */
background-color: #fff;
border-radius: 8px;
overflow: hidden; /* 防止内容溢出 */
}
/* 视频播放器样式 */
#ad-video {
width: 100%;
height: auto;
display: block; /* 移除视频下方的间隙 */
}
/* 广告关闭按钮样式 */
#ad-close-btn {
position: absolute;
top: 10px;
right: 10px;
width: 24px;
height: 24px;
background-color: rgba(0, 0, 0, 0.6);
color: #fff;
border: none;
border-radius: 50%;
font-size: 16px;
line-height: 24px;
text-align: center;
cursor: pointer;
z-index: 10000; /* 确保关闭按钮在视频之上 */
}
#ad-close-btn:hover {
background-color: rgba(0, 0, 0, 0.8);
}
</style>
</head>
<body>
<h1>这是一个示例网页</h1>
<p>向下滚动页面，几秒钟后，右下角将弹出一个视频广告。</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.</p>
<!-- ... 页面其他内容 ... -->
<p>Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue.</p>
<p>Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam, nisi quis porttitor congue, elit erat euismod orci, ac placerat dolor lectus quis orci.</p>
<p>Phasellus consectetuer vestibulum elit. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Vestibulum fringilla pede sit amet augue. In turpis. Pellentesque posuere. Praesent turpis. Aenean posuere, tortor sed cursus faucibus, tortor velit tempor lacus, et egestas lorem lorem ultrices magna.</p>
<!-- 广告容器 HTML 结构 -->
<div id="ad-container">
<button id="ad-close-btn">×</button>
<video id="ad-video" controls poster="https://via.placeholder.com/350x200.png?text=广告海报">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
您的浏览器不支持视频标签。
</video>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const adContainer = document.getElementById('ad-container');
const closeBtn = document.getElementById('ad-close-btn');
const adVideo = document.getElementById('ad-video');
// 1. 延迟显示广告
// 5秒后显示广告
setTimeout(() => {
adContainer.style.display = 'block';
// 为了更好的用户体验，建议视频在用户看到后再加载
// adVideo.load();
}, 5000); // 5000 毫秒 = 5 秒
// 2. 关闭广告功能
closeBtn.addEventListener('click', function() {
// 将广告容器隐藏，而不是从DOM中移除，以便后续可以再次显示
adContainer.style.display = 'none';
});
// 3. 视频播放结束后隐藏广告 (可选)
adVideo.addEventListener('ended', function() {
// adContainer.style.display = 'none';
});
// 4. 防止用户通过拖拽来移动广告容器
adContainer.addEventListener('dragstart', function(e) {
e.preventDefault();
});
});
</script>
</body>
</html>
代码分步解析
HTML 结构
<div id="ad-container">
<button id="ad-close-btn">×</button>
<video id="ad-video" controls poster="...">...</video>
</div>
div#ad-container: 这是整个广告的“外包装盒”，我们通过 CSS 将它定位到右下角。button#ad-close-btn: 关闭按钮，这是至关重要的元素，一个好的广告必须提供关闭选项,否则会非常惹人反感。video#ad-video: HTML5 的视频标签。controls: 添加浏览器默认的视频控制器（播放/暂停、进度条、声音等）,让用户可以控制视频。poster: 指定视频在播放前显示的图片（海报图）,可以提升加载时的用户体验。<source>: 指定视频文件的路径和格式。
CSS 样式
#ad-container {
position: fixed; /* 核心属性：固定在视口的某个位置 */
right: 20px; /* 距离视口右边 20px */
bottom: 20px; /* 距离视口底部 20px */
width: 350px; /* 设置一个固定的宽度 */
z-index: 9999; /* 确保广告在页面所有内容之上 */
display: none; /* 初始状态隐藏，等待JS触发 */
}
position: fixed: 这是实现“右下角”效果的核心，它会使元素相对于浏览器窗口（viewport）进行定位，即使页面滚动,它也会保持在原地。right和bottom: 控制元素距离窗口边缘的距离。z-index: 一个很高的值可以确保广告不会被页面上其他元素遮挡。display: none: 初始状态下隐藏广告，由 JavaScript 来控制何时显示。
JavaScript 逻辑
document.addEventListener('DOMContentLoaded', function() {
// ... 获取元素 ...
// 1. 延迟显示
setTimeout(() => {
adContainer.style.display = 'block';
}, 5000);
// 2. 关闭按钮
closeBtn.addEventListener('click', function() {
adContainer.style.display = 'none';
});
});
DOMContentLoaded: 确保整个页面 HTML 结构加载完成后再执行我们的 JS 代码,这是最佳实践。setTimeout(): 创建一个定时器，在指定的毫秒数（这里是 5000，即 5 秒）后执行代码，这里是用来实现“延迟弹出”的效果。adContainer.style.display = 'block': 将 CSS 中display: none改为display: block,让广告容器显示出来。closeBtn.addEventListener('click', ...): 监听关闭按钮的点击事件，当用户点击时，将广告容器的display设置回none,从而隐藏广告。
高级定制与注意事项
-
自动播放与静音 为了遵守浏览器的自动播放策略（特别是移动端）,通常需要将视频设为静音。
<video id="ad-video" muted autoplay controls poster="...">
muted: 静音播放。autoplay: 自动播放，在桌面端，只要视频是静音的，autoplay通常可以生效，在移动端，即使静音,很多浏览器也要求用户先与页面交互后才能自动播放。
-
控制广告频率 你不希望用户每次刷新页面都看到这个广告，可以使用
localStorage来记录用户是否已经看过广告。// 在显示广告之前检查 if (!localStorage.getItem('adShown')) { setTimeout(() => { adContainer.style.display = 'block'; // 用户看过后，记录下来 localStorage.setItem('adShown', 'true'); }, 5000); } -
动态加载视频源 如果你的广告是动态的（比如从服务器获取），可以在 JS 中动态设置
src。// 假设从API获取到的视频URL const videoUrl = 'https://your-ad-server.com/ad.mp4'; adVideo.src = videoUrl; adVideo.load(); // 预加载视频
-
响应式设计 在小屏幕设备（如手机）上，全宽度的广告会非常突兀,可以添加媒体查询来调整广告大小。
（图片来源网络，侵删）@media (max-width: 768px) { #ad-container { width: 90%; /* 在小屏幕上占满宽度的90% */ right: 5%; bottom: 10px; } }
希望这个详细的解释和代码能帮到你！
（图片来源网络，侵删）
