![]() |
#2
少林小和尚2016-05-04 23:27
main.css 文件
@font-face { font-family: 'control'; src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMghC/L0AAAC8AAAAYGNtYXDmGQCHAAABHAAAAERnYXNwAAAAEAAAAWAAAAAIZ2x5Zs30zGwAAAFoAAACPGhlYWT+9yLHAAADpAAAADZoaGVhA+IB6wAAA9wAAAAkaG10eBEAAOAAAAQAAAAAKGxvY2ECygIcAAAEKAAAABZtYXhwAA8AIwAABEAAAAAgbmFtZTVK19EAAARgAAABOXBvc3QAAwAAAAAFnAAAACAAAwIAAZAABQAAAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAACDmBwHg/+D/4AHgACAAAAABAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEADAAAAAIAAgAAgAAACDmB//9//8AAAAg5gD//f///+EaAgADAAEAAAAAAAAAAAABAAH//wAPAAEAAAAAAAAAAAACAAA3OQEAAAAAAQBgACABoAGgAAIAABMNAWABQP7AAaDAwAAAAAIAQAAgAcABoAADAAcAABMzESMTMxEjQKCg4KCgAaD+gAGA/oAAAAABAAAABwDgAbkAEAAAEz4BHgEXAxYOASYvAz8ByQUIBwMBAQEFBQoDek8BUXgBuQUDAgkG/mEGCQIDBXgBvwF4AAAAAAIAAAAHAeABuQAQACAAABM+AR4BFwMWDgEmLwM/AQEHLwEPAT8BLwE3FzcfAQfJBQgHAwEBAQUFCgN6TwFReAEYASk3NSsBNTUBKzU3KQE3AbkFAwIJBv5hBgkCAwV4Ab8BeP7yKwE1NQErNTcpATc3ASk3AAAAAAQAAP/gAgAB4AAGAA0AFAAbAAABFScHJzcnBxcHJwc1MxM3FSM3JzcPARcjNRc3AgBFajZqRcVqNmpFwPtFwEVqNmxqRcBFagHgwEVqNmpFRWo2akXA/ntFwEVqNjZqRcBFagAEAAD/4AIAAeAABgANABQAGwAANzMVJwcnNyEXBycHNTM1IzUXNxcHJTcVIzcnNyDARWU2ZQE2ZTZlRcDARWU2Zf8ARcBFZTbAwEVlNmVlNmVFwEDARWU2ZTZFwEVlNgABAEAAIAHAAaAAAwAAEyERIUABgP6AAaD+gAAAAwAAAAACAAHQAAMADQAUAAA3IRUhJRUhNTczFTM1MyU3FyMVIzUAAgD+AAIA/gBAgICA/rCQkHBAICBgICCAQEBgkJCAgAAAAQAAAAEAAC2Uf2pfDzz1AAsCAAAAAADO6/EFAAAAAM7r8QUAAP/gAgAB4AAAAAgAAgAAAAAAAAABAAAB4P/gAAACAAAAAAACAAABAAAAAAAAAAAAAAAAAAAACgAAAAABAAAAAgAAYAIAAEACAAAAAgAAAAIAAAACAAAAAgAAQAIAAAAAAAAAAAoAGAAsAE4AigC8AOwA+gEeAAAAAQAAAAoAIQAEAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAA4ArgABAAAAAAABAA4AAAABAAAAAAACAA4ARwABAAAAAAADAA4AJAABAAAAAAAEAA4AVQABAAAAAAAFABYADgABAAAAAAAGAAcAMgABAAAAAAAKACgAYwADAAEECQABAA4AAAADAAEECQACAA4ARwADAAEECQADAA4AJAADAAEECQAEAA4AVQADAAEECQAFABYADgADAAEECQAGAA4AOQADAAEECQAKACgAYwBjAG8AbgB0AHIAbwBsAFYAZQByAHMAaQBvAG4AIAAxAC4AMABjAG8AbgB0AHIAbwBsY29udHJvbABjAG8AbgB0AHIAbwBsAFIAZQBnAHUAbABhAHIAYwBvAG4AdAByAG8AbABHAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4AAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==) format('truetype'), url(data:application/font-woff;charset=utf-8;base64,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) format('woff'); font-weight: normal; font-style: normal; } .icon { font-family: 'control'; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-pause:before { content: "\e601"; } .icon-volume-mute:before { content: "\e603"; } .icon-play:before { content: "\e600"; } .icon-volume:before { content: "\e602"; } .icon-expand:before { content: "\e604"; } .icon-contract:before { content: "\e605"; } .icon-stop:before { content: "\e606"; } .icon-upload:before { content: "\e607"; } .icon-x-sub-20:before { content: "-2.0"; } .icon-x-sub-15:before { content: "-1.5"; } .icon-x-10:before { content: "1.0"; } .icon-x-add-15:before { content: "+1.5"; } .icon-x-add-20:before { content: "+2.0"; } /* End font style */ video::-webkit-media-controls { display:none !important; } body, .pure-g [class *= "pure-u"], .pure-g-r [class *= "pure-u"] { /* Set your content font stack here: */ font-family: "微软雅黑", Arial, sans-serif; } body { background-color: #656765; } .wrapper { max-width: 800px; margin: 60px auto 0; } #player { background-color: #1b1b1b; } .player { position: relative; font-size: 0; } #controller { position: absolute; bottom: 0; left: 0; height: 30px; width: 100%; background-color: rgba(0, 0, 0, 0.8); z-index: 2147483647 } .icon { font-size: 18px; line-height: 30px; color: #999; } .icon:hover { cursor: pointer; } .icon-play, .icon-pause, .icon-stop { padding-left: 5px; } .icon-expand, .icon-contract { font-size: 16px; float: right; padding-right: 10px; } .icon-upload { float: right; padding-right: 10px; } .icon-x-sub-20 { float: right; padding-right: 10px; } .icon-x-sub-15 { float: right; padding-right: 10px; } .icon-x-10 { float: right; padding-right: 10px; } .icon-x-add-15 { float: right; padding-right: 10px; } .icon-x-add-20 { float: right; padding-right: 10px; } #file { visibility: hidden; } #timer, #volume { float: left; } #timer { font-size: 14px; font-weight: bold; line-height: 30px; color: #999; vertical-align: top; margin-right: 15px; } .controlBar { background: #999; height: 6px; -webkit-border-radius: 5px; border-radius: 5px; } .controlInner { height: 6px; background: #2187e7; -webkit-border-radius: 5px; border-radius: 5px; box-shadow: 0px 0px 6px 1px rgba(0,198,255,0.7); -webkit-transition: width 0.1s; transition: width 0.1s; } #progressBar { margin: 12px 20px 12px 5px; } #innerBar { width: 0%; /* 播放进度默认为0 */ } #volume-control, #volume-inner { display: inline-block; } #volume-control { width: 50%; margin: 12px 0 12px 3px; } #volume-inner { width: 100%; /* 音量默认100% */ } /* fix bug in linux */ .overflow-h { overflow: hidden; } pure-min.css文件 article,aside,details,figcaption,figure,footer,header,main,nav,section,summary { display:block } audio,canvas,video{ display:inline-block;*display:inline;*zoom:1 } audio:not([controls]){ display:none;height:0 } [hidden]{ display:none } html { font-size:100%;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100% } html,button,input,select,textarea{ font-family:sans-serif } body{ margin:0} a:focus{ outline:thin dotted } a:active,a:hover { outline:0 } h1{ font-size:2em;margin:.67em 0 } h2{ font-size:1.5em;margin:.83em 0 } h3{ font-size:1.17em;margin:1em 0 } h4{ font-size:1em;margin:1.33em 0 } h5{ font-size:.83em;margin:1.67em 0 } h6{ font-size:.67em;margin:2.33em 0 } abbr[title]{ border-bottom:1px dotted } b,strong{ font-weight:700 } blockquote { margin:1em 40px } dfn{ font-style:italic } hr{ -moz-box-sizing:content-box;box-sizing:content-box;height:0 } mark{ background:#ff0;color:#000 } p,pre{ margin:1em 0 } code,kbd,pre,samp { font-family:monospace,serif; _font-family:'courier new',monospace; font-size:1em } pre{ white-space:pre; white-space:pre-wrap; word-wrap:break-word } q{ quotes:none } q:before,q:after{ content:''; content:none } small { font-size:80% } sub,sup { font-size:75%; line-height:0; position:relative; vertical-align:baseline } sup{ top:-.5em } sub { bottom:-.25em } dl,menu,ol,ul{ margin:1em 0 } dd{ margin:0 0 0 40px } menu,ol,ul{ padding:0 0 0 40px } nav ul,nav ol{ list-style:none; list-style-image:none} img { border:0;-ms-interpolation-mode:bicubic } svg:not(:root){ overflow:hidden } figure{ margin:0 } form{ margin:0 } fieldset{ border:1px solid silver; margin:0 2px; padding:.35em .625em .75em } legend{ border:0; padding:0; white-space:normal; *margin-left:-7px } button,input,select,textarea{ font-size:100%; margin:0; vertical-align:baseline; *vertical-align:middle } button,input{ line-height:normal } button,select{ text-transform:none } button,html input[type=button],input[type=reset],input[type=submit] { -webkit-appearance:button; cursor:pointer; *overflow:visible } button[disabled],html input[disabled]{ cursor:default } input[type=checkbox],input[type=radio]{ box-sizing:border-box; padding:0; *height:13px; *width:13px } input[type=search]{ -webkit-appearance:textfield; -moz-box-sizing:content-box; -webkit-box-sizing:content-box; box-sizing:content-box } input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration { -webkit-appearance:none } button::-moz-focus-inner,input::-moz-focus-inner{ border:0;padding:0 } textarea { overflow:auto;vertical-align:top } table{ border-collapse:collapse; border-spacing:0 } .pure-button{ display:inline-block; *display:inline; zoom:1; line-height:normal; white-space:nowrap; vertical-align:baseline; text-align:center; cursor:pointer; -webkit-user-drag:none; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none } .pure-button::-moz-focus-inner{ padding:0;border:0 } .pure-button{ font-size:100%; *font-size:90%; *overflow:visible; padding:.5em 1.5em; color:#444; color:rgba(0,0,0,.8); *color:#444; border:1px solid #999; border:0 rgba(0,0,0,0); background-color:#E6E6E6; text-decoration:none; border-radius:2px; -webkit-transition: .1s linear -webkit-box-shadow;-moz-transition:.1s linear -moz-box-shadow;-ms-transition:.1s linear box-shadow;-o-transition:.1s linear box-shadow;transition:.1s linear box-shadow } .pure-button-hover,.pure-button:hover,.pure-button:focus{ filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#1a000000',GradientType=0); background-image:-webkit-gradient(linear,0 0,0 100%,from(transparent),color-stop(40%,rgba(0,0,0,.05)),to(rgba(0,0,0,.1))); background-image:-webkit-linear-gradient(transparent,rgba(0,0,0,.05) 40%,rgba(0,0,0,.1)); background-image:-moz-linear-gradient(top,rgba(0,0,0,.05) 0,rgba(0,0,0,.1)); background-image:-ms-linear-gradient(transparent,rgba(0,0,0,.05) 40%,rgba(0,0,0,.1)); background-image:-o-linear-gradient(transparent,rgba(0,0,0,.05) 40%,rgba(0,0,0,.1)); background-image:linear-gradient(transparent,rgba(0,0,0,.05) 40%,rgba(0,0,0,.1)) } .pure-button:focus{ outline:0 } .pure-button-active,.pure-button:active{ box-shadow:0 0 0 1px rgba(0,0,0,.15) inset,0 0 6px rgba(0,0,0,.2) inset } .pure-button[disabled],.pure-button-disabled,.pure-button-disabled:hover,.pure-button-disabled:focus,.pure-button-disabled:active{ border:0; background-image:none; filter:progid:DXImageTransform.Microsoft.gradient(enabled=false); filter:alpha(opacity=40); -khtml-opacity:.4; -moz-opacity:.4; opacity:.4; cursor:not-allowed; box-shadow:none } .pure-button-hidden{ display:none } .pure-button::-moz-focus-inner{ padding:0;border:0 } .pure-button-primary,.pure-button-selected,a.pure-button-primary,a.pure-button-selected{ background-color:#0078e7; color:#fff }.pure-form input[type=text],.pure-form input[type=password],.pure-form input[type=email],.pure-form input[type=url],.pure-form input[type=date],.pure-form input[type=month],.pure-form input[type=time],.pure-form input[type=datetime],.pure-form input[type=datetime-local],.pure-form input[type=week],.pure-form input[type=number],.pure-form input[type=search],.pure-form input[type=tel],.pure-form input[type=color],.pure-form select,.pure-form textarea{ padding:.5em .6em; display:inline-block; border:1px solid #ccc; font-size:.8em; box-shadow:inset 0 1px 3px #ddd; border-radius:4px; -webkit-transition: .3s linear border; -moz-transition:.3s linear border; -ms-transition:.3s linear border; -o-transition:.3s linear border; transition:.3s linear border; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box } .pure-form input[type=text]:focus,.pure-form input[type=password]:focus,.pure-form input[type=email]:focus,.pure-form input[type=url]:focus,.pure-form input[type=date]:focus,.pure-form input[type=month]:focus,.pure-form input[type=time]:focus,.pure-form input[type=datetime]:focus,.pure-form input[type=datetime-local]:focus,.pure-form input[type=week]:focus,.pure-form input[type=number]:focus,.pure-form input[type=search]:focus,.pure-form input[type=tel]:focus,.pure-form input[type=color]:focus,.pure-form select:focus,.pure-form textarea:focus { outline:0;outline:thin dotted \9; border-color:#129FEA}.pure-form input[type=file]:focus,.pure-form input[type=radio]:focus.pure-form input[type=checkbox]:focus { outline:thin dotted #333; outline:1px auto #129FEA } .pure-form .pure-checkbox,.pure-form .pure-radio{ margin:.5em 0;display:block } .pure-form input[type=text][disabled],.pure-form input[type=password][disabled],.pure-form input[type=email][disabled],.pure-form input[type=url][disabled],.pure-form input[type=date][disabled],.pure-form input[type=month][disabled],.pure-form input[type=time][disabled],.pure-form input[type=datetime][disabled],.pure-form input[type=datetime-local][disabled],.pure-form input[type=week][disabled],.pure-form input[type=number][disabled],.pure-form input[type=search][disabled],.pure-form input[type=tel][disabled],.pure-form input[type=color][disabled],.pure-form select[disabled],.pure-form textarea[disabled]{ cursor:not-allowed; background-color:#eaeded;color:#cad2d3 } .pure-form input[readonly],.pure-form select[readonly],.pure-form textarea[readonly] { background:#eee;color:#777; border-color:#ccc } .pure-form input:focus:invalid,.pure-form textarea:focus:invalid,.pure-form select:focus:invalid { color:#b94a48; border:1px solid #ee5f5b } .pure-form input:focus:invalid:focus,.pure-form textarea:focus:invalid:focus,.pure-form select:focus:invalid:focus { border-color:#e9322d } .pure-form input[type=file]:focus:invalid:focus,.pure-form input[type=radio]:focus:invalid:focus,.pure-form input[type=checkbox]:focus:invalid:focus{ outline-color:#e9322d } .pure-form select{ border:1px solid #ccc; background-color:#fff } .pure-form select[multiple]{ height:auto } .pure-form label{ margin:.5em 0 .2em; font-size:90% } .pure-form fieldset { margin:0; padding:.35em 0 .75em; border:0 } .pure-form legend { display:block; width:100%; padding:.3em 0; margin-bottom:.3em; font-size:125%; color:#333; border-bottom:1px solid #e5e5e5 } .pure-form-stacked input[type=text],.pure-form-stacked input[type=password],.pure-form-stacked input[type=email],.pure-form-stacked input[type=url],.pure-form-stacked input[type=date],.pure-form-stacked input[type=month],.pure-form-stacked input[type=time],.pure-form-stacked input[type=datetime],.pure-form-stacked input[type=datetime-local],.pure-form-stacked input[type=week],.pure-form-stacked input[type=number],.pure-form-stacked input[type=search],.pure-form-stacked input[type=tel],.pure-form-stacked input[type=color],.pure-form-stacked select,.pure-form-stacked label,.pure-form-stacked textarea { display:block;margin:.25em 0 } .pure-form-aligned input,.pure-form-aligned textarea,.pure-form-aligned select,.pure-form-aligned .pure-help-inline,.pure-form-message-inline { display:inline-block; *display:inline; *zoom:1; vertical-align:middle } .pure-form-aligned .pure-control-group{ margin-bottom:.5em } .pure-form-aligned .pure-control-group label { text-align:right; display:inline-block; vertical-align:middle; width:10em; margin:0 1em 0 0 } .pure-form-aligned .pure-controls{ margin:1.5em 0 0 10em } .pure-form input.pure-input-rounded,.pure-form .pure-input-rounded { border-radius:2em; padding:.5em 1em }. pure-form .pure-group fieldset{ margin-bottom:10px } .pure-form .pure-group input { display:block; padding:10px; margin:0; border-radius:0; position:relative; top:-1px } .pure-form .pure-group input:focus{ z-index:2 } .pure-form .pure-group input:first-child { top:1px; border-radius:4px 4px 0 0 } .pure-form .pure-group input:last-child { top:-2px; border-radius:0 0 4px 4px } .pure-form .pure-group button { margin:.35em 0 } .pure-form .pure-input-1 { width:100% } .pure-form .pure-input-2-3 { width:66% } .pure-form .pure-input-1-2 { width:50% } .pure-form .pure-input-1-3 { width:33% } .pure-form .pure-input-1-4 { width:25% } .pure-form .pure-help-inline,.pure-form-message-inline { display:inline-block; padding-left: .3em; color:#666; vertical-align:middle; font-size:90% } .pure-form-message { display:block; color:#666; font-size:90% } @media only screen and (max-width :480px) { .pure-form button[type=submit] { margin:.7em 0 0 } .pure-form input[type=text],.pure-form input[type=password],.pure-form input[type=email],.pure-form input[type=url],.pure-form input[type=date],.pure-form input[type=month],.pure-form input[type=time],.pure-form input[type=datetime],.pure-form input[type=datetime-local],.pure-form input[type=week],.pure-form input[type=number],.pure-form input[type=search],.pure-form input[type=tel],.pure-form input[type=color],.pure-form label { margin-bottom:.3em; display:block } .pure-group input[type=text],.pure-group input[type=password],.pure-group input[type=email],.pure-group input[type=url], .pure-group input[type=date],.pure-group input[type=month],.pure-group input[type=time],.pure-group input[type=datetime],.pure-group input[type=datetime-local],.pure-group input[type=week],.pure-group input[type=number],.pure-group input[type=search],.pure-group input[type=tel],.pure-group input[type=color] { margin-bottom:0 } .pure-form-aligned .pure-control-group label { margin-bottom:.3em; text-align:left; display:block; width:100% } .pure-form-aligned .pure-controls { margin:1.5em 0 0 } .pure-form .pure-help-inline,.pure-form-message-inline,.pure-form-message { display:block; font-size:80%; padding:.2em 0 .8em } } .pure-g { letter-spacing:-.31em; *letter-spacing:normal; *word-spacing:-.43em; text-rendering:optimizespeed; font-family:FreeSans,Arimo,"Droid Sans",Helvetica,Arial,sans-serif; display:-webkit-flex; -webkit-flex-flow:row wrap; display:-ms-flexbox; -ms-flex-flow:row wrap } .opera-only :-o-prefocus,.pure-g { word-spacing:-.43em } .pure-u { display:inline-block; *display:inline; zoom:1; letter-spacing:normal; word-spacing:normal; vertical-align:top; text-rendering:auto } .pure-g [class *="pure-u"] { font-family:sans-serif } .pure-u-1,.pure-u-1-2,.pure-u-1-3,.pure-u-2-3,.pure-u-1-4,.pure-u-3-4,.pure-u-1-5,.pure-u-2-5,.pure-u-3-5,.pure-u-4-5,.pure-u-1-6,.pure-u-5-6,.pure-u-1-8,.pure-u-3-8,.pure-u-5-8,.pure-u-7-8,.pure-u-1-12,.pure-u-5-12,.pure-u-7-12,.pure-u-11-12,.pure-u-1-24,.pure-u-5-24,.pure-u-7-24,.pure-u-11-24,.pure-u-13-24,.pure-u-17-24,.pure-u-19-24,.pure-u-23-24 { display:inline-block; *display:inline; zoom:1; letter-spacing:normal; word-spacing:normal; vertical-align:top; text-rendering:auto } .pure-u-1 { width:100% } .pure-u-1-2 { width:50%; *width:49.969% } .pure-u-1-3 { width:33.3333%; *width:33.3023% } .pure-u-2-3 { width:66.6667%; *width:66.6357% } .pure-u-1-4 { width:25%; *width:24.969% } .pure-u-3-4 { width:75%; *width:74.969% } .pure-u-1-5 { width:20%; *width:19.969% } .pure-u-2-5 { width:40%; *width:39.969% } .pure-u-3-5 { width:60%; *width:59.969% } .pure-u-4-5 { width:80%; *width:79.969% } .pure-u-1-6 { width:16.6667%; *width:16.6357% } .pure-u-5-6 { width:83.3333%; *width:83.3023% } .pure-u-1-8 { width:12.5%; *width:12.469% } .pure-u-3-8 { width:37.5%; *width:37.469% } .pure-u-5-8 { width:62.5%; *width:62.469% } .pure-u-7-8 { width:87.5%; *width:87.469% } .pure-u-1-12 { width:8.3333%; *width:8.3023% } .pure-u-5-12 { width:41.6667%; *width:41.6357% } .pure-u-7-12 { width:58.3333%; *width:58.3023% } .pure-u-11-12 { width:91.6667%; *width:91.6357% } .pure-u-1-24 { width:4.1667%; *width:4.1357% } .pure-u-5-24 { width:20.8333%; *width:20.8023% } .pure-u-7-24 { width:29.1667%; *width:29.1357% } .pure-u-11-24 { width:45.8333%; *width:45.8023% } .pure-u-13-24 { width:54.1667%; *width:54.1357% } .pure-u-17-24 { width:70.8333%; *width:70.8023% } .pure-u-19-24 { width:79.1667%; *width:79.1357% } .pure-u-23-24 { width:95.8333%; *width:95.8023% } .pure-g-r { letter-spacing:-.31em; *letter-spacing:normal; *word-spacing:-.43em; font-family:FreeSans,Arimo,"Droid Sans",Helvetica,Arial,sans-serif; display:-webkit-flex; -webkit-flex-flow:row wrap; display:-ms-flexbox; -ms-flex-flow:row wrap } .opera-only :-o-prefocus,.pure-g-r { word-spacing:-.43em } .pure-g-r [class *="pure-u"] { font-family:sans-serif } .pure-g-r img { max-width:100%;height:auto } @media (min-width:980px) { .pure-visible-phone { display:none } .pure-visible-tablet { display:none } .pure-hidden-desktop { display:none } } @media (max-width:480px) { .pure-g-r>.pure-u,.pure-g-r>[class *="pure-u-"] { width:100% } } @media (max-width:767px) { .pure-g-r>.pure-u,.pure-g-r>[class *="pure-u-"] { width:100% } .pure-hidden-phone { display:none } .pure-visible-desktop { display:none } } @media (min-width:768px) and (max-width:979px) { .pure-hidden-tablet { display:none } .pure-visible-desktop { display:none } } .pure-menu ul { position:absolute; visibility:hidden } .pure-menu.pure-menu-open { visibility:visible; z-index:2;width:100% } .pure-menu ul { left:-10000px; list-style:none; margin:0;padding:0; top:-10000px; z-index:1 } .pure-menu>ul { position:relative } .pure-menu-open>ul { left:0; top:0; visibility:visible } .pure-menu-open>ul:focus { outline:0 } .pure-menu li { position:relative } .pure-menu a,.pure-menu .pure-menu-heading { display:block; color:inherit; line-height:1.5em; padding:5px 20px; text-decoration:none; white-space:nowrap } .pure-menu.pure-menu-horizontal>.pure-menu-heading { display:inline-block; *display:inline; zoom:1; margin:0; vertical-align:middle } .pure-menu.pure-menu-horizontal>ul { display:inline-block; *display:inline; zoom:1; vertical-align:middle; height:2.4em } .pure-menu li a { padding:5px 20px } .pure-menu-can-have-children>.pure-menu-label:after { content:'\25B8'; float:right; font-family:'Lucida Grande','Lucida Sans Unicode','DejaVu Sans',sans-serif; margin-right:-20px; margin-top:-1px } .pure-menu-can-have-children>.pure-menu-label { padding-right:30px } .pure-menu-separator { background-color:#dfdfdf; display:block; height:1px; font-size:0; margin:7px 2px; overflow:hidden } .pure-menu-hidden { display:none } .pure-menu-fixed { position:fixed; top:0; left:0; width:100% } .pure-menu-horizontal li { display:inline-block; *display:inline; zoom:1; vertical-align:middle } .pure-menu-horizontal li li { display:block } .pure-menu-horizontal>.pure-menu-children>.pure-menu-can-have-children>.pure-menu-label:after { content:"\25BE" } .pure-menu-horizontal>.pure-menu-children>.pure-menu-can-have-children>.pure-menu-label { padding-right:30px } .pure-menu-horizontal li.pure-menu-separator { height:50%; width:1px; margin:0 7px } .pure-menu-horizontal li li.pure-menu-separator { height:1px; width:auto; margin:7px 2px } .pure-menu.pure-menu-open,.pure-menu.pure-menu-horizontal li .pure-menu-children { background:#fff; border:1px solid #b7b7b7 } .pure-menu.pure-menu-horizontal,.pure-menu.pure-menu-horizontal .pure-menu-heading { border:0 } .pure-menu a { border:1px solid transparent; border-left:0; border-right:0 } .pure-menu a,.pure-menu .pure-menu-can-have-children>li:after { color:#777 } .pure-menu .pure-menu-can-have-children>li:hover:after { color:#fff } .pure-menu .pure-menu-open { background:#dedede } .pure-menu li a:hover,.pure-menu li a:focus { background:#eee } .pure-menu li.pure-menu-disabled a:hover,.pure-menu li.pure-menu-disabled a:focus { background:#fff; color:#bfbfbf } .pure-menu .pure-menu-disabled>a { background-image:none; border-color:transparent; cursor:default } .pure-menu .pure-menu-disabled>a,.pure-menu .pure-menu-can-have-children.pure-menu-disabled>a:after { color:#bfbfbf } .pure-menu .pure-menu-heading { color:#565d64; text-transform:uppercase; font-size:90%; margin-top:.5em; border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:#dfdfdf } .pure-menu .pure-menu-selected a { color:#000 } .pure-menu.pure-menu-open.pure-menu-fixed { border:0; border-bottom:1px solid #b7b7b7 } .pure-paginator { letter-spacing:-.31em; *letter-spacing:normal; *word-spacing:-.43em; text-rendering:optimizespeed; list-style:none; margin:0; padding:0 } .opera-only :-o-prefocus,.pure-paginator { word-spacing:-.43em } .pure-paginator li { display:inline-block; *display:inline; zoom:1; letter-spacing:normal; word-spacing:normal; vertical-align:top; text-rendering:auto } .pure-paginator .pure-button { border-radius:0; padding:.8em 1.4em; vertical-align:top; height:1.1em } .pure-paginator .pure-button:focus,.pure-paginator .pure-button:active { outline-style:none } .pure-paginator .prev,.pure-paginator .next { color:#C0C1C3; text-shadow:0 -1px 0 rgba(0,0,0,.45) } .pure-paginator .prev { border-radius:2px 0 0 2px } .pure-paginator .next { border-radius:0 2px 2px 0 } @media (max-width:480px) { .pure-menu-horizontal { width:100% } .pure-menu-children li { display:block; border-bottom:1px solid #000 } } .pure-table { border-collapse:collapse; border-spacing:0; empty-cells:show; border:1px solid #cbcbcb } .pure-table caption { color:#000; font:italic 85%/1 arial,sans-serif; padding:1em 0; text-align:center } .pure-table td,.pure-table th { border-left:1px solid #cbcbcb; border-width:0 0 0 1px; font-size:inherit; margin:0; overflow:visible; padding:6px 12px } .pure-table td:first-child,.pure-table th:first-child { border-left-width:0 } .pure-table thead { background:#e0e0e0; color:#000; text-align:left; vertical-align:bottom } .pure-table td { background-color:transparent } .pure-table-odd td { background-color:#f2f2f2 } .pure-table-striped tr:nth-child(2n-1) td { background-color:#f2f2f2 } .pure-table-bordered td { border-bottom:1px solid #cbcbcb } .pure-table-bordered tbody>tr:last-child td,.pure-table-horizontal tbody>tr:last-child td { border-bottom-width:0 } .pure-table-horizontal td,.pure-table-horizontal th { border-width:0 0 1px; border-bottom:1px solid #cbcbcb } .pure-table-horizontal tbody>tr:last-child td { border-bottom-width:0 } 还有jquery-1.9.0.min.js文件 |
HTML 文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html5视频播放器</title>
<link rel="stylesheet" href="./css/pure-min.css">
<link rel="stylesheet" href="./css/main.css">
</head>
<body>
<div class="wrapper">
<div class="pure-g">
<div class="pure-u-1">
<div class="player">
<video id="player" width="800" height="600">您的浏览器不支持HTML5
<source src="./videos/echo-hereweare.mp4"></source>
</video>
<!--开始暂停-->
<div class="pure-g" id="controller">
<div class="pure-u-1-12">
<span id="play" class="icon icon-play"></span>
<span id="stop" class="icon icon-stop"></span>
</div>
<!--进度条-->
<div class="pure-u-5-24 overflow-h">
<div id="progressBar" class="controlBar">
<div id="innerBar" class="controlInner"></div>
</div>
</div>
<!-- 时间-->
<div class="pure-u-1-4">
<span id="timer">0:00</span>
<span id="volume" class="icon icon-volume"></span>
<div id="volume-control" class="controlBar">
<div id="volume-inner" class="controlInner"></div>
</div>
</div>
<!-- 速度-->
<div class="pure-u-4-24 overflow-h">
<span id="expand" class="icon icon-expand"></span>
<span id="upload" class="icon icon-upload"></span>
<span id="xsub15" class="icon icon-x-sub-15"></span>
<span id="x10" class="icon icon-x-10"></span>
<span id="xadd15" class="icon icon-x-add-15"></span>
<span id="xadd20" class="icon icon-x-add-20"></span>
</div>
</div>
</div>
</div>
</div>
<div class="pure-g">
<div class="pure-u-1">
<input type="file" id="file">
</div>
</div>
<div class="pure-u-4">
<div>
<form class="video_urlform">
<input type="url" size="30" class="video_urlinput" name="video_urlinput" placeholder="请输入视频地址" required="true" pattern="^.*?\.(mp4)$">
<input type="submit" class="video_playbtn" value="播放">
</form>
</div>
</div>
</div>
<script src="./js/jquery-1.9.0.min.js"></script>
<script src="./js/main.js"></script>
</body>
</html>
js文件
$(function() {
var
$player = $('#player'),
$play = $('#play'),
$stop = $('#stop'),
$volume = $('#volume'),
$expand = $('#expand'),
$upload = $('#upload'),
$video_playbtn=$('#video_playbtn');
$xsub20 = $('#xsub20');
$xsub15 = $('#xsub15');
$x10 = $('#x10');
$xadd15 = $('#xadd15');
$xadd20 = $('#xadd20');
var player = $player[0];
var
$file = $('#file'),
$timer = $('#timer');
var
$progressBar = $('#progressBar'),
$innerBar = $('#innerBar'),
$volumeControl = $('#volume-control'),
$volumeInner = $('#volume-inner');
var $video_urlinput=$('#video_urlinput');
$play
.on('click', function() {
if (player.paused) {
player.play();
$(this).removeClass('icon-play').addClass('icon-pause');
} else {
player.pause();
$(this).removeClass('icon-pause').addClass('icon-play');
}
});
$video_playbtn
.on('click',function(){
if(player.paused)
{
player.play();
$(this).removeClass('icon-play').addClass('icon-pause');
}
else {
player.pause();
$(this).removeClass('icon-pause').addClass('icon-play');
}
});
$stop
.on('click', function() {
player.currentTime = 0;
$innerBar.css('width', 0 + 'px');
});
$volume
.on('click', function() {
if (player.muted) {
player.muted = false;
$(this).removeClass('icon-volume-mute').addClass('icon-volume');
$volumeInner.css('width', 100 + '%');
} else {
player.muted = true;
$(this).removeClass('icon-volume').addClass('icon-volume-mute');
$volumeInner.css('width', 0);
}
});
$expand
.on('click', function() {
if (!document.webkitIsFullScreen) {
player.webkitRequestFullScreen(); //全屏
$(this).removeClass('icon-expand').addClass('icon-contract');
} else {
document.webkitCancelFullScreen();
$(this).removeClass('icon-contract').addClass('icon-expand');
}
});
$upload
.on('click', function() {
$file.trigger('click');
});
$xsub20
.on('click', function() {
player.playbackRate = 0.25;
console.log("xsub20");
});
$xsub15
.on('click', function() {
player.playbackRate = 0.5;
console.log("xsub15");
});
$x10
.on('click', function() {
player.playbackRate = 1.0;
console.log("x10");
});
$xadd15
.on('click', function() {
player.playbackRate = 1.5;
console.log("xadd15");
});
$xadd20
.on('click', function() {
player.playbackRate = 2.0;
console.log("xadd20");
});
$file
.on('change', function(e) {
var file = e.target.files[0],
canPlayType = player.canPlayType(file.type);
if (canPlayType === 'maybe' || canPlayType === 'probably') {
src = window.URL.createObjectURL(file);
player.src = src;
$play.removeClass('icon-pause').addClass('icon-play'); //新打开的视频处于paused状态
player.onload = function() {
window.URL.revokeObjectURL(src);
};
} else {
alert("浏览器不支持您选择的文件格式");
}
});
$video_urlinput
.on('click',function(e){
var video_urlinput= e.target.files[0],
canPlayType=player.canPlayType(video_urlinput.type);
if(canPlayType === 'maybe' || canPlayType === 'probably')
{
src= window.URL.createObjectURL(video_urlinput);
player.src=src;
$play.removeClass('icon-pause').addClass('icon-play'); //新打开的视频处于paused状态
//player.onload = function(){
//}
}
}
);
$player
.on('timeupdate', function() {
//秒数转换
var time = player.currentTime.toFixed(1),
minutes = Math.floor((time / 60) % 60),
seconds = Math.floor(time % 60);
if (seconds < 10) {
seconds = '0' + seconds;
}
$timer.text(minutes + ':' + seconds);
var w = $progressBar.width();
if (player.duration) {
var per = (player.currentTime / player.duration).toFixed(3);
window.per = per;
} else {
per = 0;
}
$innerBar.css('width', (w * per).toFixed(0) + 'px');
if (player.ended) { //播放完毕
$play.removeClass('icon-pause').addClass('icon-play');
}
});
$progressBar
.on('click', function(e) {
var w = $(this).width(),
x = e.offsetX;
window.per = (x / w).toFixed(3); //全局变量
var duration = player.duration;
player.currentTime = (duration * window.per).toFixed(0);
$innerBar.css('width', x + 'px');
});
$volumeControl
.on('click', function(e) {
var w = $(this).width(),
x = e.offsetX;
window.vol = (x / w).toFixed(1); //全局变量
player.volume = window.vol;
$volumeInner.css('width', x + 'px');
});
$(document)
.on('webkitfullscreenchange', function(e) {
var w = $progressBar.width(),
w1 = $volumeControl.width();
if (window.per) {
$innerBar.css('width', (window.per * w).toFixed(0) + 'px');
}
if (window.vol) {
$volumeInner.css('width', (window.vol * w1).toFixed(0) + 'px')
}
});
});
用的开发工具是IDEA