22 Dec, 2025
客製化影片播放器 Media Chrome 使用指南 (二)
上一篇教學簡單的介紹了 Media Chrome 以及基礎的使用還有它的 UI 系統，接下來我們要來介紹一下它的CSS變數與狀態屬性！
CSS 變數
Media Chrome 提供了完整的 CSS Variables 讓你輕鬆客製化樣式。
media-controller {
/* 全域色彩 */
--media-primary-color: #ffffff;
--media-secondary-color: rgba(0, 0, 0, 0.7);
/* 圖示與文字 */
--media-icon-color: white;
--media-text-color: white;
--media-font-size: 14px;
/* 控制元件 */
--media-control-background: transparent;
--media-control-hover-background: rgba(255, 255, 255, 0.2);
--media-control-height: 24px;
--media-control-padding: 10px;
/* 進度條 */
--media-range-track-height: 4px;
--media-range-track-background: rgba(255, 255, 255, 0.3);
--media-range-bar-color: #ff0000;
--media-range-thumb-background: white;
/* 預覽 */
--media-preview-background: rgba(0, 0, 0, 0.8);
--media-preview-border-radius: 4px;
/* 過渡動畫 */
--media-control-transition-in: opacity 0.25s;
--media-control-transition-out: opacity 1s;
}不過為了讓大家更清楚每個變數分別的意思，我整理了一下的表格給大家對照一下
| 預設值 | 說明 | |
|---|---|---|
--media-primary-color |
#ffffff |
主色（前景色），影響圖示、文字等元素 |
--media-secondary-color |
rgba(0,0,0,0.6) |
| 預設值 | 說明 | |
|---|---|---|
--media-icon-color |
繼承 --media-primary-color |
圖示顏色 |
--media-text-color |
繼承 --media-primary-color |
文字顏色 |
--media-font-size |
14px |
文字大小 |
--media-font-family |
Arial, sans-serif |
| 預設值 | 說明 | |
|---|---|---|
--media-control-background |
繼承 --media-secondary-color |
控制元件背景色 |
--media-control-hover-background |
rgba(255,255,255,0.2) |
控制元件懸停背景色 |
--media-control-height |
24px |
控制元件高度 |
--media-control-padding |
10px |
控制元件內距 |
--media-control-display |
inline-flex |
控制元件顯示方式（可設 none |
| 變數名稱 | 預設值 | 說明 |
|---|---|---|
--media-range-track-height |
4px |
進度條軌道高度 |
--media-range-track-background |
rgba(255,255,255,0.3) |
進度條軌道背景色（未播放部分） |
--media-range-bar-color |
繼承 --media-primary-color |
進度條已播放部分顏色 |
--media-range-thumb-background |
#ffffff |
進度條拖曳圓點背景色 |
--media-range-thumb-width |
10px |
進度條拖曳圓點寬度 |
--media-range-thumb-height |
10px |
進度條拖曳圓點高度 |
--media-range-thumb-border-radius |
10px |
進度條拖曳圓點圓角 |
--media-range-track-border-radius |
1px |
進度條軌道圓角 |
| 變數名稱 | 預設值 | 說明 |
|---|---|---|
--media-preview-background |
繼承 --media-secondary-color |
預覽框背景色 |
--media-preview-border-radius |
4px |
預覽框圓角 |
--media-preview-time-background |
rgba(0,0,0,0.7) |
時間預覽文字背景 |
--media-preview-time-text-color |
#ffffff |
時間預覽文字顏色 |
--media-thumbnail-preview-max-height |
160px |
縮圖預覽最大高度 |
--media-thumbnail-preview-min-height |
80px |
縮圖預覽最小高度 |
| 變數名稱 | 預設值 | 說明 |
|---|---|---|
--media-control-transition-in |
opacity 0.25s |
控制列顯示時的過渡效果 |
--media-control-transition-out |
opacity 1s |
控制列隱藏時的過渡效果 |
| 變數名稱 | 預設值 | 說明 |
|---|---|---|
--media-background-color |
#000000 |
播放器容器背景色 |
--media-slot-display |
contents |
媒體 slot 顯示方式 |
| 變數名稱 | 預設值 | 說明 |
|---|---|---|
--media-loading-indicator-opacity |
1 |
loading 透明度 |
--media-loading-indicator-transition-delay |
500ms |
loading 顯示延遲 |
在一些簡單的樣式處理上面基本上只要去更改 CSS 變數，就可以去更換你想要的樣式顏色或是寬高，非常的簡單明瞭!
舉個簡單的例子來說，我希望進度條的顏色符合我當前品牌的顏色，我可以這樣改！
media-controller{
--media-range-bar-color: #e84989;
--media-range-track-height: 15px;
--media-range-thumb-width: 20px;
--media-range-thumb-height: 20px;
--media-range-track-border-radius: 15px;
--media-range-thumb-background: yellow;
}
這樣是不是看起來簡單多了~ 但實際上這些還不是全部的 CSS 變數，每一個按鈕每一個元件裡面其實還有一些很細的變數可以使用，不過這邊就不全部列出來了，有興趣的朋友可以再去官網查！
除了 CSS 變數外，還有一個東西要介紹就是狀態屬性！
什麼是狀態屬性？
HTML 屬性
| 屬性名稱 | 說明 | 範例值 |
|---|---|---|
mediapaused |
影片是否暫停 | 存在即表示暫停中 |
medialoading |
是否正在載入 | 存在即表示載入中 |
mediaended |
是否播放結束 | 存在即表示已結束 |
mediamuted |
是否靜音 | 存在即表示靜音中 |
mediavolumelevel |
音量等級 | high, medium, low, off |
mediacurrenttime |
當前播放時間 | 123.45（秒） |
mediaduration |
影片總長度 | 600（秒） |
mediabuffered |
緩衝進度 | 時間範圍 |
mediaisfulltscreen |
是否全螢幕 | 存在即表示全螢幕 |
mediaispip |
是否子母畫面 | 存在即表示 PiP 模式 |
mediaplaybackrate |
播放速度 | 1, 1.5, 2 |
mediasubtitleslist |
可用字幕列表 | 字幕軌道資訊 |
mediasubtitlesshowing |
是否顯示字幕 | 存在即表示顯示中 |
mediastreamtype |
串流類型 | live, on-demand |
mediatargetlivewindow |
直播窗口 | 數值 |
mediahasplayed |
是否已開始播放過 | 存在即表示已播放過 |
userinactive |
使用者是否閒置 | 存在即表示閒置中 |
mediaairplayunavailable |
AirPlay 是否可用 | 存在即表示不可用 |
mediavolumeunavailable |
音量控制是否可用 | 存在即表示不可用 |
我們可以看到其實在整個影片在播放的時候存在很多的狀態，這些狀態都有可能在各種不同的階段要去做樣式的調整，大家一定要稍微筆記一下！
舉個簡單的例子，假如說我希望影片在暫停的時候，buttom 顏色要是紅色的該怎麼做？
/* 暫停時改變播放按鈕的顏色 */
media-play-button[mediapaused] {
--media-icon-color: red;
}
所以我只要暫停影片我的播放按鈕就會變成紅色了！
除了上述講的那些播放狀態屬性．<media-controller> 會根據播放器寬度自動添加以下這些屬性：
| 預設觸發寬度 | |
|---|---|
breakpointsm |
≥ 384px |
breakpointmd |
≥ 576px |
breakpointlg |
≥ 768px |
breakpointxl |
舉個簡單的例子我們來看！
案例一：假設我們需要在行動裝置隱藏部分按鈕，我們可以這樣做...
/* 預設隱藏這些行動裝置螢幕尺寸的按鈕 */
media-playback-rate-button,
media-pip-button,
media-captions-button {
display: none;
}
/* 桌機螢幕尺寸以上才顯示 */
media-controller[breakpointxl] media-playback-rate-button,
media-controller[breakpointxl] media-pip-button,
media-controller[breakpointxl] media-captions-button {
display: inline-flex;
}
案例二：假設想要依照不同解析度切換不同的控制列項目，我們可以這樣做...
/* 預設顯示行動版，隱藏桌面版 */
.mobile-controls {
display: flex;
}
.desktop-controls {
display: none;
}
/* 桌機螢幕以上切換 */
media-controller[breakpointmd] .mobile-controls {
display: none;
}
media-controller[breakpointmd] .desktop-controls {
display: flex;
}<media-controller>
<video slot="media" src="video.mp4"></video>
<!-- 行動版控制列 -->
<media-control-bar class="mobile-controls">
<media-play-button></media-play-button>
<media-time-range></media-time-range>
<media-fullscreen-button></media-fullscreen-button>
</media-control-bar>
<!-- 桌面版控制列 -->
<media-control-bar class="desktop-controls">
<media-play-button></media-play-button>
<media-seek-backward-button></media-seek-backward-button>
<media-seek-forward-button></media-seek-forward-button>
<media-mute-button></media-mute-button>
<media-volume-range></media-volume-range>
<media-time-range></media-time-range>
<media-playback-rate-button></media-playback-rate-button>
<media-pip-button></media-pip-button>
<media-fullscreen-button></media-fullscreen-button>
</media-control-bar>
</media-controller>假如如果 Breakpoint 的解析度數值不是自己要的？
預設的數值有可能不是自己要的，我們也可以進行客製化的修改！
<!-- 自訂斷點：sm 在 300px，md 在 500px -->
<media-controller breakpoints="sm:300 md:500 lg:700 xl:900">
<!-- ... -->
</media-controller>透過這個章節能讓大家更清楚了解到 Media Chrome 在 UI 的樣式調整上面有完整的規劃以及高度的客製化的手段！
如果你還沒有看過上一篇的朋友可以先看上一篇的教學會更清楚整個的運作
https://thecodingpro.com/b/il79n4vkDldUsATiHUBe
好了～本次的介紹就到這邊告一段落，後面的教學我會再來慢慢整理 Media Chrome 的其他功能，敬請期待！