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

  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
我是小米
我是小米: 痛苦又快樂的網頁設計師,熱愛設計又總是被摧殘…喜歡旅行但也喜歡宅在家…被迫不斷學習新東西只好假裝自己很好學,擁有被虐體質所以離不開這條路~只好硬著頭皮繼續往前爬行…

相關文章

CSS教學-CSS選擇器套用樣式的優先權順序

CSS教學-CSS選擇器套用樣式的優先權順序

Retina高解析網頁圖片怎麼透過CSS3 media設定,讓Apple官網告訴你

Retina高解析網頁圖片怎麼透過CSS3 media設定,讓Apple官網告訴你

「CSS3:target選擇器」免程式!純CSS就可實現Tab頁籤式的互動切換

「CSS3:target選擇器」免程式!純CSS就可實現Tab頁籤式的互動切換

利用CSS3偽類選擇器:checked,實作出Toggle開合選單效果

利用CSS3偽類選擇器:checked,實作出Toggle開合選單效果

「Lazy Load CSS」非同步載入CSS,當網頁使用雲端字型更順暢

「Lazy Load CSS」非同步載入CSS,當網頁使用雲端字型更順暢





回應本篇 »

(姓名)*必填
(信箱)*必填
(網站)

※PS: 因梅干時間有限,教學網中所分享的主題繁多(所遇狀況也很多),可能無法一一回答各位,不便之處還請見諒。
※PS: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。

共 2 梅留言

  • 第2梅
    Kay 說道:

    範例檔案無法下載

    回應:
    剛測試可正常下載,再請試試看
  • 第1梅
    超級efly 說道:

    前來支持一下~非常實用!感謝分享!!話說問一下您網頁左側的「推薦」、「+1」等按鈕是怎麼實現的呢? =D

    回應:
    那只是單純的分享按鈕而已

近期講座

近期講座

更多講座