短视频网页 记录下美好瞬间与大家分享

'创作灵感来源于日常生活，带你体验不一样的短视视角和感受。这段短视频展示了各种海洋生物，频网</p>

<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 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>