自訂 HTML5 播放器介面（含 JS 控制）

/* 隱藏自訂控制列 (初始狀態) */
.controls.hidden {
  display: none;
}
/* 控制列容器的排版 */
.player-container {
  max-width: 640px; /* 父容器寬度，可依需要調整或以百分比呈現響應式 */
  margin: 1em auto;
  /* 可選擇性地 position: relative; 以便進一步定位內部元素（如將控制列覆蓋在影片上） */
}
.controls {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;           /* 控制項間距 */
  padding: 8px 12px;   /* 控制列內距，讓按鈕不貼邊 */
  background: #333;    /* 控制列背景色，例如半透明黑色: rgba(0,0,0,0.5) */
  color: #fff;         /* 文字與圖示顏色為白色，便於在深色背景上顯示 */
}

/* 共用按鈕外觀重置與調整 */
.control-btn {
  width: 32px;
  height: 32px;

  background: none;
  border: none;
  cursor: pointer;
  outline: none; /* 移除點擊時的輪廓 */
  /* 隱藏按鈕文字，用圖示呈現 */
  color: transparent;
  text-shadow: none;
}
/* 滑鼠懸停或聚焦時微微改變透明度，給予回饋 */
.control-btn:hover, .control-btn:focus {
  opacity: 0.8;
}

/* 播放/暫停按鈕的圖示：根據狀態切換 */
#playPauseBtn {
  background: center center no-repeat;
  background-size: contain;
}
#playPauseBtn.paused { 
  /* 暫停狀態時顯示播放圖示 */
  background-image: url("icon-play.webp");
}
#playPauseBtn:not(.paused) { 
  /* 播放中狀態時顯示暫停圖示 */
  background-image: url("icon-pause.webp");
}

/* 靜音按鈕的圖示切換 */
#muteBtn {
  width: 28px;
  height: 28px;
  background: center center no-repeat;
  background-size: contain;
}
#muteBtn.muted {
  background-image: url("icon-muted.webp");  /* 靜音狀態圖示 */
}
#muteBtn:not(.muted) {
  background-image: url("icon-volume.webp"); /* 有聲音時的圖示 */
}

/* 調整進度條和音量滑桿的基本外觀 */
input[type="range"] {
  -webkit-appearance: none; /* 去除預設樣式 (Chrome/Safari) */
  width: 100%;
  max-width: 150px;
  background: transparent;
  cursor: pointer;
  /* 將滑桿大致定位在中間，可視需要微調margin使其與其他元素對齊 */
  margin: 0 5px;
}

/* 軌道樣式 (WebKit瀏覽器) */
input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  background: #777;
  border-radius: 2px;
}
/* 滑塊thumb樣式 (WebKit) */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  background: #fff;
  border: 2px solid #555;
  border-radius: 50%;
  margin-top: -4px; /* 將thumb往上移，對齊軌道 */
}

/* 軌道樣式 (Firefox) */
input[type="range"]::-moz-range-track {
  height: 4px;
  background: #777;
  border-radius: 2px;
}
/* 滑塊樣式 (Firefox) */
input[type="range"]::-moz-range-thumb {
  width: 12px;
  height: 12px;
  background: #fff;
  border: 2px solid #555;
  border-radius: 50%;
}

// 當影片元資料已載入，設定進度條的最大值為影片總長度
video.addEventListener("loadedmetadata", () => {
  progressBar.max = video.duration;
  // 更新總時長顯示
  timeDisplay.textContent = formatTime(video.duration) + " / " + formatTime(video.duration);
});

// 播放過程中更新進度條與時間顯示
video.addEventListener("timeupdate", () => {
  if (!progressBar.getAttribute('max')) {
    // 某些瀏覽器可能在loadedmetadata前開始播放，保險起見再設一次
    progressBar.max = video.duration;
  }
  progressBar.value = video.currentTime;
  // 更新當前時間顯示
  timeDisplay.textContent = formatTime(video.currentTime) + " / " + formatTime(video.duration);
});

// 讓使用者拖曳進度條時跳轉播放位置
progressBar.addEventListener("input", () => {
  video.currentTime = progressBar.value;
});

function formatTime(seconds) {
  const mins = Math.floor(seconds / 60);
  const secs = Math.floor(seconds % 60);
  return mins + ":" + (secs < 10 ? "0" : "") + secs;
}

// 音量滑桿調整事件
volumeSlider.addEventListener("input", () => {
  video.volume = volumeSlider.value;
  video.muted = false; // 調整音量時自動取消靜音（如適用）
});

// 靜音按鈕點擊事件
muteBtn.addEventListener("click", () => {
  video.muted = !video.muted;  // 取反音訊靜音狀態
});

// 當音量或靜音狀態變化時，更新介面顯示
video.addEventListener("volumechange", () => {
  // 根據是否靜音，切換靜音按鈕的類別，以改變圖示
  if (video.muted || video.volume === 0) {
    muteBtn.classList.add("muted");
  } else {
    muteBtn.classList.remove("muted");
  }
  // 確保滑桿反映當前音量（如果是靜音但volume還有值，也可以選擇把slider暫時設0顯示）
  volumeSlider.value = video.volume;
});

// 播放速率選單變更事件
speedSelect.addEventListener("change", () => {
  video.playbackRate = parseFloat(speedSelect.value);
});

const stopBtn = document.getElementById("stopBtn");
stopBtn.addEventListener("click", () => {
  video.pause();
  video.currentTime = 0;
  progressBar.value = 0;
});

// 如果瀏覽器不支援全螢幕，隱藏全螢幕按鈕
if (!document.fullscreenEnabled) {
  fullscreenBtn.style.display = "none";
}

// 全螢幕按鈕點擊事件
fullscreenBtn.addEventListener("click", () => {
  if (document.fullscreenElement) {
    // 已在全螢幕狀態，則退出
    document.exitFullscreen();
  } else {
    // 非全螢幕，則進入
    videoPlayerContainer.requestFullscreen().catch(err => {
      console.log("無法進入全螢幕:", err);
    });
  }
});

const playlist = [
  "video1.mp4",
  "video2.mp4",
  "video3.mp4"
];
let currentIndex = 0;

// 當前影片播放結束時，播放下一個
video.addEventListener("ended", () => {
  currentIndex += 1;
  if (currentIndex >= playlist.length) {
    currentIndex = 0; // 播放完最後一個後，可選擇重新開始或停留在最後
  }
  video.src = playlist[currentIndex];
  video.play();
});

<select id="qualitySelect">
  <option value="movie_hd.mp4">HD 畫質</option>
  <option value="movie_sd.mp4">SD 畫質</option>
</select>

const qualitySelect = document.getElementById("qualitySelect");
qualitySelect.addEventListener("change", () => {
  const currentTime = video.currentTime;
  const isPaused = video.paused;
  video.src = qualitySelect.value;
  video.addEventListener("loadeddata", () => {
    // 切換畫質後，維持原本的進度並狀態（播放/暫停）
    video.currentTime = currentTime;
    if (!isPaused) {
      video.play();
    }
  }, { once: true });
});

<video id="videoPlayer" ...>
  <source src="movie.mp4" type="video/mp4" />
  <track kind="subtitles" src="movie-en.vtt" srclang="en" label="English" default>
  <track kind="subtitles" src="movie-fr.vtt" srclang="fr" label="Français">
</video>

<select id="subtitleSelect">
  <option value="-1">關閉字幕</option>
  <option value="0">English</option>
  <option value="1">Français</option>
</select>

const subtitleSelect = document.getElementById("subtitleSelect");
subtitleSelect.addEventListener("change", () => {
  const index = parseInt(subtitleSelect.value);
  for (let i = 0; i < video.textTracks.length; i++) {
    if (i === index) {
      video.textTracks[i].mode = "showing";
    } else {
      video.textTracks[i].mode = "disabled";
    }
  }
});