Blogtrottr
♣梅問題‧教學網【Minwt】♣
3C|設計|攝影|旅遊 資訊網 
透過CSS3自訂「HTML5 Video」控製鈕樣式
Nov 25th 2014, 10:12, by 我是小米

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

首先在 html 裡面放入 video 標籤,並將影片來源放到 source src 中,注意檔案格式在 type 的地方也要相對應,並注意在 標籤內不要放入controls,不然會跑出瀏覽器本身內建的播放介面喔!
1 2 3 4 5


接著再將下面這些控制按鈕的標籤放到 html 中,button 的 ID 表示按鈕的功能,音量調整的部份使用 volume+=0.5 跟 volume-=0.5,也可以自己調整按一次要增加或降低音量的幅度,接下來就可以設定按鈕樣式囉!
1 2 3 4 5 6 7

使用 icon 符號來做為播放按鈕會更漂亮,不要忘記把 awesome 字型下載下來放到你的 css 資料夾中,並且在 html 的 中引用 css
1


接下來定義style樣式
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42
#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

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



引用網址: ※如有發現掉圖或檔案無法下載,請由回應區留言告知,將會盡速處理!謝謝。
※本站採用CC授權請勿全文轉貼本站文章,歡迎「部份引用」與介紹,並註明出處,謝謝。

文章標籤:

This entry passed through the Full-Text RSS service - if this is your content and you're reading it on someone else's site, please read the FAQ at fivefilters.org/content-only/faq.php#publishers.

Media files:
big_buck_bunny.mp4 (video/mp4, 5.3 MB)
You are receiving this email because you subscribed to this feed at blogtrottr.com.

If you no longer wish to receive these emails, you can unsubscribe from this feed, or manage all your subscriptions
arrow
arrow
    全站熱搜
    創作者介紹
    創作者 xals2q 的頭像
    xals2q

    2015花千骨線上看tv 2016花千骨 花千骨線上看drama q 花千骨線上看drama 仙俠奇緣之花千骨線上看 花千骨線上看tv543 電視劇花千骨線上看 花千骨線上看第一集

    xals2q 發表在 痞客邦 留言(0) 人氣()