今天來看如何自訂<video>介面

作為前端工程師，我們都知道：各瀏覽器預設 HTML 的樣式不同，所以在處理網頁切板時，通常會引入reset.css 或 normalize.css 來幫我們統一各瀏覽器樣式，接著才撰寫 CSS 去修改 HTML 。

然而，不管是 reset.css 或 normalize.css 都沒有去修改到<video>樣式，這就是前端再處理<video>麻煩的地方：播放器在各瀏覽器預設樣式的不同。
當然我們可選擇使用別人寫好的播放器 Plugin、Library來統一風格，或是乾脆自己刻一個。這裡我們來介紹一般如何自訂播放器介面的流程，後續 CSS 的部分有興趣的人可以自己嘗試：

1.隱藏原生介面

<video> 標籤若是帶有 controls 屬性，就會顯示出原生的控制介面 UI，
若是對進入全螢幕模式，對應的UI介面也會出現。

所以為了不顯示原生的操控介面，這裡我們不給<video> controls 屬性。而是自己在<video>下方用 HTML 刻一個控制介面。

  <video>
        <source src="http://www.html5videoplayer.net/videos/toystory.mp4" type="video/mp4" />
  </video>

2.新增操控介面的HTML

在<video> 下方新增 HTML，這裡取名為<div id="controls"> 並在裏頭自訂按鈕。

<video>...<video>

<div id="controls">
   <button class="player-btn" id="player-play">►</button>
   <input type="range" class="player-sound" min="0" max="1" value="1" step="0.1" >
   <button class="player-btn" data-skip="-4">快進4秒</button>
   <button class="player-btn" data-skip="4">後退4秒</button>
   <button class="player-btn fullscreen">全螢幕</button>
</div>

3. 將controls標籤與video標籤放在同個標籤內

這裡將<video>與<div id="controls">一同放到<div class="myplayer">內

<div class="myplayer">
<video>...<video>
<div id="controls">...</div>
</div>

這麼做的目的，是為了讓操控介面能出現在影片區塊下方，出現方法也很簡單，myplayer設CSS相對定位，controls設CSS絕對定位即可。

慢慢開始有點樣子了，接著處理邏輯。

4. 將播放器事件綁在自訂 controls標籤 上

const myplayer = document.getElementById('myplayer')
const video = document.getElementById('video');
const controls = document.getElementById('controls');
const playerPlay = document.getElementById('player-play');
const dataSkip = myplayer.querySelectorAll('[data-skip]');
const ranges = myplayer.querySelectorAll('.player-sound');
const fullscreen = myplayer.querySelector('.fullscreen');

// 切換播放, 暫停
function togglePlay(e) {
	video[video.paused ? 'play' : 'pause' ]();
}
// 全螢幕
function toggleScreen() {
	if(!document.webkitFullscreenElement) {
		myplayer.webkitRequestFullScreen();
	} else {
		document.webkitExitFullscreen();
	}
}
// 快進
function skip() {
	video.currentTime += parseFloat(this.dataset.skip);
}

// 音量
function handleRangeUpdate() {
	video[this.name] = this.value;
}

// 更新播放按鈕ICON
function updateButton() {
	const icon = this.paused ? '►' : '❚❚';
	playerToggle.textContent = icon;
}
// 監聽
video.addEventListener('click', togglePlay);
video.addEventListener('play', updateButton);
video.addEventListener('pause', updateButton);
playerPlay.addEventListener('click', togglePlay);
fullscreen.addEventListener('click', toggleScreen);
dataSkip.forEach( button => button.addEventListener('click', skip) );
ranges.forEach(range => {
	range.addEventListener('input', handleRangeUpdate);
})

7. 最後修改樣式

實務上當然不會用id選擇器來改CSS，這裡只是舉例而以：

#myplayer{
  width: 400px; /* 這裡外層寫死成400px 實際寬度請自訂*/
  position: relative;
}
video {
    width: 100%; /*撐滿整個 myplayer 的寬度*/
}
#controls{           
  position: absolute;
  bottom:0;
  height: 40px;
}
.myplayer:fullscreen {
  max-width: none;
  width: 100%;
}

.myplayer:-webkit-full-screen {
  max-width: none;
  width: 100%;
}

其實自訂介面和樣式的過程就這樣而已，在撰寫完此篇時，有前端朋友回饋 JS30 有類似的部分，有興趣的同學也可以參考 JS30 第11天。