From 7a8d808b0e547cdc7f0c52790c6c02e4b4f86ff5 Mon Sep 17 00:00:00 2001 From: Matthew McClure Date: Thu, 17 Oct 2013 16:28:21 -0700 Subject: [PATCH] Close GH-784: New loading icons and class to center big play button. --- docs/setup.md | 10 +++++ docs/skins.md | 9 +++- src/css/font/vjs.eot | Bin 2900 -> 3536 bytes src/css/font/vjs.svg | 79 ++++++++++++++++++++++------------ src/css/font/vjs.ttf | Bin 2736 -> 3372 bytes src/css/font/vjs.woff | Bin 2676 -> 4228 bytes src/css/video-js.font.dev.svg | 79 ++++++++++++++++++++++------------ src/css/video-js.less | 17 +++++++- 8 files changed, 136 insertions(+), 58 deletions(-) diff --git a/docs/setup.md b/docs/setup.md index 4c6d20e3d5..979740a867 100644 --- a/docs/setup.md +++ b/docs/setup.md @@ -60,6 +60,16 @@ Otherwise include/exclude attributes, settings, sources, and tracks exactly as y ``` +By default, the big play button is located in the upper left hand corner so it doesn't cover up the interesting parts of the poster. If you'd prefer to center the big play button, you can add an additional `vjs-big-play-centered` class to your video element. For example: + +```html + +``` Alternative Setup for Dynamically Loaded HTML --------------------------------------------- diff --git a/docs/skins.md b/docs/skins.md index c64fcfbea4..c732f223c8 100644 --- a/docs/skins.md +++ b/docs/skins.md @@ -3,9 +3,15 @@ Skins The default Video.js skin is made using HTML and CSS, so there's no need to learn a complicated skinning language to update colors or even create an entirely new skin. +## Icons + New in version 4.0 is the use of font icons. All of the icons (play, pause, etc.) use the new custom font, which allows the icons to be scaled and colored just like any other text font. -The easiest way to try this out is by using the [player skin designer](http://designer.videojs.com/). +All of the icons are available as variables in the [LESS](https://github.com/videojs/video.js/blob/master/src/css/video-js.less#L87-L99) source, making it easy to replace icons (such as the loading spinner). The easiest way to try this out is by using the [player skin designer](http://designer.videojs.com/). + +![available icons](https://i.cloudup.com/wb51GGDDnJ.png) + +## Customization When you create a new skin, you can either override styles in the default skin: @@ -20,4 +26,3 @@ Or remove the 'vjs-default-skin' class from the video tag and create a new skin ``` More custom skins will be available for download soon. If you have one you like you can share it by forking [this example on CodePen.io](http://codepen.io/heff/pen/EarCt), and adding a link on the [Skins wiki page](https://github.com/videojs/video.js/wiki/Skins). - diff --git a/src/css/font/vjs.eot b/src/css/font/vjs.eot index 1b8202af8b4ab714c19e3a9b2ff85ab77b12d8c9..a075c19f0b5d7d01c0edf7741d1b733c8b123b72 100644 GIT binary patch delta 1311 zcmYjRO=ufe5T04BcP&{zYe`z){dC~^*miK19 zZ{EzCoj1EX@`Hr%AOLVIa9b$yx2`AlZ#r(b&` zU&w!dFa&_730KZ7S66@h^tUevKc=~Up?Z1s=m3QR959X+A5_9($Afb0kwwr=QR5Jf>0 zV*MDCWAgY3952#S7%dcE9AgGiFlZ-jbWQF?G1?cEV*D0Bq3_4l%c;cSXPu!5HYPJ2QmgVLKqY53f(G7pi+Bif_MT) z3o>QM-a_{jisM1dXgcYdKrBM7$#GZSv@2JYoYJg!PzPXZv-YM2v16j1VRtxMpj&GvFs9>{7T-nOjcaN?KbdzGRf}hKk#PQ6 z{F3MwFU6Uz3LS+gp}pIAl}|Yl{X>g_y^GrLS664P`H!P}Rbv)R z*6_TSS~dvxT)hiq_}0}0;`g0~chPG>5r)A6)7kUtT~=|}G9C2IQ+skwuP23l&PP5? zLJ4~@j1lqu#>E-aG@UKq{NS`{PBCKIw5DA-(~+i&O{79MUQxij57`25e|zQb?LW6KPS% zK@dIG@gm~IlU^jTMLY@KYOyN*IhjK)Qjda)CyC!C3*x|=`M%$qH}iJ({ozl3=S4SA zb8R{&wEaM+vKcK`vkxxq0Iqugj8n0hS)7EEzD#ePkB^LwyljL3u|S_#E~HA$;E#{= zKN)k`)LN<4g3A4Q=JjlTO^*g+B1fRT!b8>`q#w)`%GLG0 z4Ur_M5ybMv<&~UYsMbhE*imENWQ}p?L2q zOS+X{EXlNDCMgUXwD)l0OSHpi7XxSMtdhsxEq+2f4 zEBb(b1Q5jnZedppiZSt6JXie6sFG09@|!Cn_gwv3i`twfBbp(H+{4uYT(eKn(1jKd z9g_%RTpsldtCPWT8TTY*-D8Sg`N1>b>#D4-%!I>Xdp$0-o}`$ScY4et*5_+%r~N>k OX5T~}y(9VW|NRA#G=XIR diff --git a/src/css/font/vjs.svg b/src/css/font/vjs.svg index 2059a1f2ea..f1af0e53b5 100644 --- a/src/css/font/vjs.svg +++ b/src/css/font/vjs.svg @@ -9,32 +9,57 @@ This is a custom SVG font generated by IcoMoon. - - - - - - - - - - - - - - \ No newline at end of file diff --git a/src/css/font/vjs.ttf b/src/css/font/vjs.ttf index a5ad4685e978865705998258d5bb1855223ba388..eb2463791823ded2c3f9b1321e9fa3a331e8a5eb 100644 GIT binary patch delta 1301 zcmYjRO=ufO6n<}4-jx(tT1)aujU}(Nl2&q6Tf34XnNS?#*ovw8OI#6J2S-Yr$ck;b zjZ2;Mur6&632qNw5C&7yOG^%cnB>q~p|m}eLQBEmkeDLqC8ZZrQpm~fTWL!>%kF&N z_h#PAd-G;@`tKgs0Rf;F)`5lBOQo4tE^mHSBS9cFbY^m@1QWmkxDJR%UOSt~X1>`^ z1K>I0m5WQ&mG3_J^$X%p>0P^0y|!|6M4rI)gzWY!i`OrYexOAG*ew9=NqxS0>G0wE ze~@jT-a@@TuUBo~0vXXyLcG4Ty5{>5$BFL{pIB^Oth#RrZE~n;9}j%^>73`qzu_1|GQiItZ_}D) z&unjPVv%=sM)n(H7)F;dix+IB+4vqK0)$LR%}fcv1>*n%bMI1+X5vC%g9`OdumeL6 zwB2p#04NF6+Rz^S7fXK$-5GY%Ld_38n%hIkiJRAcT9fTV^;C(R8crfM$8BRhS z?jnaG-oh<>#`u|0W|?`!3hXpnVONcyJ^bJYcE+Yt(vR89$y)0vSODIz#o#9m*{D@BG<>GZ4Nu*ZWK z9SkdpRBC$QxZ91o(A(3_&BkJ0FJdwl8y;5GN;J|(eiG5>&~pR6US=jG4SEDbS(1{< z^F!rO$m2$ggu?My5*e2l2h0<+vM2zREy^4}hPkXrJ2azE*leNb#+a-SmN`-p>Me%3 z{-$2J5lV$xjV|jFY;V@z);~J$4~6`V)*<|#nQ5c~vKC8F5@kMF$kVw{y1Kptyb?3d zFqfrM>ueye;Eo*JL);6>(M)C{V}Ym~jO`)u%zE%D@8YipO&sOAfF!On+PK3?Mw2~h zoUki;9ByZpi{%f_Z4dOK_I1);)*A_}%`pLxTbgg9fURcPKqtVOUd*^Nv|6XU2Gkk+9!* z?Q>r>?3R9{!W%Z?QuUcHyI^0-rMv{IC!o1bpKY)38 Q;m4az&FugC9c*v?156wCf&c&j delta 617 zcmYLFPe>GT6#jlQv%BNW~QoJ3b`d)`GjZu_$UhSK}g1?!zb8WJJlr;Ny|P9sN_J_^fVV7dZmU$pj* zuu11|CKMz%tNc3+*fsXSCvXrN$dUtrdaom5ZCdh+5YUDQ&SC-&uqir3w|F7mN-a{C zG%ih1N*kopTHD$?c~qfg*`&K#XSf}=+$jotc|lOjklqdnl8pSd}lNF>~R ghO$ORq-oEv!j3V8UDd5O*4P?+{?##hc;Z_1Kk7q#k^lez diff --git a/src/css/font/vjs.woff b/src/css/font/vjs.woff index 375510e044395575f322eb0a9f4336d14cf09e14..c3f0f1d80718ac2a16e2daeaf82ce59ed76a3f06 100644 GIT binary patch delta 4154 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 delta 2611 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 C(5UqQ diff --git a/src/css/video-js.font.dev.svg b/src/css/video-js.font.dev.svg index c639bc93c8..496cf6d102 100644 --- a/src/css/video-js.font.dev.svg +++ b/src/css/video-js.font.dev.svg @@ -9,32 +9,57 @@ This is a custom SVG font generated by IcoMoon. - - - - - - - - - - - - - - \ No newline at end of file diff --git a/src/css/video-js.less b/src/css/video-js.less index 0a2b3330d3..889737dfb3 100644 --- a/src/css/video-js.less +++ b/src/css/video-js.less @@ -95,8 +95,12 @@ The control icons are from a custom font. Each icon corresponds to a character @fullscreen-exit-icon: "\e00b"; @square-icon: "\e009"; @spinner-icon: "\e00a"; +@spinner2-icon: "\e00d"; +@spinner3-icon: "\e01e"; +@spinner4-icon: "\e01f"; @subtitles-icon: "\e00c"; @captions-icon: "\e008"; +@share-icon: "\e00e"; /* Base UI Component Classes -------------------------------------------------------------------------------- @@ -460,6 +464,15 @@ easily in the skin designer. http://designer.videojs.com/ .transition(all 0.4s); } +/* Optionally center */ +.vjs-default-skin.vjs-big-play-centered .vjs-big-play-button { + @total-width: @big-play-width + (@big-play-border-width * 2); + @total-height: @big-play-height + (@big-play-border-width * 2); + + .absolute-align(center, @big-play-margin, @total-width); + .absolute-align(middle, @big-play-margin, @total-height); +} + /* Hide if controls are disabled */ .vjs-default-skin.vjs-controls-disabled .vjs-big-play-button { display: none; @@ -510,7 +523,7 @@ easily in the skin designer. http://designer.videojs.com/ top: 50%; left: 50%; - font-size: 5em; + font-size: 4em; line-height: 1; width: 1em; @@ -525,7 +538,7 @@ easily in the skin designer. http://designer.videojs.com/ } .vjs-default-skin .vjs-loading-spinner:before { - content: @spinner-icon; + content: @spinner2-icon; font-family: VideoJS; position: absolute;