今天開始分享一篇酷炫播放器製做,包括界面+JS。整個案例很是相似騰訊視頻,優酷視頻,愛奇藝視頻。咱們先看一下效果圖,而後這篇文章主要界面篇javascript
是否是效果比較酷炫,那麼我接着來給你們說一下這個界面設計思路css
1. 植入BootStrap框架html
2. 頁面主體區域分爲三大塊:播放標題,播放內容,播放控制條java
由於整個界面你們要想了解整個界面+樣式的實現,你們能夠將下面的代碼拷貝出來運行jquery
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" type="text/css" href="css/reset.css"/> <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css"/> <link rel="stylesheet" type="text/css" href="css/willesplay01.css"/> <script type="text/javascript" src="js/jquery-1.11.3.min.js" charset="UTF-8"></script> <script type="text/javascript" src="js/willesPlay01.js" charset="UTF-8"></script> </head> <body> <div class="container"> <div class="row"> <div class="col-md-12"> <!-- 做者:caleb_520@163.com 時間:2018-04-04 描述:播放器區域 定位:position:relative --> <div id="willesPlay"> <!-- 做者:caleb_520@163.com 時間:2018-04-04 描述:播放器頭部信息 --> <div class="playHeader"> <div class="videoName">Tara - 懂的那份感受</div> </div> <!-- 做者:caleb_520@163.com 時間:2018-04-04 描述:播放主體區域 定位:position:relative --> <div class="playContent"> <video width="100%" height="100%" id="playVideo"> <source src="video/video" type="video/mp4"></source> 當前瀏覽器不支持 video直接播放,點擊這裏下載視頻: <a href="#">下載視頻</a> </video> </div> <!-- 做者:caleb_520@163.com 時間:2018-04-04 描述:播放器控制條 --> <div class="playControll"> <div class="playPause playIcon"></div> <!-- 做者:caleb_520@163.com 時間:2018-04-04 描述:播放器時間軸 --> <div class="timebar"> <span class="currentTime">0:00:00</span> <div class="progress"> <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width:0%"></div> </div> <span class="duration">0:00:0</span> </div> <!-- 做者:caleb_520@163.com 時間:2018-04-04 描述:音量控制,全屏播放 定位:position:relative --> <div class="otherControl"> <span class="volume glyphicon glyphicon-volume-down"></span> <span class="fullScreen glyphicon glyphicon-fullscreen"></span> <div class="volumeBar"> <div class="volumewrap"> <div class="progress"> <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width: 8px; height: 40%;"></div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div style="text-align:center;clear:both;"></div> </body> </html>
@charset "utf-8"; html,body { width: 100%; height: 100%; background: #EF6A6C; } a:hover { text-decoration: none; } /* 播放器 */ #willesPlay { margin: 100px auto; box-shadow: 0px 0px 15px #333333; position: relative; } /* 播放器頭部 */ #willesPlay .playHeader { width: 100%; height: 48px; background: url(../images/playheader.jpg) repeat-x; border-radius: 3px 3px 0px 0px; } /* 播放器頭部視頻名稱 */ #willesPlay .playHeader .videoName { font-size: 16px; width: 400px; height: 48px; line-height: 48px; text-align: center; margin: 0 auto; color: #7A7F82; } /* 播放器主體區 */ #willesPlay .playContent { position: relative; height: auto; overflow: hidden; background: #000; cursor: pointer; } /* 播放器控制條 */ #willesPlay .playControll { position: absolute; z-index: 2147483650; width: 100%; height: 48px; bottom: -48px; background: url(../images/playheader.jpg) repeat-x; border-radius: 0px 0px 3px 3px; } /* 播放器控制條 暫停 */ #willesPlay .playControll .playPause { float: left; width: 20px; height: 25px; background: url(../images/control_01.png) 0px 0px no-repeat; margin: 11px 0px 0px 12px; cursor: pointer; } /* 播放器控制條 開始 */ #willesPlay .playControll .playIcon { background-position: 0px -32px; } /* 播放器時間軸區域 */ #willesPlay .playControll .timebar { float: left; width: calc(100% - 145px); line-height: 48px; overflow: hidden; margin: 0 auto; margin: 0px 0px 0px 20px; } /* 播放器進度條 */ #willesPlay .playControll .timebar .progress { float: left; width: 80%; margin: 19px 5px; height: 10px; cursor: pointer; } /* 播放器控制條時間軸 span */ #willesPlay .playControll .timebar span { float: left; width: 8%; text-align: center; } /* 播放器全屏播放 */ #willesPlay .otherControl { float: right; position: relative; } #willesPlay .otherControl span { display: inline-block; width: 30px; height: 30px; text-align: center; line-height: 30px; vertical-align: middle; font-size: 20px; margin: 9px 7px; cursor: pointer; } #willesPlay .otherControl span:nth-child(1) { font-size: 28px; color: #EF6A6C; } #willesPlay .otherControl span:nth-child(2) { color: #919597; } /* 播放器音量 */ #willesPlay .otherControl .volumeBar { display: none; position: absolute; top: -110px; left: 4px; width: 26px; height: 100px; background: #F1F2F2; border-radius: 4px; cursor: pointer; } /* 播放器音量 */ #willesPlay .otherControl .volumeBar:after { content: ""; display: block; position: absolute; bottom: -7px; left: 5px; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 8px solid #F1F2F2; } #willesPlay .otherControl .volumeBar .volumewrap { background: #A2A7AA; width: 8px; height: 80px; position: absolute; bottom: 10px; left: 9px; border-radius: 4px; } #willesPlay .otherControl .volumeBar .progress{ background: none; } #willesPlay .otherControl .volumeBar .progress-bar{ position: absolute; bottom: 0px; left: 0px; border-radius: 4px; } video::-webkit-media-controls-enclosure { /*禁用播放器控制欄的樣式*/ display: none !important; } :-webkit-full-screen{}