Video.js 一款漂亮的HTML视频播放器皮肤 - 踏得网

Video.js Polyzor Skin

javascript, video

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 9424
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

<link rel='stylesheet prefetch' href='https://vjs.zencdn.net/5.2.1/video-js.css'>
<style>
    @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;
        }
    }
</style>
<video id="example_video_1" class="video-js  vjs-polyzor-skin" controls preload="auto" width="640" height="400" poster="https://video-js.zencoder.com/oceans-clip.png" data-setup='{"example_option":true}'>
    <source src="/uploads/1706/balloons.mp4" type='video/mp4' />
    <source src="/uploads/1706/balloons.webm" type='video/webm' />
    <source src="/uploads/1706/balloons.ogg" type='video/ogg' />
    <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
    </p>
</video>
<h1>Video.js Polyzor Skin</h1>
<script src='https://vjs.zencdn.net/5.2.1/video.js'></script>