如何配置 video.js html5-video wrapper 的样式？

Question

在jsp页面我写了下面的代码：

 <video id="video-player${campaign.userContent.content.contentId}"
                                   class="video-js vjs-default-skin" controls
                                   preload="auto" width="405" height="270"
                                   poster="/getVideoIcon.png"
                                   data-setup="{}"
                                   src="/getVideo/${campaign.userContent.contentId}">

                                <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading
                                    to a web browser that
                                    <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5
                                        video</a></p>
                            </video>

当我打开网站并制作检查元素时，我看到以下内容 html:

    <div src="/getVideo/2" data-setup="{}" poster="/getVideoIcon.png" preload="auto" class="video-js vjs-default-skin vjs-paused vjs-controls-enabled vjs-user-inactive" id="video-player2" style="width: 405px; height: 270px;">
   <video id="video-player2_html5_api" class="vjs-tech" preload="auto" poster="/getVideoIcon.png" data-setup="{}" src="/getVideo/2">
      <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading
         to a web browser that
         <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5
         video</a>
      </p>
   </video>
   <div></div>
   <div class="vjs-poster" tabindex="-1" style="background-image: url(http://localhost:8080/getVideoIcon.png);"></div>
   <div class="vjs-text-track-display"></div>
   <div class="vjs-loading-spinner"></div>
   <div class="vjs-big-play-button" role="button" aria-live="polite" tabindex="0" aria-label="play video"><span aria-hidden="true"></span></div>
   <div class="vjs-control-bar">
      <div class="vjs-play-control vjs-control " role="button" aria-live="polite" tabindex="0">
         <div class="vjs-control-content"><span class="vjs-control-text">Play</span></div>
      </div>
      <div class="vjs-current-time vjs-time-controls 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-divider">
         <div><span>/</span></div>
      </div>
      <div class="vjs-duration vjs-time-controls vjs-control">
         <div class="vjs-duration-display" aria-live="off"><span class="vjs-control-text">Duration Time</span> 0:00</div>
      </div>
      <div class="vjs-remaining-time vjs-time-controls 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-live-controls vjs-control">
         <div class="vjs-live-display" aria-live="off"><span class="vjs-control-text">Stream Type</span>LIVE</div>
      </div>
      <div class="vjs-progress-control vjs-control">
         <div role="slider" aria-valuenow="NaN" aria-valuemin="0" aria-valuemax="100" tabindex="0" class="vjs-progress-holder vjs-slider" aria-label="video progress bar" aria-valuetext="0:00">
            <div class="vjs-load-progress" style="width: 21.9164761292654%;"><span class="vjs-control-text" style="left: 0%; width: 100%;"><span>Loaded</span>: 0%</span></div>
            <div class="vjs-play-progress"><span class="vjs-control-text"><span>Progress</span>: 0%</span></div>
            <div class="vjs-seek-handle vjs-slider-handle" aria-live="off"><span class="vjs-control-text">00:00</span></div>
         </div>
      </div>
      <div class="vjs-fullscreen-control vjs-control " role="button" aria-live="polite" tabindex="0">
         <div class="vjs-control-content"><span class="vjs-control-text">Fullscreen</span></div>
      </div>
      <div class="vjs-volume-control vjs-control">
         <div role="slider" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" tabindex="0" class="vjs-volume-bar vjs-slider" aria-label="volume level" aria-valuetext="100%">
            <div class="vjs-volume-level"><span class="vjs-control-text"></span></div>
            <div class="vjs-volume-handle vjs-slider-handle"><span class="vjs-control-text">00:00</span></div>
         </div>
      </div>
      <div class="vjs-mute-control vjs-control" role="button" aria-live="polite" tabindex="0">
         <div><span class="vjs-control-text">Mute</span></div>
      </div>
      <div class="vjs-playback-rate vjs-menu-button vjs-control  vjs-hidden" role="button" aria-live="polite" tabindex="0" aria-haspopup="true">
         <div class="vjs-control-content">
            <span class="vjs-control-text">Playback Rate</span>
            <div class="vjs-menu">
               <ul class="vjs-menu-content"></ul>
            </div>
         </div>
         <div class="vjs-playback-rate-value">1</div>
      </div>
      <div class="vjs-subtitles-button vjs-menu-button vjs-control " role="button" aria-live="polite" tabindex="0" aria-haspopup="true" aria-label="Subtitles Menu" style="display: none;">
         <div class="vjs-control-content">
            <span class="vjs-control-text">Subtitles</span>
            <div class="vjs-menu">
               <ul class="vjs-menu-content">
                  <li class="vjs-menu-item vjs-selected" role="button" aria-live="polite" tabindex="0" aria-selected="true">subtitles off</li>
               </ul>
            </div>
         </div>
      </div>
      <div class="vjs-captions-button vjs-menu-button vjs-control " role="button" aria-live="polite" tabindex="0" aria-haspopup="true" aria-label="Captions Menu" style="display: none;">
         <div class="vjs-control-content">
            <span class="vjs-control-text">Captions</span>
            <div class="vjs-menu">
               <ul class="vjs-menu-content">
                  <li class="vjs-menu-item vjs-selected" role="button" aria-live="polite" tabindex="0" aria-selected="true">captions off</li>
               </ul>
            </div>
         </div>
      </div>
      <div class="vjs-chapters-button vjs-menu-button vjs-control " role="button" aria-live="polite" tabindex="0" aria-haspopup="true" aria-label="Chapters Menu" style="display: none;">
         <div class="vjs-control-content">
            <span class="vjs-control-text">Chapters</span>
            <div class="vjs-menu">
               <ul class="vjs-menu-content">
                  <li class="vjs-menu-title">Chapters</li>
               </ul>
            </div>
         </div>
      </div>
   </div>
   <div class="vjs-error-display">
      <div></div>
   </div>
</div>

我要添加

margin-left: 280px;

到头div.

我试着把它添加到之后

preload="auto" width="405" height="270"

在 jsp 但它不起作用。

请多多指教。

Answer 1

我在 jsp 的另外一个 div 中解决了包装问题：

<div style="margin-left:280px">
    <video....
</div>

如何配置 video.js html5-video wrapper 的样式？

How to configure style of video.js html5-video wrapper?

css

java

jsp

html5-video

video.js