<!DOCTYPE html>
<html lang="zh-HK">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>校園電視台 2025-2026 影片</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Microsoft JhengHei', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #8a1a1a, #d05e26);
            color: #333;
            min-height: 100vh;
            padding: 20px;
            background-attachment: fixed;
        }
        
        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 20px;
        }
        
        header {
            text-align: center;
            margin-bottom: 30px;
            padding: 30px;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
            position: relative;
            overflow: hidden;
            border-bottom: 8px solid #c84e4e;
        }
        
        header::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 8px;
            background: linear-gradient(to right, #d67c7c, #e0a5a5, #d67c7c);
        }
        
        h1 {
            font-size: 3.2rem;
            margin-bottom: 10px;
            color: #2c3e50;
            position: relative;
            z-index: 2;
            background: linear-gradient(45deg, #c84e4e, #d67c7c);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        .subtitle {
            font-size: 1.4rem;
            max-width: 800px;
            margin: 0 auto;
            color: #2c3e50;
            margin-top: 15px;
            position: relative;
            z-index: 2;
            line-height: 1.6;
        }
        
        .logo-container {
            display: flex;
            justify-content: center;
            margin-bottom: 20px;
        }
        
        .logo {
            width: 120px;
            height: 120px;
            background: linear-gradient(135deg, #c84e4e, #d67c7c);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 5px solid white;
            box-shadow: 0 0 25px rgba(0, 0, 0, 0.2);
        }
        
        .logo i {
            font-size: 4rem;
            color: white;
        }
        
        .subject-tabs {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 12px;
            margin-bottom: 30px;
            padding: 0 10px;
        }
        
        .subject-tab {
            padding: 14px 25px;
            background: rgba(255, 255, 255, 0.85);
            border: none;
            border-radius: 50px;
            cursor: pointer;
            font-size: 1.1rem;
            font-weight: bold;
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            display: flex;
            align-items: center;
            gap: 10px;
            color: #2c3e50;
            border: 3px solid transparent;
            flex: 1;
            min-width: 180px;
            max-width: 220px;
            justify-content: center;
        }
        
        .subject-tab:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
        }
        
        .subject-tab.active {
            background: white;
            box-shadow: 0 0 0 3px #c84e4e, 0 8px 20px rgba(0, 0, 0, 0.15);
            border-color: #c84e4e;
            color: #c84e4e;
        }
        
        .subject-tab i {
            font-size: 1.4rem;
        }
        
        .content-container {
            display: flex;
            gap: 30px;
            margin-bottom: 40px;
            flex-wrap: wrap;
        }
        
        .video-section {
            flex: 2;
            min-width: 300px;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            padding: 25px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        }
        
        .video-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 3px solid #c84e4e;
        }
        
        .section-title {
            font-size: 1.8rem;
            color: #2c3e50;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .section-title i {
            color: #d67c7c;
        }
        
        #videoPlayer {
            width: 100%;
            height: auto;
            background: #000;
            border-radius: 15px;
            margin-bottom: 20px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
        }
        
        .player-controls {
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
            margin-bottom: 20px;
        }
        
        .player-controls button {
            flex: 1;
            min-width: 120px;
            padding: 14px;
            background: linear-gradient(to right, #c84e4e, #d67c7c);
            color: white;
            border: none;
            border-radius: 10px;
            cursor: pointer;
            font-weight: bold;
            transition: all 0.3s ease;
            font-size: 1.1rem;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            box-shadow: 0 4px 10px rgba(200, 78, 78, 0.3);
        }
        
        .player-controls button:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 15px rgba(200, 78, 78, 0.4);
        }
        
        .player-controls button:active {
            transform: translateY(1px);
        }
        
        .playlist-section {
            flex: 1;
            min-width: 300px;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            padding: 25px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            max-height: 650px;
            overflow-y: auto;
        }
        
        .playlist-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 3px solid #d67c7c;
        }
        
        .playlist-container {
            display: grid;
            grid-template-columns: 1fr;
            gap: 15px;
        }
        
        .playlist-item {
            display: flex;
            align-items: center;
            padding: 15px;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
            border: 2px solid transparent;
        }
        
        .playlist-item:hover {
            transform: translateX(5px);
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
            border-color: #c84e4e;
        }
        
        .playlist-item.active {
            background: linear-gradient(to right, rgba(200, 78, 78, 0.1), white);
            border-color: #c84e4e;
            box-shadow: 0 0 0 2px rgba(200, 78, 78, 0.3);
        }
        
        /* 縮略圖樣式 */
        .thumbnail-container {
            width: 100px;
            height: 70px;
            border-radius: 8px;
            overflow: hidden;
            margin-right: 15px;
            position: relative;
            box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
            flex-shrink: 0;
        }
        
        .thumbnail {
            width: 100%;
            height: 100%;
            object-fit: cover;
            background-color: #ffe0e0;
            transition: transform 0.3s ease;
        }
        
        .playlist-item:hover .thumbnail {
            transform: scale(1.05);
        }
        
        .play-icon {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            background: rgba(0, 0, 0, 0.5);
            border-radius: 50%;
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .playlist-item:hover .play-icon {
            opacity: 1;
        }
        
        .playlist-info {
            flex: 1;
        }
        
        .playlist-title {
            font-weight: bold;
            font-size: 1.1rem;
            margin-bottom: 5px;
            color: #2c3e50;
        }
        
        .playlist-meta {
            display: flex;
            color: #7f8c8d;
            font-size: 0.9rem;
        }
        
        .playlist-meta span {
            margin-right: 15px;
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .info-section {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            padding: 30px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            margin-top: 30px;
        }
        
        .info-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 25px;
        }
        
        .info-card {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 15px;
            padding: 25px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            border-top: 5px solid #c84e4e;
            transition: all 0.3s ease;
        }
        
        .info-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }
        
        .info-card h3 {
            color: #2c3e50;
            margin-bottom: 15px;
            font-size: 1.5rem;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .info-card i {
            color: #d67c7c;
            font-size: 1.5rem;
        }
        
        .info-card ul {
            padding-left: 20px;
        }
        
        .info-card li {
            margin-bottom: 12px;
            line-height: 1.5;
            color: #34495e;
        }
        
        footer {
            text-align: center;
            margin-top: 40px;
            padding: 25px;
            color: white;
            font-size: 1rem;
            background: rgba(0, 0, 0, 0.2);
            border-radius: 15px;
        }
        
        @media (max-width: 1100px) {
            .content-container {
                flex-direction: column;
            }
            
            .video-section, .playlist-section {
                width: 100%;
            }
        }
        
        @media (max-width: 768px) {
            h1 {
                font-size: 2.5rem;
            }
            
            .subject-tab {
                padding: 12px 20px;
                font-size: 1rem;
                min-width: 150px;
            }
            
            .section-title {
                font-size: 1.5rem;
            }
        }
        
        @media (max-width: 480px) {
            h1 {
                font-size: 2rem;
            }
            
            .subtitle {
                font-size: 1.1rem;
            }
            
            .subject-tab {
                padding: 10px 15px;
                font-size: 0.9rem;
                min-width: 130px;
            }
            
            .player-controls button {
                min-width: 100px;
                padding: 12px;
                font-size: 1rem;
            }
            
            .thumbnail-container {
                width: 80px;
                height: 56px;
            }
        }
        
        .subject-icon {
            font-size: 1.5rem;
        }
        
        /* Scrollbar styling */
        .playlist-section::-webkit-scrollbar {
            width: 8px;
        }
        
        .playlist-section::-webkit-scrollbar-track {
            background: rgba(0, 0, 0, 0.05);
            border-radius: 10px;
        }
        
        .playlist-section::-webkit-scrollbar-thumb {
            background: #c84e4e;
            border-radius: 10px;
        }
        
        .playlist-section::-webkit-scrollbar-thumb:hover {
            background: #a83232;
        }
        
        /* Animation */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .animated {
            animation: fadeIn 0.6s ease-out;
        }
        
        .subject-name {
            font-weight: bold;
            color: #c84e4e;
            background: rgba(200, 78, 78, 0.1);
            padding: 3px 10px;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    

        
        <div class="subject-tabs">
            <button class="subject-tab active" data-subject="chinese">
                <i class="fas fa-book subject-icon"></i> 中文科
            </button>
            <button class="subject-tab" data-subject="english">
                <i class="fas fa-language subject-icon"></i> 英文科
            </button>
            <button class="subject-tab" data-subject="math">
                <i class="fas fa-calculator subject-icon"></i> 數學科
            </button>
            <button class="subject-tab" data-subject="science">
                <i class="fas fa-flask subject-icon"></i> 常識科
            </button>
            <button class="subject-tab" data-subject="music">
                <i class="fas fa-music subject-icon"></i> 音樂科
            </button>
            <button class="subject-tab" data-subject="mandarin">
                <i class="fas fa-comments subject-icon"></i> 普通話科
            </button>
            <button class="subject-tab" data-subject="art">
                <i class="fas fa-palette subject-icon"></i> 視藝科
            </button>
            <button class="subject-tab" data-subject="computer">
                <i class="fas fa-laptop subject-icon"></i> 電腦科
            </button>
            <button class="subject-tab" data-subject="library">
                <i class="fas fa-book-open subject-icon"></i> 圖書科
            </button>
            <button class="subject-tab" data-subject="pe">
                <i class="fas fa-running subject-icon"></i> 體育科
            </button>
        </div>
        
        <div class="content-container">
            <div class="video-section animated">
                <div class="video-header">
                    <h2 class="section-title">
                        <i class="fas fa-play-circle"></i> 影片播放
                    </h2>
                    <div class="video-info">
                        <span class="subject-name" id="currentSubject">中文科</span> • <span id="videoDuration">8:45</span>
                    </div>
                </div>
                
                <video id="videoPlayer" controls playsinline poster="https://images.unsplash.com/photo-1498243691581-b145c3f54a5a?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80">
                    <source src="https://www.sapsvideos.com/lms/video/campustv/2425/中文科/中文_1.mp4" type="video/mp4">
                    您的瀏覽器不支援影片播放。
                </video>
                
                <div class="player-controls">
                    <button id="playBtn">
                        <i class="fas fa-play"></i> 播放
                    </button>
                    <button id="pauseBtn">
                        <i class="fas fa-pause"></i> 暫停
                    </button>
                    <button id="restartBtn">
                        <i class="fas fa-redo"></i> 重新播放
                    </button>
                    <button id="fullscreenBtn">
                        <i class="fas fa-expand"></i> 全螢幕
                    </button>
                </div>
                
                <div class="video-description">
                    <h3 class="section-title">
                        <i class="fas fa-info-circle"></i> 影片簡介
                    </h3>
                    <p id="videoDescription">本影片透過生動的動畫和講解，介紹了五個常用成語的來源和用法，幫助學生在寫作和日常交流中正確使用成語。</p>
                </div>
            </div>
            
            <div class="playlist-section animated">
                <div class="playlist-header">
                    <h2 class="section-title">
                        <i class="fas fa-list-ul"></i> 學科影片列表
                    </h2>
                    <span id="videoCount">4 個影片</span>
                </div>
                
                <div class="playlist-container" id="playlistContainer">
                    <!-- Playlist items will be populated here -->
                </div>
            </div>
        </div>
        
        
        
        <footer>
            <p>© 2025 滬江小學 版權所有 | 校園影片資源平台</p>
            <p>技術支援：校園電視台節目小組 | 最後更新：2025年7月18日</p>
        </footer>
    </div>

    <script>
        // DOM elements
        const videoPlayer = document.getElementById('videoPlayer');
        const playlistContainer = document.getElementById('playlistContainer');
        const subjectTabs = document.querySelectorAll('.subject-tab');
        const playBtn = document.getElementById('playBtn');
        const pauseBtn = document.getElementById('pauseBtn');
        const restartBtn = document.getElementById('restartBtn');
        const fullscreenBtn = document.getElementById('fullscreenBtn');
        const currentSubject = document.getElementById('currentSubject');
        const videoDescription = document.getElementById('videoDescription');
        const videoDuration = document.getElementById('videoDuration');
        const videoCount = document.getElementById('videoCount');
        
        // Sample video data organized by subjects
        const subjects = {
            chinese: {
                name: "中文科",
                videos: [
                    { 
                        title: "文言文知多D1", 
                        src: "https://www.sapsvideos.com/lms/video/campustv/2425/中文科/中文_1.mp4",
                        duration: "3:26",
                        description: "文言文知多D1",
                        thumbnail: "https://www.sapsvideos.com/lms/video/campustv/2425/中文科/中文_1.jpg"
                    },
                    { 
                        title: "文言文知多D2", 
                        src: "https://www.sapsvideos.com/lms/video/campustv/2425/中文科/中文_2.mp4",
                        duration: "3:46",
                        description: "文言文知多D2",
                        thumbnail: "https://www.sapsvideos.com/lms/video/campustv/2425/中文科/中文_2.jpg"
                    },
                   
                ]
            },
            english: {
                name: "英文科",
                videos: [
                    { 
                        title: "Learning English And Having Fun", 
                        src: "https://www.sapsvideos.com/lms/video/campustv/2425/英文科/英文.mp4",
                        duration: "2:55",
                        description: "Learning English And Having Fun",
                        thumbnail: "https://www.sapsvideos.com/lms/video/campustv/2425/英文科/英文.jpg"
                    },
                    { 
                        title: "Saying of Wisdoms", 
                        src: "https://www.sapsvideos.com/lms/video/campustv/2425/英文科/英文_2.mp4",
                        duration: "2:22",
                        description: "Saying of Wisdoms",
                        thumbnail: "https://www.sapsvideos.com/lms/video/campustv/2425/英文科/英文_2.jpg"
                    },

                ]
            },
            math: {
                name: "數學科",
                videos: [
                    { 
                        title: "鷄兔同籠", 
                        src: "https://www.sapsvideos.com/lms/video/campustv/2425/數學科/數學.mp4",
                        duration: "2:17",
                        description: "鷄兔同籠",
                        thumbnail: "https://www.sapsvideos.com/lms/video/campustv/2425/數學科/數學.jpg"
                    },

                ]
            },
            science: {
                name: "常識科",
                videos: [
                    { 
                        title: "介紹大熊貓", 
                        src: "https://www.sapsvideos.com/lms/video/campustv/2425/常識科/常識1.mp4",
                        duration: "2:18",
                        description: "介紹大熊貓",
                        thumbnail: "https://www.sapsvideos.com/lms/video/campustv/2425/常識科/常識1.jpg"
                    },
                    { 
                        title: "自製防震層", 
                        src: "https://www.sapsvideos.com/lms/video/campustv/2425/常識科/常識2.mp4",
                        duration: "2:32",
                        description: "自製防震層",
                        thumbnail: "https://www.sapsvideos.com/lms/video/campustv/2425/常識科/常識2.jpg"
                    }
                ]
            },
            music: {
                name: "音樂科",
                videos: [
                    { 
                        title: "人物專訪 -- 陳可翹", 
                        src: "https://www.sapsvideos.com/lms/video/campustv/2425/音樂科/音樂1.mp4",
                        duration: "5:10",
                        description: "人物專訪 -- 陳可翹",
                        thumbnail: "https://www.sapsvideos.com/lms/video/campustv/2425/音樂科/音樂1.jpg"
                    },
					{ 
                        title: "人物專訪 -- 梁樂謙", 
                        src: "https://www.sapsvideos.com/lms/video/campustv/2425/音樂科/音樂2.mp4",
                        duration: "5:10",
                        description: "人物專訪 -- 梁樂謙",
                        thumbnail: "https://www.sapsvideos.com/lms/video/campustv/2425/音樂科/音樂1.jpg"
                    },

                ]
            },
            mandarin: {
                name: "普通話科",
                videos: [
                    { 
                        title: "航天員小知識", 
                        src: "https://www.sapsvideos.com/lms/video/campustv/2425/普通話科/普通話.mp4",
                        duration: "2:54",
                        description: "航天員小知識",
                        thumbnail: "https://www.sapsvideos.com/lms/video/campustv/2425/普通話科/普通話.jpg"
                    },
                    { 
                        title: "穿越之旅-深圳香港", 
                        src: "https://www.sapsvideos.com/lms/video/campustv/2425/普通話科/普通話2.mp4",
                        duration: "2:09",
                        description: "穿越之旅-深圳香港",
                        thumbnail: "https://www.sapsvideos.com/lms/video/campustv/2425/普通話科/普通話2.jpg"
                    }
                ]
            },
            art: {
                name: "視藝科",
                videos: [
                    { 
                        title: "作品分享1", 
                        src: "https://www.sapsvideos.com/lms/video/campustv/2425/視藝科/視藝1.mp4",
                        duration: "1:26",
                        description: "作品分享1",
                        thumbnail: "https://www.sapsvideos.com/lms/video/campustv/2425/視藝科/視藝1.jpg"
                    },
                    { 
                        title: "作品分享2", 
                        src: "https://www.sapsvideos.com/lms/video/campustv/2425/視藝科/視藝2.mp4",
                        duration: "1:33",
                        description: "作品分享2",
                        thumbnail: "https://www.sapsvideos.com/lms/video/campustv/2425/視藝科/視藝2.jpg"
                    }
                ]
            },
            computer: {
                name: "電腦科",
                videos: [
                    { 
                        title: "WRO比賽機械人介紹", 
                        src: "https://www.sapsvideos.com/lms/video/campustv/2425/電腦科/電腦科_1.mp4",
                        duration: "1:12",
                        description: "WRO比賽機械人介紹",
                        thumbnail: "https://www.sapsvideos.com/lms/video/campustv/2425/電腦科/電腦科_1.jpg"
                    },
                    { 
                        title: "WRO比賽賽規介紹", 
                        src: "https://www.sapsvideos.com/lms/video/campustv/2425/電腦科/電腦科_2.mp4",
                        duration: "1:41",
                        description: "WRO比賽賽規介紹",
                        thumbnail: "https://www.sapsvideos.com/lms/video/campustv/2425/電腦科/電腦科_2.jpg"
                    }
                ]
            },
            library: {
                name: "圖書科",
                videos: [
                 //   { 
                 //      title: "圖書分類與檢索技巧", 
                 //       src: "https://www.sapsvideos.com/lms/video/圖書科_分類檢索.mp4",
                 //       duration: "11:20",
                 //       description: "介紹圖書館圖書分類系統，教導學生如何快速找到所需書籍的檢索技巧。",
                 //       thumbnail: "https://images.unsplash.com/photo-1495640388908-05fa85288e61?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&q=80"
                 //   },
                   // { 
                     //   title: "閱讀方法：如何有效閱讀", 
                       // src: "https://www.sapsvideos.com/lms/video/圖書科_閱讀方法.mp4",
                        //duration: "13:45",
                        //description: "分享有效的閱讀方法和技巧，幫助學生提高閱讀速度和理解能力。",
                        //thumbnail: "https://images.unsplash.com/photo-1506880018603-83d5b814b5a6?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&q=80"
                    //}
                ]
            },
            pe: {
                name: "體育科",
                videos: [
                    { 
                        title: "籃球基礎：運球與傳球", 
                        src: "https://www.sapsvideos.com/lms/video/campustv/2425/體育科/體育2.mp4",
                        duration: "3:13",
                        description: "講解籃球的基本運球和傳球技巧，透過示範幫助學生掌握正確的動作要領。",
                        thumbnail: "https://www.sapsvideos.com/lms/video/campustv/2425/體育科/體育2.jpg"
                    },
                    { 
                        title: "籃球機使用方法", 
                        src: "https://www.sapsvideos.com/lms/video/campustv/2425/體育科/體育.mp4",
                        duration: "1:14",
                        description: "籃球機使用方法",
                        thumbnail: "https://www.sapsvideos.com/lms/video/campustv/2425/體育科/體育.jpg"
                    }
                ]
            }
        };
        
        // Current active subject
        let activeSubject = 'chinese';
        
        // Initialize the player
        function initPlayer() {
            // Set first video as active
            if (subjects[activeSubject].videos.length > 0) {
                playVideo(subjects[activeSubject].videos[0]);
            }
            
            // Create playlist for active subject
            createPlaylist();
        }
        
        // Create playlist items
        function createPlaylist() {
            playlistContainer.innerHTML = '';
            const videos = subjects[activeSubject].videos;
            
            videos.forEach((video, index) => {
                const playlistItem = document.createElement('div');
                playlistItem.className = 'playlist-item';
                if (index === 0) playlistItem.classList.add('active');
                
                playlistItem.innerHTML = `
                    <div class="thumbnail-container">
                        <img class="thumbnail" src="${video.thumbnail}" alt="${video.title}">
                        <div class="play-icon">
                            <i class="fas fa-play"></i>
                        </div>
                    </div>
                    <div class="playlist-info">
                        <div class="playlist-title">${video.title}</div>
                        <div class="playlist-meta">
                            <span><i class="far fa-clock"></i> ${video.duration}</span>
                            <span><i class="fas fa-book"></i> ${subjects[activeSubject].name}</span>
                        </div>
                    </div>
                `;
                
                playlistItem.addEventListener('click', () => {
                    // Remove active class from all items
                    document.querySelectorAll('.playlist-item').forEach(item => {
                        item.classList.remove('active');
                    });
                    
                    // Add active class to clicked item
                    playlistItem.classList.add('active');
                    
                    // Play the video
                    playVideo(video);
                });
                
                playlistContainer.appendChild(playlistItem);
            });
            
            // Update video count
            videoCount.textContent = `${videos.length} 個影片`;
        }
        
        // Play a specific video
        function playVideo(video) {
            videoPlayer.src = video.src;
            videoPlayer.load();
            videoPlayer.play();
            
            // Update video info
            videoDescription.textContent = video.description;
            videoDuration.textContent = video.duration;
            currentSubject.textContent = subjects[activeSubject].name;
        }
        
        // Event listeners for subject tabs
        subjectTabs.forEach(tab => {
            tab.addEventListener('click', () => {
                // Remove active class from all tabs
                subjectTabs.forEach(t => t.classList.remove('active'));
                
                // Add active class to clicked tab
                tab.classList.add('active');
                
                // Update active subject
                activeSubject = tab.dataset.subject;
                
                // Update current subject display
                currentSubject.textContent = subjects[activeSubject].name;
                
                // Create new playlist for subject
                createPlaylist();
                
                // Play the first video in the subject
                if (subjects[activeSubject].videos.length > 0) {
                    playVideo(subjects[activeSubject].videos[0]);
                }
            });
        });
        
        // Event listeners for player controls
        playBtn.addEventListener('click', () => videoPlayer.play());
        pauseBtn.addEventListener('click', () => videoPlayer.pause());
        restartBtn.addEventListener('click', () => {
            videoPlayer.currentTime = 0;
            videoPlayer.play();
        });
        
        fullscreenBtn.addEventListener('click', () => {
            if (videoPlayer.requestFullscreen) {
                videoPlayer.requestFullscreen();
            } else if (videoPlayer.mozRequestFullScreen) {
                videoPlayer.mozRequestFullScreen();
            } else if (videoPlayer.webkitRequestFullscreen) {
                videoPlayer.webkitRequestFullscreen();
            } else if (videoPlayer.msRequestFullscreen) {
                videoPlayer.msRequestFullscreen();
            }
        });
        
        // Initialize the page
        window.addEventListener('DOMContentLoaded', initPlayer);
    </script>
</body>
</html>