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

相關文章

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

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

CSS3-clip-path繪製不規則形遮色片線上產生器

CSS3-clip-path繪製不規則形遮色片線上產生器

CSS教學-hover滑入圖片時,加入CSS3動畫特效「淡入淡出」變換圖片

CSS教學-hover滑入圖片時,加入CSS3動畫特效「淡入淡出」變換圖片

將ICON Fonts向量圖示字型引用到CSS中(Font Awesome為例)

將ICON Fonts向量圖示字型引用到CSS中(Font Awesome為例)

CSS3動畫hover套件,各種常用的互動特效直接套用

CSS3動畫hover套件,各種常用的互動特效直接套用





回應本篇 »

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

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

共 1 梅留言

  • 第1梅
    超級efly 說道:

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

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