CSS, CSS3, 網頁設計

透過CSS3自訂「HTML5 Video」播放控製鈕樣式

2014/11/25
  html5 有 video 標籤可以使用以後,對很多前端設計師來說應該很方便,不特別設定的話就會直接套用瀏覽器內建的control bar,但為了美觀,當然也會去找介面漂亮的外掛比如 video.js 來增加華麗及美觀度,但有時候只要簡單的兩三個按鈕好像不一定要弄的那麼複雜,也省的loading太重,參考了w3c的一些源文件之後,找了最簡單的方式,只要加幾個 html 標籤,以及修改 css 樣式就可以了,對害怕 JS 的設計師來說應該再簡單不過了!

首先在 html 裡面放入 video 標籤,並將影片來源放到 source src 中,注意檔案格式在 type 的地方也要相對應,並注意在 <video> 標籤內不要放入controls,不然會跑出瀏覽器本身內建的播放介面喔!
<video id="demo" autoplay loop>
	<source src="https://mi-o.me/html_demo/video/big_buck_bunny.mp4" type="video/mp4" />
	<source src="https://mi-o.me/html_demo/video/big_buck_bunny.webm" type="video/webm" />
	<source src="https://mi-o.me/html_demo/video/big_buck_bunny.ogv" type="video/ogg" />
</video>

接著再將下面這些控制按鈕的標籤放到 html 中,button 的 ID 表示按鈕的功能,音量調整的部份使用 volume+=0.5 跟 volume-=0.5,也可以自己調整按一次要增加或降低音量的幅度,接下來就可以設定按鈕樣式囉!
<div id="buttonbar">
	<button id="play" onclick="document.getElementById('demo').play()"></button>
	<button id="pause" onclick="document.getElementById('demo').pause()"></button>
	<button id="volumeUp" onclick="document.getElementById('demo').volume+=0.5"></button>
	<button id="volumeDown" onclick="document.getElementById('demo').volume-=0.5"></button>
	<button id="volumeOff" onclick="document.getElementById('demo').volume=0"></button>   
</div>

使用 icon 符號來做為播放按鈕會更漂亮,不要忘記把 awesome 字型下載下來放到你的 css 資料夾中,並且在 html 的 <head> 中引用 css
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet">

接下來定義style樣式
#video-wrap {
	width: 500px;
	position: relative;
}
video {
	width: 100%;
	height: auto;
}
#buttonbar {
	position: absolute;
	bottom: 20px;
	right: 20px;
}
button {
	margin: 5px 0 0;
	border: 0;
	color: #fff;
	background: #f5246d;
	font: .8em FontAwesome;
	cursor: pointer;
	width: 26px;
	text-align: center;
	line-height: 22px;
	border-radius: 100%;
}
#play::before {
	content: "\f04b";
	font-size: .8em;
}
#pause::before {
	content: "\f04c";
	font-size: .8em;
}
#volumeUp::before {
	content: "\f028";
}
#volumeDown::before {
	content: "\f027";
}
#volumeOff::before {
	content: "\f026";
}

就完成囉!

Demo1:

Demo2:

Demo1 | Demo2 | Download
資料參考:
http://www.w3.org/standards/webdesign/audiovideo
video版權:
video版權屬於Big Buck Bunny.創用cc