javascript - Video.js 带有一个小播放器并控制换行

Question

只是想在这里制作一个更小的播放器窗口。只是想知道如果窗口像这样被压扁，我应该处理哪些事情来让播放器显示更小的控件版本：

也许是控件的简化版本？更小？

Answer 1

可以使用 CSS 自定义控件。您可以向小型播放器添加另一个类，例如我使用过的这里small-player：

<video id="my_video_1" class="video-js vjs-default-skin small-player" controls
  preload="auto" width="90" height="200" poster="my_video_poster.png"
  data-setup="{}">
  <source src="my_video.mp4" type='video/mp4'>
  <source src="my_video.webm" type='video/webm'>
</video>

然后重新设计控件以适应。例如，您可以删除时间并调整大播放按钮的大小：

.small-player .vjs-time-controls, .small-player .vjs-time-divider {
  display:none;
}
.small-player .vjs-big-play-button {
  width: 4em;
  height: 4em;    
}
.small-player .vjs-big-play-button:before {
  font-size:2em;   
  line-height:2;
}