Video-Js自定义皮肤不适用

时间：2016-03-19 22:51:59

标签： javascript css laravel-5 video.js

我正在使用Laravel生成以下HTML：

@if (isset($videos))    
@foreach ($videos as $video)
<video class="video-js vjs-default-skin" data-setup="{}" preload="auto" style="" id={{$video->name}}>
<source src="http://example.com/videos/{{$video->url}}" type="video/mp4">
</video>
@endforeach
@endif

然而，即使为视频js包含必要的CSS和JS并且看到它运行（它对DOM进行了更改），我也看不到任何自定义皮肤被应用，甚至任何视频-js皮肤，只是HTML 5的默认控件和播放器。

我做错了什么？要明确我没有在任何地方调用它，但是它不应该通过找到<video>和data-setup属性来工作吗？

当页面呈现时，我得到这个HTML：

<div id="20160313_100337" style="margin-bottom: 10px; margin-right: 10px; display: inline-block; vertical-align: bottom;" preload="auto" data-setup="{}" class="video-js vjs-default-skin vjs-paused vjs-controls-disabled dimensions-20160313_100337 vjs-user-inactive"><video class="vjs-tech" data-setup="{}" preload="auto" style="margin-bottom: 10px; margin-right: 10px; display: inline-block; vertical-align: bottom;" id="20160313_100337_html5_api">
<source src="http://example.com/videos/20160313100337.mp4" type="video/mp4">
</video><div></div><div class="vjs-poster vjs-hidden" tabindex="-1"></div><div class="vjs-text-track-display vjs-hidden"></div><div class="vjs-loading-spinner"></div><button class="vjs-big-play-button" type="button" aria-live="polite"><span class="vjs-control-text">Play Video</span></button><div class="vjs-control-bar" role="group"><button class="vjs-play-control vjs-control vjs-button " type="button" aria-live="polite"><span class="vjs-control-text">Play</span></button><div class="vjs-volume-menu-button vjs-menu-button vjs-menu-button-inline vjs-control vjs-button  vjs-volume-menu-button-horizontal vjs-vol-3" tabindex="0" role="button" aria-live="polite"><div class="vjs-menu"><div class="vjs-menu-content"><div tabindex="0" class="vjs-volume-bar vjs-slider-bar vjs-slider vjs-slider-horizontal" role="slider" aria-valuenow="100.00" aria-valuemin="0" aria-valuemax="100" aria-label="volume level" aria-valuetext="100.00%"><div class="vjs-volume-level"><span class="vjs-control-text"></span></div></div></div></div><span class="vjs-control-text">Mute</span></div><div class="vjs-current-time vjs-time-control vjs-control"><div class="vjs-current-time-display" aria-live="off"><span class="vjs-control-text">Current Time </span>0:00</div></div><div class="vjs-time-control vjs-time-divider"><div><span>/</span></div></div><div class="vjs-duration vjs-time-control vjs-control"><div class="vjs-duration-display" aria-live="off"><span class="vjs-control-text">Duration Time</span> 0:04</div></div><div class="vjs-progress-control vjs-control"><div tabindex="0" class="vjs-progress-holder vjs-slider vjs-slider-horizontal" role="slider" aria-valuenow="NaN" aria-valuemin="0" aria-valuemax="100" aria-label="video progress bar" aria-valuetext="0:00"><div class="vjs-load-progress" style="width: 100%;"><span class="vjs-control-text" style="left: 0%; width: 100%;"><span>Loaded</span>: 0%</span></div><div class="vjs-mouse-display" data-current-time="0:00" style="left: 0px;"></div><div class="vjs-play-progress vjs-slider-bar" data-current-time="0:00"><span class="vjs-control-text"><span>Progress</span>: 0%</span></div></div></div><div class="vjs-live-control vjs-control vjs-hidden"><div class="vjs-live-display" aria-live="off"><span class="vjs-control-text">Stream Type</span>LIVE</div></div><div class="vjs-remaining-time vjs-time-control vjs-control"><div class="vjs-remaining-time-display" aria-live="off"><span class="vjs-control-text">Remaining Time</span> -0:00</div></div><div class="vjs-custom-control-spacer vjs-spacer ">&nbsp;</div><div class="vjs-playback-rate vjs-menu-button vjs-menu-button-popup vjs-control vjs-button vjs-hidden" tabindex="0" role="menuitem" aria-live="polite" aria-expanded="false" aria-haspopup="true"><div class="vjs-menu" role="presentation"><ul class="vjs-menu-content" role="menu"></ul></div><span class="vjs-control-text">Playback Rate</span><div class="vjs-playback-rate-value">1</div></div><div class="vjs-chapters-button vjs-menu-button vjs-menu-button-popup vjs-control vjs-button vjs-hidden" tabindex="0" role="menuitem" aria-live="polite" aria-expanded="false" aria-haspopup="true" aria-label="Chapters Menu"><div class="vjs-menu" role="presentation"><ul class="vjs-menu-content" role="menu"><li class="vjs-menu-title" tabindex="-1">Chapters</li></ul></div><span class="vjs-control-text">Chapters</span></div><div class="vjs-subtitles-button vjs-menu-button vjs-menu-button-popup vjs-control vjs-button vjs-hidden" tabindex="0" role="menuitem" aria-live="polite" aria-expanded="false" aria-haspopup="true" aria-label="Subtitles Menu"><div class="vjs-menu" role="presentation"><ul class="vjs-menu-content" role="menu"><li class="vjs-menu-item vjs-selected" tabindex="-1" role="menuitemcheckbox" aria-live="polite" aria-checked="true">subtitles off<span class="vjs-control-text">, selected</span></li></ul></div><span class="vjs-control-text">Subtitles</span></div><div class="vjs-captions-button vjs-menu-button vjs-menu-button-popup vjs-control vjs-button vjs-hidden" tabindex="0" role="menuitem" aria-live="polite" aria-expanded="false" aria-haspopup="true" aria-label="Captions Menu"><div class="vjs-menu" role="presentation"><ul class="vjs-menu-content" role="menu"><li class="vjs-menu-item vjs-selected" tabindex="-1" role="menuitemcheckbox" aria-live="polite" aria-checked="true">captions off<span class="vjs-control-text">, selected</span></li></ul></div><span class="vjs-control-text">Captions</span></div><button class="vjs-fullscreen-control vjs-control vjs-button " type="button" aria-live="polite"><span class="vjs-control-text">Fullscreen</span></button></div><div class="vjs-error-display vjs-modal-dialog vjs-hidden " tabindex="-1" aria-describedby="20160313_100337_component_286_description" aria-hidden="true" aria-label="Modal Window" role="dialog"><p class="vjs-modal-dialog-description vjs-offscreen" id="20160313_100337_component_286_description">This is a modal window.</p><div class="vjs-modal-dialog-content" role="document"></div></div><div class="vjs-caption-settings vjs-modal-overlay vjs-hidden"><div class="vjs-tracksettings">
      <div class="vjs-tracksettings-colors">
        <div class="vjs-fg-color vjs-tracksetting">
            <label class="vjs-label">Foreground</label>
            <select>
              <option value="">---</option>
              <option value="#FFF">White</option>
              <option value="#000">Black</option>
              <option value="#F00">Red</option>
              <option value="#0F0">Green</option>
              <option value="#00F">Blue</option>
              <option value="#FF0">Yellow</option>
              <option value="#F0F">Magenta</option>
              <option value="#0FF">Cyan</option>
            </select>
            <span class="vjs-text-opacity vjs-opacity">
              <select>
                <option value="">---</option>
                <option value="1">Opaque</option>
                <option value="0.5">Semi-Opaque</option>
              </select>
            </span>
        </div> <!-- vjs-fg-color -->
        <div class="vjs-bg-color vjs-tracksetting">
            <label class="vjs-label">Background</label>
            <select>
              <option value="">---</option>
              <option value="#FFF">White</option>
              <option value="#000">Black</option>
              <option value="#F00">Red</option>
              <option value="#0F0">Green</option>
              <option value="#00F">Blue</option>
              <option value="#FF0">Yellow</option>
              <option value="#F0F">Magenta</option>
              <option value="#0FF">Cyan</option>
            </select>
            <span class="vjs-bg-opacity vjs-opacity">
                <select>
                  <option value="">---</option>
                  <option value="1">Opaque</option>
                  <option value="0.5">Semi-Transparent</option>
                  <option value="0">Transparent</option>
                </select>
            </span>
        </div> <!-- vjs-bg-color -->
        <div class="window-color vjs-tracksetting">
            <label class="vjs-label">Window</label>
            <select>
              <option value="">---</option>
              <option value="#FFF">White</option>
              <option value="#000">Black</option>
              <option value="#F00">Red</option>
              <option value="#0F0">Green</option>
              <option value="#00F">Blue</option>
              <option value="#FF0">Yellow</option>
              <option value="#F0F">Magenta</option>
              <option value="#0FF">Cyan</option>
            </select>
            <span class="vjs-window-opacity vjs-opacity">
                <select>
                  <option value="">---</option>
                  <option value="1">Opaque</option>
                  <option value="0.5">Semi-Transparent</option>
                  <option value="0">Transparent</option>
                </select>
            </span>
        </div> <!-- vjs-window-color -->
      </div> <!-- vjs-tracksettings -->
      <div class="vjs-tracksettings-font">
        <div class="vjs-font-percent vjs-tracksetting">
          <label class="vjs-label">Font Size</label>
          <select>
            <option value="0.50">50%</option>
            <option value="0.75">75%</option>
            <option value="1.00" selected="">100%</option>
            <option value="1.25">125%</option>
            <option value="1.50">150%</option>
            <option value="1.75">175%</option>
            <option value="2.00">200%</option>
            <option value="3.00">300%</option>
            <option value="4.00">400%</option>
          </select>
        </div> <!-- vjs-font-percent -->
        <div class="vjs-edge-style vjs-tracksetting">
          <label class="vjs-label">Text Edge Style</label>
          <select>
            <option value="none">None</option>
            <option value="raised">Raised</option>
            <option value="depressed">Depressed</option>
            <option value="uniform">Uniform</option>
            <option value="dropshadow">Dropshadow</option>
          </select>
        </div> <!-- vjs-edge-style -->
        <div class="vjs-font-family vjs-tracksetting">
          <label class="vjs-label">Font Family</label>
          <select>
            <option value="">Default</option>
            <option value="monospaceSerif">Monospace Serif</option>
            <option value="proportionalSerif">Proportional Serif</option>
            <option value="monospaceSansSerif">Monospace Sans-Serif</option>
            <option value="proportionalSansSerif">Proportional Sans-Serif</option>
            <option value="casual">Casual</option>
            <option value="script">Script</option>
            <option value="small-caps">Small Caps</option>
          </select>
        </div> <!-- vjs-font-family -->
      </div>
    </div>
    <div class="vjs-tracksettings-controls">
      <button class="vjs-default-button">Defaults</button>
      <button class="vjs-done-button">Done</button>
    </div></div></div>

我使用<link rel="stylesheet" href="http://example.com/css/video-js2.css">加载的皮肤是：

/*!
Video.js Default Styles (http://videojs.com)
Version 4.3.0
Create your own skin at http://designer.videojs.com
*/.vjs-default-skin {
    color: #ccc;
}

.vjs-default-skin .vjs-slider {
    outline: 0;
    position: relative;
    cursor: pointer;
    padding: 0;
    background-color: #333;
    background-color: rgba(51,51,51,.9);
}

.vjs-default-skin .vjs-slider:focus {
    -webkit-box-shadow: 0 0 2em #fff;
    -moz-box-shadow: 0 0 2em #fff;
    box-shadow: 0 0 2em #fff;
}

.vjs-default-skin .vjs-slider-handle {
    position: absolute;
    left: 0;
    top: 0;
    /* removes slider handles, comment out to restore */
    display:none;
}

.vjs-default-skin .vjs-slider-handle:before {
    content: "\f0c8";
    font-family: FontAwesome;
    font-size: 1em;
    line-height: 1;
    text-align: center;
    position: absolute;
    left:0;
    top: 0;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.vjs-default-skin .vjs-control-bar {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3em;
    background-color: #07141e;
    background-color: rgba(7,20,30,.7);
}

.vjs-default-skin.vjs-has-started .vjs-control-bar {
    display: block;
    visibility: visible;
    opacity: 1;
    -webkit-transition: visibility .1s,opacity .1s;
    -moz-transition: visibility .1s,opacity .1s;
    -o-transition: visibility .1s,opacity .1s;
    transition: visibility .1s,opacity .1s;
}

.vjs-default-skin.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {
    display: block;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: visibility 1s,opacity 1s;
    -moz-transition: visibility 1s,opacity 1s;
    -o-transition: visibility 1s,opacity 1s;
    transition: visibility 1s,opacity 1s;
}

.vjs-default-skin.vjs-controls-disabled .vjs-control-bar {
    display: none;
}

.vjs-default-skin.vjs-using-native-controls .vjs-control-bar {
    display: none;
}

@media \0screen {
    .vjs-default-skin.vjs-user-inactive.vjs-playing .vjs-control-bar :before {
        content: "";
    }
}

.vjs-default-skin .vjs-control {
    outline: 0;
    position: relative;
    float: left;
    text-align: center;
    margin: 0;
    padding: 0;
    height: 3em;
    width: 4em;
}

.vjs-default-skin .vjs-control:before {
    font-family: FontAwesome;
    font-size: 1.5em;
    line-height: 2;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
}

.vjs-default-skin .vjs-control:focus:before,.vjs-default-skin .vjs-control:hover:before {
    color:#fff;
}

.vjs-default-skin .vjs-control:focus {
}

.vjs-default-skin .vjs-control-text {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.vjs-default-skin .vjs-play-control {
    width: 5em;
    cursor: pointer;
}

.vjs-default-skin .vjs-play-control:before {
    content: "\f04b";
}

.vjs-default-skin.vjs-playing .vjs-play-control:before {
    content: "\f04c";
}

.vjs-default-skin .vjs-mute-control,.vjs-default-skin .vjs-volume-menu-button {
    cursor: pointer;
    float: right;
}

.vjs-default-skin .vjs-mute-control:before,.vjs-default-skin .vjs-volume-menu-button:before {
    content: "\f028";
}

.vjs-default-skin .vjs-mute-control.vjs-vol-0:before,.vjs-default-skin .vjs-volume-menu-button.vjs-vol-0:before {
    content: "\f026";
}

.vjs-default-skin .vjs-mute-control.vjs-vol-1:before,.vjs-default-skin .vjs-volume-menu-button.vjs-vol-1:before {
    content: "\f027";
}

.vjs-default-skin .vjs-mute-control.vjs-vol-2:before,.vjs-default-skin .vjs-volume-menu-button.vjs-vol-2:before {
    content: "\f027";
}

.vjs-default-skin .vjs-volume-control {
    width: 5em;
    float: right;
    margin-top: 1px;
}

.vjs-default-skin .vjs-volume-bar {
    width: 5em;
    height: .6em;
    margin: 1.1em auto 0;
}

.vjs-default-skin .vjs-volume-menu-button .vjs-menu-content {
    height: 2.9em;
}

.vjs-default-skin .vjs-volume-level {
    position: absolute;
    top: 0;
    left: 0;
    height: .6em;
    background: #5cb85c;
}

.vjs-default-skin .vjs-volume-bar .vjs-volume-handle {
    width: .5em;
    height: .5em;
}

.vjs-default-skin .vjs-volume-handle:before {
    font-size: .9em;
    top: -.2em;
    left: -.2em;
    width: 1em;
    height: 1em;
}

.vjs-default-skin .vjs-volume-menu-button .vjs-menu .vjs-menu-content {
    width: 6em;
    left: -4em;
}

.vjs-default-skin .vjs-progress-control {
    position: absolute;
    left: 0;
    right: 0;
    width: auto;
    font-size: .3em;
    height: 1em;
    top: -1em;
    -webkit-transition: all .4s;
    -moz-transition: all .4s;
    -o-transition: all .4s;
    transition: all .4s;
}

.vjs-default-skin:hover .vjs-progress-control {
    font-size: .9em;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
}

.vjs-default-skin .vjs-progress-holder {
    height: 100%;
}

.vjs-default-skin .vjs-progress-holder .vjs-play-progress,.vjs-default-skin .vjs-progress-holder .vjs-load-progress {
    position: absolute;
    display: block;
    height: 100%;
    margin: 0;
    padding: 0;
    left: 0;
    top: 0;
}

.vjs-default-skin .vjs-play-progress {
    background: #5cb85c;
}

.vjs-default-skin .vjs-load-progress {
    background: #646464;
    background: rgba(255,255,255,.4);
}

.vjs-default-skin .vjs-seek-handle {
    width: 1.5em;
    height: 100%;
}

.vjs-default-skin .vjs-seek-handle:before {
    padding-top: .1em;
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
}

.vjs-default-skin .vjs-time-controls {
    font-size: 1em;
    line-height: 3em;
}

.vjs-default-skin .vjs-current-time {
    float: left;
}

.vjs-default-skin .vjs-duration {
    float: left;
}

.vjs-default-skin .vjs-remaining-time {
    display: none;
    float: left;
}

.vjs-time-divider {
    float: left;
    line-height: 3em;
}

.vjs-default-skin .vjs-fullscreen-control {
    width: 3.8em;
    cursor: pointer;
    float: right;
}

.vjs-default-skin .vjs-fullscreen-control:before {
    content: "\f065";
}

.vjs-default-skin.vjs-fullscreen .vjs-fullscreen-control:before {
    content: "\f066";
}

.vjs-default-skin .vjs-big-play-button {
    cursor:pointer;
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 15em;
    line-height: 1;
    width: 1em;
    height: 1em;
    margin-left: -.5em;
    margin-top: -.5em;
    -webkit-transition: all .4s;
    -moz-transition: all .4s;
    -o-transition: all .4s;
    transition: all .4s;
}

.vjs-default-skin.vjs-big-play-centered .vjs-big-play-button {
    left: 50%;
    margin-left: -2.1em;
    top: 50%;
    margin-top: -1.4000000000000001em;
}

.vjs-default-skin.vjs-controls-disabled .vjs-big-play-button {
    display: none;
}

.vjs-default-skin.vjs-has-started .vjs-big-play-button {
    display: none;
}

.vjs-default-skin.vjs-using-native-controls .vjs-big-play-button {
    display: none;
}

.vjs-default-skin:hover .vjs-big-play-button,.vjs-default-skin .vjs-big-play-button:focus {
    outline: 0;
    -webkit-transition: all 0s;
    -moz-transition: all 0s;
    -o-transition: all 0s;
    transition: all 0s;
}

.vjs-default-skin .vjs-big-play-button:before {
    content: "\f16a";
    font-family: FontAwesome;
    width:100%;
    height: 100%;
}

.vjs-default-skin .vjs-big-play-button:hover {
    color:#fff;
}

.vjs-loading-spinner {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 4em;
    line-height: 1;
    width: 1em;
    height: 1em;
    margin-left: -.5em;
    margin-top: -.5em;
    opacity: .85;
    -webkit-animation: spin 1.5s infinite linear;
    -moz-animation: spin 1.5s infinite linear;
    -o-animation: spin 1.5s infinite linear;
    animation: spin 1.5s infinite linear;
}

.vjs-default-skin .vjs-loading-spinner:before {
    content: "\f021";
    font-family: FontAwesome;
    position: absolute;
    top: 0;
    left: 0;
    width: 1em;
    height: 1em;
    text-align: center;
}

@-moz-keyframes spin {
    0% {
        -moz-transform: rotate(0deg);
    }

    100% {
        -moz-transform: rotate(359deg);
    }
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(359deg);
    }
}

@-o-keyframes spin {
    0% {
        -o-transform: rotate(0deg);
    }

    100% {
        -o-transform: rotate(359deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(359deg);
    }
}

.vjs-default-skin .vjs-menu-button {
    float: right;
    cursor: pointer;
}

.vjs-default-skin .vjs-menu {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 0;
    margin-bottom: 3em;
    border-left: 2em solid transparent;
    border-right: 2em solid transparent;
    border-top: 1.55em solid #000;
    border-top-color: rgba(7,40,50,.5);
}

.vjs-default-skin .vjs-menu-button .vjs-menu .vjs-menu-content {
    display: block;
    padding: 0;
    margin: 0;
    position: absolute;
    width: 10em;
    bottom: 1.5em;
    max-height: 15em;
    overflow: auto;
    left: -5em;
    background-color: #07141e;
    background-color: rgba(7,20,30,.7);
    -webkit-box-shadow: -.2em -.2em .3em rgba(255,255,255,.2);
    -moz-box-shadow: -.2em -.2em .3em rgba(255,255,255,.2);
    box-shadow: -.2em -.2em .3em rgba(255,255,255,.2);
}

.vjs-default-skin .vjs-menu-button:hover .vjs-menu {
    display: block;
}

.vjs-default-skin .vjs-menu-button ul li {
    list-style: none;
    margin: 0;
    padding: .3em 0;
    line-height: 1.4em;
    font-size: 1.2em;
    text-align: center;
    text-transform: lowercase;
}

.vjs-default-skin .vjs-menu-button ul li.vjs-selected {
    background-color: #000;
}

.vjs-default-skin .vjs-menu-button ul li:focus,.vjs-default-skin .vjs-menu-button ul li:hover,.vjs-default-skin .vjs-menu-button ul li.vjs-selected:focus,.vjs-default-skin .vjs-menu-button ul li.vjs-selected:hover {
    outline: 0;
    color: #111;
    background-color: #fff;
    background-color: rgba(255,255,255,.75);
    -webkit-box-shadow: 0 0 1em #fff;
    -moz-box-shadow: 0 0 1em #fff;
    box-shadow: 0 0 1em #fff;
}

.vjs-default-skin .vjs-menu-button ul li.vjs-menu-title {
    text-align: center;
    text-transform: uppercase;
    font-size: 1em;
    line-height: 2em;
    padding: 0;
    margin: 0 0 .3em;
    font-weight: 700;
    cursor: default;
}

.vjs-default-skin .vjs-subtitles-button:before {
    content: "\f013";
}

.vjs-default-skin .vjs-captions-button:before {
    content: "\f013";
}

.vjs-default-skin .vjs-captions-button:focus .vjs-control-content:before,.vjs-default-skin .vjs-captions-button:hover .vjs-control-content:before {
    -webkit-box-shadow: 0 0 1em #fff;
    -moz-box-shadow: 0 0 1em #fff;
    box-shadow: 0 0 1em #fff;
}

.video-js {
    background-color: #000;
    position: relative;
    padding: 0;
    font-size: 12px;
    vertical-align: middle;
    font-weight: 400;
    font-style: normal;
    font-family: Arial,sans-serif;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.video-js .vjs-tech {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.video-js:-moz-full-screen {
    position: absolute;
}

body.vjs-full-window {
    padding: 0;
    margin: 0;
    height: 100%;
    overflow-y: auto;
}

.video-js.vjs-fullscreen {
    position: fixed;
    overflow: hidden;
    z-index: 1000;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    width: 100%!important;
    height: 100%!important;
    _position: absolute;
}

.video-js:-webkit-full-screen {
    width: 100%!important;
    height: 100%!important;
}

.video-js.vjs-fullscreen.vjs-user-inactive {
    cursor: none;
}

.vjs-poster {
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: contain;
    cursor: pointer;
    height: 100%;
    margin: 0;
    padding: 0;
    position: relative;
    width: 100%;
}

.vjs-poster img {
    display: block;
    margin: 0 auto;
    max-height: 100%;
    padding: 0;
    width: 100%;
}

.video-js.vjs-using-native-controls .vjs-poster {
    display: none;
}

.video-js .vjs-text-track-display {
    text-align: center;
    position: absolute;
    bottom: 4em;
    left: 1em;
    right: 1em;
}

.video-js .vjs-text-track {
    display: none;
    font-size: 1.4em;
    text-align: center;
    margin-bottom: .1em;
    background-color: #000;
    background-color: rgba(0,0,0,.5);
}

.video-js .vjs-subtitles {
    color: #fff;
}

.video-js .vjs-captions {
    color: #fc6;
}

.vjs-tt-cue {
    display: block;
}

.vjs-default-skin .vjs-hidden {
    display: none;
}

.vjs-lock-showing {
    display: block!important;
    opacity: 1;
    visibility: visible;
}

/*Custom stuff*/
.vjs-fullscreen {padding-top: 0;}
.vjs-default-skin .vjs-volume-control .vjs-slider {
    background-color: #888;
    background-color: rgba(255,255,255,.4);
}

0 个答案:

没有答案
相关问题
最新问题