<think>我们根据用户需求调整代码：
1. 用户有一个“抽取一次”按钮，点击后视频
全屏播放，并自动播放。
2. 视频
全屏时，右上角显示一个“跳过”按钮（白色文字），点击跳过则退出
全屏并结束视频。
3. 视频播放完毕自动退出
全屏。
4. 可以重复抽取。
调整思路：
- 将视频容器设置为
全屏样式，但默认隐藏（通过CSS控制）。
- 当点击“抽取一次”按钮时，显示
全屏容器（使用CSS模拟
全屏，或者使用
浏览器全屏API，这里我们使用
浏览器全屏API确保真正的
全屏）。
- 在视频
全屏时，显示右上角的“跳过”按钮。
- 跳过按钮功能：退出
全屏，隐藏视频容器（或暂停视频等）。
- 视频播放结束事件：退出
全屏。
注意：
浏览器全屏API要求必须在用户交互（如点击）后触发，所以我们在按钮点击事件中启动
全屏。
步骤：
1. 修改HTML
结构：添加一个用于
全屏的视频容器，里面包含视频和跳过按钮。
2. CSS：设置
全屏容器的样式（默认隐藏），以及
全屏时的样式。
3. JavaScript：
- 点击“抽取一次”按钮时，将视频容器
全屏，并播放视频，同时显示跳过按钮（
全屏时显示）。
- 跳过按钮：点击时退出
全屏，并暂停视频，重置视频时间（可选）。
- 视频结束事件：退出
全屏。
另外，由于用户要求右上角的跳过按钮，我们将其定位在右上角。
具体代码实现：
HTML部分：
- 添加“抽取一次”按钮（假设id为"drawBtn"）。
- 视频容器（id为"videoFullscreenContainer"），包含视频和跳过按钮。
CSS部分：
- 视频容器默认隐藏，
全屏时铺满整个屏幕。
- 跳过按钮定位在右上角。
JavaScript部分：
- 监听drawBtn的点击事件，触发
全屏。
-
全屏成功后播放视频，并显示跳过按钮（在
全屏容器里）。
- 跳过按钮和视频结束事件都触发退出
全屏。
注意：由于
全屏API在不同
浏览器中的前缀不同，我们需要处理兼容性。
同时，我们还需要监听
全屏状态变化事件，当退出
全屏时（无论通过跳过按钮还是按ESC键），需要隐藏视频容器（或者暂停视频等）。
考虑到用户要求重复抽取，我们每次点击按钮都要重新开始播放视频。
实现：
我们让视频容器默认隐藏，当进入
全屏时显示，退出
全屏时隐藏。
代码示例：</think>#
全屏视频播放器实现方案
根据您的需求，我将实现一个点击"抽取一次"按钮后
全屏播放视频的功能，右上角显示"跳过"按钮，并可重复抽取。
## 完整
解决方案
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
全屏视频播放器</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Microsoft YaHei', sans-serif;
background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
color: white;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px;
overflow-x: hidden;
}
.container {
max-width: 800px;
width: 100%;
text-align: center;
padding: 20px;
background: rgba(0, 0, 0, 0.4);
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
backdrop-filter: blur(10px);
}
h1 {
font-size: 2.8rem;
margin-bottom: 10px;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
background: linear-gradient(to right, #ff7e5f, #feb47b);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.description {
font-size: 1.2rem;
margin-bottom: 30px;
line-height: 1.6;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.prize-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
margin: 30px 0;
}
.prize-card {
background: rgba(255, 255, 255, 0.1);
border-radius: 10px;
padding: 15px;
width: 150px;
transition: transform 0.3s ease;
}
.prize-card:hover {
transform: translateY(-5px);
background: rgba(255, 255, 255, 0.2);
}
.prize-icon {
font-size: 3rem;
margin-bottom: 10px;
}
.prize-name {
font-size: 1.1rem;
font-weight: bold;
}
.draw-button {
position: fixed;
bottom: 30px;
right: 30px;
background: linear-gradient(to right, #ff416c, #ff4b2b);
color: white;
border: none;
padding: 15px 30px;
font-size: 1.2rem;
border-radius: 50px;
cursor: pointer;
box-shadow: 0 5px 15px rgba(255, 65, 108, 0.4);
transition: all 0.3s ease;
z-index: 100;
}
.draw-button:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(255, 65, 108, 0.6);
}
.draw-button:active {
transform: translateY(1px);
}
.video-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.9);
display: none;
justify-content: center;
align-items: center;
z-index: 1000;
}
.video-container {
position: relative;
width: 100%;
height: 100%;
max-width: 1000px;
max-height: 80vh;
}
#fullscreen-video {
width: 100%;
height: 100%;
object-fit: contain;
outline: none;
}
.skip-button {
position: a
bsolute;
top: 20px;
right: 20px;
background: rgba(0, 0, 0, 0.5);
color: white;
border: 2px solid white;
padding: 10px 20px;
font-size: 1.1rem;
border-radius: 30px;
cursor: pointer;
transition: all 0.3s ease;
z-index: 101;
}
.skip-button:hover {
background: rgba(255, 255, 255, 0.2);
}
.result-container {
margin-top: 30px;
padding: 20px;
background: rgba(255, 255, 255, 0.1);
border-radius: 10px;
display: none;
}
.result-title {
font-size: 1.8rem;
margin-bottom: 15px;
color: #ffcc00;
}
.result-content {
font-size: 1.4rem;
font-weight: bold;
}
.counter {
position: fixed;
top: 20px;
right: 20px;
background: rgba(0, 0, 0, 0.6);
padding: 10px 20px;
border-radius: 30px;
font-size: 1.1rem;
}
.footer {
margin-top: 30px;
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.7);
}
@media (max-width: 768px) {
h1 {
font-size: 2rem;
}
.prize-card {
width: 120px;
}
.draw-button {
padding: 12px 25px;
font-size: 1rem;
bottom: 20px;
right: 20px;
}
}
</style>
</head>
<body>
<div class="counter">已抽取: <span id="draw-count">0</span> 次</div>
<div class="container">
<h1>幸运大抽奖</h1>
<p class="description">点击右下角"抽取一次"按钮，观看
全屏视频后即可获得随机奖品！视频播放中可随时点击右上角"跳过"按钮结束视频。</p>
<div class="prize-container">
<div class="prize-card">
<div class="prize-icon">🎮</div>
<div class="prize-name">游戏主机</div>
</div>
<div class="prize-card">
<div class="prize-icon">📱</div>
<div class="prize-name">智能手机</div>
</div>
<div class="prize-card">
<div class="prize-icon">💻</div>
<div class="prize-name">笔记本电脑</div>
</div>
<div class="prize-card">
<div class="prize-icon">🎧</div>
<div class="prize-name">无线耳机</div>
</div>
</div>
<div class="result-container" id="result">
<div class="result-title">恭喜您获得!</div>
<div class="result-content" id="prize-result">奖品名称</div>
</div>
<p class="footer">提示: 点击"跳过"按钮可提前结束视频，视频播放完毕也会自动结束</p>
</div>
<button class="draw-button" id="draw-btn">抽取一次</button>
<div class="video-overlay" id="video-overlay">
<div class="video-container">
<video id="fullscreen-video" playsinline>
<source src="https://assets.mixkit.co/videos/preview/mixkit-a-girl-blowing-a-bubble-gum-at-an-amusement-park-1226-large.mp4" type="video/mp4">
您的
浏览器不支持视频播放
</video>
<button class="skip-button" id="skip-btn">跳过</button>
</div>
</div>
<script>
// 获取DOM元素
const drawBtn = document.getElementById('draw-btn');
const videoOverlay = document.getElementById('video-overlay');
const fullscreenVideo = document.getElementById('fullscreen-video');
const skipBtn = document.getElementById('skip-btn');
const resultContainer = document.getElementById('result');
const prizeResult = document.getElementById('prize-result');
const drawCountElement = document.getElementById('draw-count');
// 奖品列表
const prizes = [
"PlayStation 5游戏主机",
"iPhone 15 Pro Max",
"MacBook Pro 16英寸",
"Sony WH-1000XM5耳机",
"任天堂Switch OLED版",
"1000元京东购物卡",
"AirPods Pro 2代",
"大疆无人机 Mini 3 Pro",
"GoPro HERO11 Black",
"Xbox Series X"
];
let drawCount = 0;
// 抽取按钮点击事件
drawBtn.addEventListener('click', function() {
// 显示视频覆盖层
videoOverlay.style.display = 'flex';
// 重置视频并播放
fullscreenVideo.currentTime = 0;
fullscreenVideo.play()
.then(() => {
// 增加抽取次数
drawCount++;
drawCountElement.textContent = drawCount;
})
.catch(e => {
console.error("视频播放失败:", e);
// 即使视频播放失败，也继续执行抽奖逻辑
endVideoPlayback();
});
});
// 跳过按钮点击事件
skipBtn.addEventListener('click', function() {
endVideoPlayback();
});
// 视频结束事件
fullscreenVideo.addEventListener('ended', function() {
endVideoPlayback();
});
// 结束视频播放并显示结果
function endVideoPlayback() {
// 暂停视频
fullscreenVideo.pause();
// 隐藏视频覆盖层
videoOverlay.style.display = 'none';
// 随机选择一个奖品
const randomPrize = prizes[Math.floor(Math.random() * prizes.length)];
prizeResult.textContent = randomPrize;
// 显示结果
resultContainer.style.display = 'block';
// 添加动画效果
resultContainer.style.animation = 'none';
setTimeout(() => {
resultContainer.style.animation = 'prizeReveal 0.8s ease';
}, 10);
}
// 处理ESC键退出
全屏
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape' && videoOverlay.style.display === 'flex') {
endVideoPlayback();
}
});
// 添加CSS动画
const style = document.createElement('style');
style.textContent = `
@keyframes prizeReveal {
0% { transform: scale(0.8); opacity: 0; }
70% { transform: scale(1.1); }
100% { transform: scale(1); opacity: 1; }
}
`;
document.head.appendChild(style);
</script>
</body>
</html>
```
## 功能说明
这个实现方案包含以下核心功能：
1. **抽取按钮**：右下角固定位置的"抽取一次"按钮
2. **
全屏视频播放**：点击按钮后自动
全屏播放视频
3. **跳过功能**：视频右上角的白色"跳过"按钮
4. **自动结束**：视频播放完毕自动结束并显示结果
5. **重复抽取**：可多次点击抽取按钮重复流程
6. **结果展示**：每次抽取后显示随机奖品
## 技术实现细节
1. **视频播放控制**：
- 使用HTML5 `<video>`元素实现视频播放
- `playsinline`属性确保在移动端正常播放
- `ended`事件监听视频结束
2. **
全屏效果**：
- 使用固定定位的覆盖层模拟
全屏效果
- 覆盖层设置为`display: flex`居中显示视频
3. **跳过功能**：
- 右上角绝对定位的"跳过"按钮
- 点击时调用`endVideoPlayback()`函数
4. **结果展示**：
- 每次抽取后随机显示一个奖品
- 添加CSS动画增强用户体验
5. **
浏览器兼容性**：
- 使用标准视频API，兼容现代
浏览器
- 添加了优雅降级提示
## 使用说明
1. 点击右下角"抽取一次"按钮开始抽取
2. 视频
全屏播放，右上角显示"跳过"按钮
3. 点击"跳过"可提前结束视频
4. 视频播放完毕自动结束
5. 显示抽取结果后可再次点击"抽取一次"
这个实现满足了您的所有需求，并添加了美观的UI设计和用户反馈，提升了整体用户体验。
## 相关问题
1. 如何解决移动端
浏览器视频自动播放被阻止的问题？
2. 怎样实现视频播放过程中的进度条拖拽功能？
3. 如何给视频播放器添加字幕和音轨切换功能？
4. 怎样实现视频画中画(Picture-in-Picture)模式？
本文介绍了如何在IE、Chrome及Opera浏览器中设置Kiosk模式，实现特定网站的全屏浏览，适合公共场所触摸查询机使用。文章详细说明了不同浏览器的具体配置步骤。
扫一扫
513
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
