HTML

导入代码模板：

@charset "UTF-8";

html,

body {

width: 100%;

height: 100%;

}

body {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-orient: vertical;

-webkit-box-direction: normal;

-webkit-flex-direction: column;

-ms-flex-direction: column;

flex-direction: column;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

background: #d9d9d9;

}

video {

box-shadow: 0px 0px 43px -3px #474747;

}

h1 {

font-weight: 100;

color: gray;

}

/* 1.5em = 45px default */

/*THEME ICONS

------------------------------------------------------------------------------------------------*/

.vjs-polyzor-skin .vjs-icon-play,

.video-js .vjs-big-play-button,

.video-js .vjs-play-control {

font-family: VideoJS;

font-weight: normal;

font-style: normal;

}

.vjs-polyzor-skin .vjs-icon-play:before,

.video-js .vjs-big-play-button:before,

.video-js .vjs-play-control:before {

content: "";

}

.vjs-polyzor-skin {

font-size: 10px;

/* The main font color changes the ICON COLORS as well as the text */

color: #26A69A;

}

.vjs-polyzor-skin .vjs-control-bar,

.vjs-polyzor-skin .vjs-big-play-button,

.vjs-polyzor-skin .vjs-menu-button .vjs-menu-content {

/* IE8 - has no alpha support */

background-color: #2B333F;

/* Opacity: 1.0 = 100%, 0.0 = 0% */

background-color: rgba(43, 51, 63, 0.7);

}

.vjs-polyzor-skin .vjs-big-play-button {

font-size: 6em;

line-height: 1;

height: 1em;

width: 1em;

color: #26A69A;

background: none !important;

border: 0;

-webkit-transition: all .3s ease !important;

transition: all .3s ease !important;

/* Align center */

left: 50%;

top: 50%;

margin-left: -0.5em;

margin-top: -0.5em;

}

.vjs-polyzor-skin .vjs-big-play-button:hover {

color: #fff;

-webkit-transform: scale(1.5);

-ms-transform: scale(1.5);

transform: scale(1.5);

}

.vjs-polyzor-skin .vjs-control-bar {

padding: 0 5px;

height: 4em !important;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

}

.vjs-polyzor-skin .vjs-progress-control {

position: absolute;

top: 0;

left: 0;

margin: 0;

padding: 0 !important;

width: 100% !important;

height: auto !important;

-webkit-transform: translate(0, -100%);

-ms-transform: translate(0, -100%);

transform: translate(0, -100%);

}

.vjs-polyzor-skin .vjs-progress-holder {

height: 0.5em !important;

margin: 0;

}

.vjs-polyzor-skin .vjs-progress-holder .vjs-load-progress,

.vjs-polyzor-skin .vjs-progress-holder .vjs-play-progress {

-webkit-transition: width 400ms ease;

transition: width 400ms ease;

height: 100% !important;

}

.vjs-polyzor-skin .vjs-progress-holder .vjs-play-progress:before {

font-size: 1em;

color: #fcfaff;

top: -55%;

}

.vjs-polyzor-skin.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {

visibility: visible;

opacity: 1;

background: none;

-webkit-transition: all 1s;

transition: all 1s;

}

.vjs-polyzor-skin.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar .vjs-control,

.vjs-polyzor-skin.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar .vjs-time-control {

visibility: hidden;

opacity: 0;

-webkit-transition: all 1s;

transition: all 1s;

}

.vjs-polyzor-skin.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar .vjs-progress-control {

visibility: visible;

opacity: 1;

top: 100%;

-webkit-transition: all .8s !important;

transition: all .8s !important;

-webkit-transform: translate(0, -100%);

-ms-transform: translate(0, -100%);

transform: translate(0, -100%);

}

.vjs-polyzor-skin.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar .vjs-progress-control .vjs-play-progress.vjs-slider-bar:before {

content: '';

}

.vjs-polyzor-skin .vjs-control {

height: auto;

width: auto;

padding: 0 5px;

}

.vjs-polyzor-skin .vjs-control:before {

font-size: 3em;

line-height: 1 !important;

}

.vjs-polyzor-skin .vjs-control:before {

line-height: 1;

position: relative;

}

.video-js .vjs-control:focus:before,

.video-js .vjs-control:hover:before,

.video-js .vjs-control:focus {

text-shadow: 0 0 1em #26A69A;

}

.vjs-polyzor-skin .vjs-play-control {

position: absolute;

width: auto;

height: 100%;

top: 50%;

left: 50%;

-webkit-transition: 300ms;

transition: 300ms;

-webkit-transform: translate(-50%, -50%);

-ms-transform: translate(-50%, -50%);

transform: translate(-50%, -50%);

}

.vjs-polyzor-skin .vjs-play-control:before {

position: relative;

line-height: 1 !important;

font-size: 25px;

font-size: 2.85714em !important;

}

.vjs-polyzor-skin .vjs-volume-menu-button {

position: relative;

height: 2.3em;

width: 2.3em;

overflow: hidden;

}

.vjs-polyzor-skin .vjs-volume-menu-button:before {

text-align: left;

font-size: 2.3em !important;

position: absolute;

top: 50%;

-webkit-transform: translate(0, -50%);

-ms-transform: translate(0, -50%);

transform: translate(0, -50%);

text-shadow: none !important;

}

.vjs-polyzor-skin .vjs-volume-menu-button .vjs-menu {

position: relative;

width: 100%;

left: 2em;

}

.vjs-polyzor-skin .vjs-volume-menu-button .vjs-menu-content {

position: absolute;

height: 2.3em;

padding: 0 5px !important;

}

.vjs-polyzor-skin .vjs-volume-menu-button .vjs-menu-content .vjs-volume-bar {

margin: 0 !important;

top: 50%;

-webkit-transform: translate(0, -50%);

-ms-transform: translate(0, -50%);

transform: translate(0, -50%);

}

.vjs-polyzor-skin .vjs-volume-level {

color: #fcfaff;

}

.vjs-polyzor-skin .vjs-vol-0 {

color: red;

}

.vjs-polyzor-skin .vjs-remaining-time {

margin-right: auto;

}

.vjs-polyzor-skin .vjs-time-control {

color: #fff;

}

.vjs-polyzor-skin .vjs-live-control {

position: absolute;

width: auto;

line-height: 1;

height: auto;

top: -30px;

right: 0;

}

.vjs-polyzor-skin .vjs-live-control:before {

content: '';

display: block;

width: 10px;

height: 10px;

position: absolute;

left: 0;

top: 50%;

background: red;

border-radius: 100%;

-webkit-transform: translate(-100%, -50%);

-ms-transform: translate(-100%, -50%);

transform: translate(-100%, -50%);

}

.vjs-polyzor-skin .vjs-playback-rate {

/*TODO: fix playback height*/

}

.vjs-current-time,

.vjs-time-divider {

display: block !important;

}

.vjs-polyzor-skin .vjs-progress-control:hover .vjs-mouse-display:after {

background: rgba(38, 166, 154, 0.7);

}

/* The slider bar color is used for the progress bar and the volume bar

(the first two can be removed after a fix that's coming) */

.video-js .vjs-volume-level,

.video-js .vjs-play-progress,

.video-js .vjs-slider-bar {

background: #26A69A;

}

/* The main progress bar also has a bar that shows how much has been loaded. */

.video-js .vjs-load-progress {

/* For IE8 we'll lighten the color */

background: #bfc7d3;

/* Otherwise we'll rely on stacked opacities */

background: rgba(115, 133, 159, 0.5);

}

/* The load progress bar also has internal divs that represent

smaller disconnected loaded time ranges */

.video-js .vjs-load-progress div {

/* For IE8 we'll lighten the color */

background: white;

/* Otherwise we'll rely on stacked opacities */

background: rgba(115, 133, 159, 0.75);

}

@media screen and (max-width: 400px) {

.vjs-polyzor-skin .vjs-play-control {

display: inline-block;

position: relative;

height: 100%;

top: 0 !important;

left: 0 !important;

-webkit-transform: translate(0, 0) !important;

-ms-transform: translate(0, 0) !important;

transform: translate(0, 0) !important;

margin-right: 5px;

}

.vjs-polyzor-skin .vjs-play-control:before {

position: relative;

line-height: 1 !important;

font-size: 2.85714em !important;

}

}

To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video

Video.js Polyzor Skin