Jonvy

导航

创建静态视频播放网页

要创建一个静态网页来播放视频列表，你可以按照以下步骤进行：

基本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>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            display: flex;
            max-width: 1200px;
            margin: 0 auto;
        }
        .video-list {
            width: 30%;
            background: white;
            padding: 15px;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        .video-player {
            width: 70%;
            padding: 0 20px;
        }
        .video-item {
            padding: 10px;
            margin: 5px 0;
            background: #f0f0f0;
            border-radius: 3px;
            cursor: pointer;
        }
        .video-item:hover {
            background: #e0e0e0;
        }
        video {
            width: 100%;
            background: black;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="video-list" id="videoList">
            <h2>视频列表</h2>
            <!-- 视频列表项将通过JavaScript动态生成 -->
        </div>
        <div class="video-player">
            <h2 id="videoTitle">请选择视频</h2>
            <video id="videoPlayer" controls>
                <source src="" type="video/mp4">
                您的浏览器不支持HTML5视频标签。
            </video>
            <p id="videoDescription"></p>
        </div>
    </div>

    <script>
        // JavaScript代码将放在这里
    </script>
</body>
</html>

　　

 




JavaScript实现


在<script>标签中添加以下javascript代码：










 



// 视频数据
const videos = [
    {
        id: 1,
        title: "视频1",
        description: "这是第一个视频的描述",
        url: "videos/video1.mp4",
        thumbnail: "thumbnails/thumb1.jpg"
    },
    {
        id: 2,
        title: "视频2",
        description: "这是第二个视频的描述",
        url: "videos/video2.mp4",
        thumbnail: "thumbnails/thumb2.jpg"
    },
    {
        id: 3,
        title: "视频3",
        description: "这是第三个视频的描述",
        url: "videos/video3.mp4",
        thumbnail: "thumbnails/thumb3.jpg"
    }
    // 可以添加更多视频
];

// 获取DOM元素
const videoList = document.getElementById('videoList');
const videoPlayer = document.getElementById('videoPlayer');
const videoTitle = document.getElementById('videoTitle');
const videoDescription = document.getElementById('videoDescription');

// 生成视频列表
function generateVideoList() {
    videos.forEach(video => {
        const videoItem = document.createElement('div');
        videoItem.className = 'video-item';
        videoItem.innerHTML = `
            <h3>${video.title}</h3>
            <p>${video.description.substring(0, 50)}...</p>
        `;
        videoItem.addEventListener('click', () => playVideo(video));
        videoList.appendChild(videoItem);
    });
}

// 播放视频函数
function playVideo(video) {
    videoPlayer.src = video.url;
    videoTitle.textContent = video.title;
    videoDescription.textContent = video.description;
    videoPlayer.load();
    videoPlayer.play();
}

// 页面加载时生成视频列表
window.onload = generateVideoList;





　　














实现说明


    

  1. 

    HTML结构：
    

      

    • 

      左侧是视频列表区域
      

      • 

    • 

      右侧是视频播放器和相关信息
      

      • 

    

    2. 

  2. 

    CSS样式：
    

      

    • 

      简单的响应式布局
      

      • 

    • 

      视频列表项有悬停效果
      

      • 

    

    3. 

  3. 

    JavaScript功能：
    

      

    • 

      videos数组存储所有视频信息
      

      • 

    • 

      generateVideoList()函数动态生成视频列表
      

      • 

    • 

      playVideo()函数处理视频播放
      

      • 

    

    4. 



进阶改进建议


    

  1. 

    添加缩略图：
    

    

    

    

    

    javascript
    

     

    

    // 在generateVideoList函数中修改videoItem.innerHTML
videoItem.innerHTML = `
    <img src="${video.thumbnail}" alt="${video.title}" width="100">
    <h3>${video.title}</h3>
`;
    

    

     
    

    

    

    

    

    

    

    2. 

  2. 

    响应式设计：
    

    

    

    

    

    css
    

     
    

    

    

    

    

    @media (max-width: 768px) {
    .container {
        flex-direction: column;
    }
    .video-list, .video-player {
        width: 100%;
    }
}

    

    

    　　
    

    

    3. 

  3. 

    添加本地存储：
    

    

    

    

    

    javascript
    

     
    

    

    

    

    

    // 记录上次播放的视频
function playVideo(video) {
    // ...原有代码...
    localStorage.setItem('lastVideo', JSON.stringify(video));
}

// 页面加载时检查是否有上次播放记录
window.onload = function() {
    generateVideoList();
    const lastVideo = localStorage.getItem('lastVideo');
    if (lastVideo) {
        playVideo(JSON.parse(lastVideo));
    }
};

    

    

    　　
    

    

    4. 

  4. 

    添加视频进度条：
    

    

    

    

    

    javascript
    

     
    

    

    

    

    

    // 在playVideo函数中添加
videoPlayer.addEventListener('timeupdate', function() {
    const progress = (videoPlayer.currentTime / videoPlayer.duration) * 100;
    // 更新进度条UI
});

    

    

    　　
    

    

    5. 



部署说明


    

  1. 

    确保你的视频文件放在videos/目录下
    

    2. 

  2. 

    缩略图放在thumbnails/目录下
    

    3. 

  3. 

    将HTML、CSS和JavaScript代码保存为index.html
    

    4. 

  4. 

    上传到任何静态网站托管服务（如GitHub Pages、Netlify等）
    

    5. 

  5. 如果缩略图主要以较小尺寸（例如在列表或网格中）显示，640x360px 或 800x450px 会是更有效率的选择，它们在视觉效果和加载速度之间取得了很好的平衡。
    6. 







		

			posted on 
2025-07-30 10:58 
不亮 
阅读(58) 
评论(0) 
 
收藏 
举报