JS 30 challenge - 11 心得

Demo & Github

DEMO

全螢幕

function handleFullScreen() {
	if (video.requestFullscreen) {
		video.requestFullscreen();
	}
}

另外去 font-awesome 中找尋全螢幕的 icon 放到 html 中， 記得要在 head 中插入 link

<link
	href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css"
	rel="stylesheet"
/>

<button class="player__button fullscreen">
	<i class="icon-fullscreen"></i>
</button>

當使用者點擊時，就會達到全螢幕的效果，另外瀏覽器有預設的全螢幕效果，所以不需要另外設定退出全螢幕的 Code。

###鍵盤偵測

function eventKeydown(e) {
	switch (e.keyCode) {
		//whit space
		case 32:
			togglePlay();
			break;
		//key left
		case 37:
			video.currentTime -= 15;
			break;
		//key right
		case 39:
			video.currentTime += 30;
			break;
	}
}
document.addEventListener("keydown", eventKeydown);

這邊讓空白鍵可以切換播放功能，並且左右鍵可以快轉或倒退影片。