vue-player/vue-player.min.css

A Vue2 H5 video player 基于vue2的H5播放器

@import url(//at.alicdn.com/t/font_ckl7nljllpst6gvi.css);.player[data-v-2a8b4d5c]{position:relative;background-color:#000;overflow:hidden;width:720px;height:480px;color:#aaa;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.player[data-v-2a8b4d5c]:-webkit-full-screen{position:fixed!important;top:0;right:0;bottom:0;left:0;margin:0;width:100%!important;height:100%!important;box-sizing:border-box;object-fit:contain;background-color:#000}.player .player__mask[data-v-2a8b4d5c]{position:absolute;left:0;right:0;top:0;bottom:0;background:transparent;z-index:1}.player .player__mask .controls[data-v-2a8b4d5c]{display:-webkit-box;display:-ms-flexbox;display:flex;position:absolute;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;left:0;bottom:-40px;padding:0 15px;width:100%;height:40px;line-height:40px;z-index:4;background:rgba(26,26,26,.8);transition:all .2s ease-in-out}.player .player__mask .controls.controls--show[data-v-2a8b4d5c],.player .player__mask .controls[data-v-2a8b4d5c]:hover{bottom:0}.player .player__mask .controls .controls-box[data-v-2a8b4d5c]{display:-webkit-box;display:-ms-flexbox;display:flex}.player .player__mask .controls .controls-box .controls-item[data-v-2a8b4d5c]{display:-webkit-box;display:-ms-flexbox;display:flex;margin:0 10px;font-weight:300}.player .player__mask .controls .controls-box .controls-item .controls-item__button[data-v-2a8b4d5c]{cursor:pointer;transition:all .2s ease-in}.player .player__mask .controls .controls-box .controls-item .controls-item__button[data-v-2a8b4d5c]:hover{color:#31bedb}.player .player__mask .controls .controls-box .controls-item .controls-item__button i[data-v-2a8b4d5c]{font-size:18px}.player .player__mask .controls .controls-box .controls-item .controls-item__progress[data-v-2a8b4d5c]{position:relative;width:100px;height:20px;margin:10px 15px;cursor:pointer}.player .player__mask .controls .controls-box .controls-item .controls-item__progress .progress__bar[data-v-2a8b4d5c]{position:absolute;left:0;top:50%;margin-top:-1px;width:100px;height:2px;background:#666}.player .player__mask .controls .controls-box .controls-item .controls-item__progress .progress__play[data-v-2a8b4d5c]{position:absolute;left:0;top:50%;margin-top:-1px;height:2px;background:#31bedb}.player .player__mask .controls .controls-box .controls-item .controls-item__progress .progress__play .progress__circle[data-v-2a8b4d5c]{background-color:#31bedb;height:10px;width:10px;border-radius:50%;position:absolute;right:-5px;top:-4px;z-index:4}.player .player__mask .controls .player__progress[data-v-2a8b4d5c]{position:absolute;cursor:pointer;top:-15px;left:0;height:15px;width:100%;background-color:transparent}.player .player__mask .controls .player__progress .progress__bar[data-v-2a8b4d5c],.player .player__mask .controls .player__progress .progress__load[data-v-2a8b4d5c],.player .player__mask .controls .player__progress .progress__play[data-v-2a8b4d5c]{position:absolute;bottom:0;left:0;height:2px;transition:height .2s linear}.player .player__mask .controls .player__progress .progress__bar[data-v-2a8b4d5c]{width:100%;background-color:rgba(0,0,0,.5);z-index:5}.player .player__mask .controls .player__progress .progress__load[data-v-2a8b4d5c]{z-index:6;background:#828282;opacity:.6}.player .player__mask .controls .player__progress .progress__play[data-v-2a8b4d5c]{background:#31bedb;z-index:7}.player .player__mask .controls .player__progress .progress__play .progress__circle[data-v-2a8b4d5c]{position:absolute;background-color:#fff;border-radius:50%;cursor:pointer;height:0;width:0;opacity:0;top:0;right:0;box-shadow:-1px 0 5px #626262;transition:all .2s linear;z-index:8}.player .player__mask .controls .player__progress:hover .progress__bar[data-v-2a8b4d5c],.player .player__mask .controls .player__progress:hover .progress__load[data-v-2a8b4d5c],.player .player__mask .controls .player__progress:hover .progress__play[data-v-2a8b4d5c]{height:15px}.player .player__mask .controls .player__progress:hover .progress__circle[data-v-2a8b4d5c]{margin-right:-8px;height:16px;width:16px;opacity:1}.player .player__logo[data-v-2a8b4d5c]{position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;height:96px;width:96px;cursor:pointer;background-color:transparent;z-index:2}.player .player__err[data-v-2a8b4d5c]{position:absolute;left:0;right:0;top:0;bottom:0;z-index:3;cursor:default}.player .player__err .err[data-v-2a8b4d5c]{position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;width:100%;height:20px;line-height:20px;text-align:center}