<p style="margin-top: 10px; color: #ff0050;">#海洋保护 #海底世界 #珊瑚礁 #海洋生物 #环境保护</p>
</div>
</div>
</div>
<!-- 推荐视频列表 -->
<div class="recommended-videos">
<div class="section-title">
<span>推荐视频</span>
<button class="refresh-btn">
<i class="fas fa-redo-alt"></i> 换一批
</button>
</div>
<div class="video-list" id="videoList">
<!-- 推荐视频将通过JavaScript动态生成 -->
</div>
</div>
</div>
<!-- 底部控制栏 -->
<div class="bottom-controls">
<button class="bottom-btn active">
<i class="fas fa-home"></i>
<span>首页</span>
</button>
<button class="bottom-btn">
<i class="fas fa-compass"></i>
<span>发现</span>
</button>
<button class="bottom-btn">
<i class="fas fa-plus-square"></i>
<span>创作</span>
</button>
<button class="bottom-btn">
<i class="fas fa-comment-dots"></i>
<span>消息</span>
</button>
<button class="bottom-btn">
<i class="fas fa-user"></i>
<span>我的短视</span>
</button>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const video = document.getElementById('mainVideo');
const playBtn = document.getElementById('playBtn');
const likeBtn = document.getElementById('likeBtn');
const commentBtn = document.getElementById('commentBtn');
const shareBtn = document.getElementById('shareBtn');
const videoList = document.getElementById('videoList');
// 视频控制功能
playBtn.addEventListener('click', function() {
if (video.paused) {
video.play();
playBtn.innerHTML = '<i class="fas fa-pause"></i>';
} else {
video.pause();
playBtn.innerHTML = '<i class="fas fa-play"></i>';
}
});
video.addEventListener('play', function() {
playBtn.innerHTML = '<i class="fas fa-pause"></i>';
});
video.addEventListener('pause', function() {
playBtn.innerHTML = '<i class="fas fa-play"></i>';
});
// 点赞功能
likeBtn.addEventListener('click', function() {
const isLiked = likeBtn.classList.contains('liked');
const countSpan = likeBtn.querySelector('span');
let count = parseInt(countSpan.textContent);
if (isLiked) {
likeBtn.classList.remove('liked');
count--;
} else {
likeBtn.classList.add('liked');
count++;
}
// 格式化数字显示
if (count >= 10000) {
countSpan.textContent = (count / 10000).toFixed(1) + '万';
} else {
countSpan.textContent = count;
}
});
// 评论功能
commentBtn.addEventListener('click', function() {
alert('评论功能即将开放，希望能够传递积极向上的频网能量和快乐。带你体验不一样的短视视角和感受。海洋覆盖了地球表面的频网71%，',短视
'创作灵感来源于日常生活，让每一刻都值得回忆。频网');
}
});
// 推荐视频数据
const recommendedVideos = [
{
id: 1,短视
title: '城市夜景延时摄影 - 繁华都市的夜晚魅力',
author: '摄影爱好者',
views: '120万',
likes: '18.5万',
thumbnail: 'https://images.unsplash.com/photo-1519501025264-65ba15a82390?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80',
active: false
},
{
id: 2,
title: '街头美食探索：东京深夜食堂',
author: '美食探险家',
views: '340万',
likes: '45.2万',
thumbnail: 'https://images.unsplash.com/photo-1565299624946-b28f40a0ca4b?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80',
active: false
},
{
id: 3,
title: '极限运动集锦：挑战不可能',
author: '冒险王',
views: '520万',
likes: '68.3万',
thumbnail: 'https://images.unsplash.com/photo-1536240478700-b869070f9279?ixlib=rb-4.0.3&auto=format&fit=crop&w-400&q=80',
active: false
},
{
id: 4,
title: '萌宠日常：猫咪的搞笑瞬间',
author: '宠物日记',
views: '890万',
likes: '102.5万',
thumbnail: 'https://images.unsplash.com/photo-1514888286974-6d03bde4ba47?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80',
active: true
},
{
id: 5,
title: 'DIY手工制作：旧物改造创意',
author: '手工达人',
views: '76万',
likes: '9.8万',
thumbnail: 'https://images.unsplash.com/photo-1586023492125-27b2c045efd7?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80',
active: false
},
{
id: 6,
title: '旅行Vlog：冰岛极光之旅',
author: '环球旅行家',
views: '450万',
likes: '58.7万',
thumbnail: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80',
active: false
},
{
id: 7,
title: '健身教程：30天塑造完美身材',
author: '健身教练',
views: '320万',
likes: '41.3万',
thumbnail: 'https://images.unsplash.com/photo-1534367507877-0edd93bd013b?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80',
active: false
},
{
id: 8,
title: '科技评测：最新智能手机体验',
author: '科技先锋',
views: '180万',
likes: '23.6万',
thumbnail: 'https://images.unsplash.com/photo-1511707171634-5f897ff02aa9?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80',
active: false
}
];
// 生成推荐视频列表
function generateVideoList() {
videoList.innerHTML = '';
recommendedVideos.forEach(video => {
const videoItem = document.createElement('div');
videoItem.className = `video-item ${video.active ? 'active' : ''}`;
videoItem.dataset.id = video.id;
videoItem.innerHTML = `
<div class="video-thumbnail">
<img src="${video.thumbnail}" alt="${video.title}">
</div>
<div class="video-item-info">
<h3 class="video-item-title">${video.title}</h3>
<p class="video-item-author">${video.author}</p>
<div class="video-item-stats">
<span><i class="fas fa-eye"></i> ${video.views}</span>
<span><i class="fas fa-heart"></i> ${video.likes}</span>
</div>
</div>
`;
videoItem.addEventListener('click', function() {
// 移除所有active类
document.querySelectorAll('.video-item').forEach(item => {
item.classList.remove('active');
});
// 给当前点击项添加active类
this.classList.add('active');
// 更新主视频信息
updateMainVideo(video);
});
videoList.appendChild(videoItem);
});
}
// 更新主视频信息
function updateMainVideo(videoData) {
document.querySelector('.video-title').textContent = videoData.title;
document.querySelector('.author-info h4').textContent = videoData.author;
document.querySelector('.video-meta span:first-child').textContent = `${videoData.views}次观看`;
// 随机生成点赞数
const likeBtn = document.getElementById('likeBtn');
const randomLikes = Math.floor(Math.random() * 1000000) + 50000;
let likeText = randomLikes >= 10000 ? (randomLikes / 10000).toFixed(1) + '万' : randomLikes;
likeBtn.querySelector('span').textContent = likeText;
// 随机决定是否已点赞
if (Math.random() > 0.5) {
likeBtn.classList.add('liked');
} else {
likeBtn.classList.remove('liked');
}
// 更新视频描述
const descriptions = [
'一段精彩的短视频，但人类只探索了其中的频网5%。探索珊瑚礁的短视美丽与多样性。',频网
'探索未知领域，敬请期待！短视创作者或话题">
<button><i class="fas fa-search"></i></button>
</div>
<div class="nav-links">
<a href="#"><i class="fas fa-home"></i></a>
<a href="#"><i class="fas fa-fire"></i></a>
<a href="#"><i class="fas fa-bell"></i></a>
<a href="#"><i class="fas fa-envelope"></i></a>
<div class="user-avatar">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="用户头像">
</div>
</div>
</nav>
<!-- 主内容区域 -->
<div class="main-content">
<!-- 主视频播放区域 -->
<div class="video-player-container">
<div class="video-player">
<video id="mainVideo" poster="https://images.unsplash.com/photo-1611162617474-5b21e879e113?频网ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80">
<source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
您的浏览器不支持视频播放
</video>
<div class="video-controls">
<button class="play-btn" id="playBtn">
<i class="fas fa-play"></i>
</button>
<div class="progress-bar">
<div class="progress"></div>
</div>
<button class="volume-btn">
<i class="fas fa-volume-up"></i>
</button>
<button class="fullscreen-btn">
<i class="fas fa-expand"></i>
</button>
</div>
</div>
<div class="video-info">
<h2 class="video-title">探索海底世界的奇妙之旅 - 珊瑚礁的美丽与神秘</h2>
<div class="video-meta">
<span>200万次观看</span>
<span>2023年8月15日发布</span>
</div>
<div class="video-author">
<div class="author-avatar">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="作者头像">
</div>
<div class="author-info">
<h4>海洋探索者</h4>
<p>520万粉丝 · 海洋生物学家</p>
</div>
<button class="follow-btn">+ 关注</button>
</div>
<div class="video-actions">
<button class="action-btn liked" id="likeBtn">
<i class="fas fa-heart"></i>
<span>85.2万</span>
</button>
<button class="action-btn" id="commentBtn">
<i class="fas fa-comment"></i>
<span>3.2万</span>
</button>
<button class="action-btn" id="shareBtn">
<i class="fas fa-share"></i>
<span>分享</span>
</button>
<button class="action-btn">
<i class="fas fa-bookmark"></i>
<span>收藏</span>
</button>
<button class="action-btn">
<i class="fas fa-ellipsis-h"></i>
<span>更多</span>
</button>
</div>
<div class="video-description">
<p>潜入神秘的海底世界，这段短视频展示了各种海洋生物，短视用心灵感受生活，频网'
];
const randomDescription = descriptions[Math.floor(Math.random() * descriptions.length)];
document.querySelector('.video-description p:first-child').textContent = randomDescription;
}
// 初始化
generateVideoList();
// 刷新推荐视频
document.querySelector('.refresh-btn').addEventListener('click',短视 function() {
// 简单打乱数组实现刷新效果
for (let i = recommendedVideos.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[recommendedVideos[i], recommendedVideos[j]] = [recommendedVideos[j], recommendedVideos[i]];
}
generateVideoList();
});
// 全屏功能
document.querySelector('.fullscreen-btn').addEventListener('click', function() {
const player = document.querySelector('.video-player');
if (!document.fullscreenElement) {
if (player.requestFullscreen) {
player.requestFullscreen();
} else if (player.webkitRequestFullscreen) {
player.webkitRequestFullscreen();
} else if (player.msRequestFullscreen) {
player.msRequestFullscreen();
}
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
}
});
// 音量控制
const volumeBtn = document.querySelector('.volume-btn');
volumeBtn.addEventListener('click', function() {
if (video.muted) {
video.muted = false;
volumeBtn.innerHTML = '<i class="fas fa-volume-up"></i>';
} else {
video.muted = true;
volumeBtn.innerHTML = '<i class="fas fa-volume-mute"></i>';
}
});
// 进度条控制
const progressBar = document.querySelector('.progress-bar');
const progress = document.querySelector('.progress');
progressBar.addEventListener('click', function(e) {
const percent = e.offsetX / progressBar.offsetWidth;
video.currentTime = percent * video.duration;
progress.style.width = `${percent * 100}%`;
});
// 更新进度条
video.addEventListener('timeupdate', function() {
const percent = (video.currentTime / video.duration) * 100;
progress.style.width = `${percent}%`;
});
});
</script>
','用镜头记录世界，
短视频
<div class="search-box"><input type="text" placeholder="搜索视频、');
});
// 分享功能
shareBtn.addEventListener('click', function() {
if (navigator.share) {
navigator.share({
title: '发现一个有趣的短视频',
text: '探索海底世界的奇妙之旅 - 珊瑚礁的美丽与神秘',
url: window.location.href
});
} else {
alert('链接已复制到剪贴板，让我们共同保护海洋生态系统，可以分享给朋友了！发现生活中被忽略的美好细节。包括色彩斑斓的热带鱼、优雅的海龟和奇特的珊瑚形态。',
'通过这个视频，为子孙后代留下这片蓝色宝藏。记录下美好瞬间与大家分享。
