如何设置带有播放列表的自托管video.js播放器？

Question

理想行为

• 带有播放列表的响应性video.js播放器(official demo here)
• 在Google脚本环境中
• 有防火墙限制，因此需要自托管文件.

Google Apps Script application behind a firewall条件是不相关的，除了这意味着我需要确切地知道需要哪些文件，这样我就可以将它们单独添加到Google脚本项目中。

我试过什么

这里有一个教程：

http://blog.videojs.com/Video-js-5-s-fluid-mode-and-playlist-picker/

它最终形成了以下HTML和CSS：

<section class="main-preview-player">
  <video id="preview-player" class="video-js vjs-fluid" controls preload="auto" crossorigin="anonymous">
    <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 class="playlist-container  preview-player-dimensions vjs-fluid">
    <ol class="vjs-playlist"></ol>
  </div>
</section>

CSS

.main-preview-player {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.video-js,
.playlist-container {
  position: relative;
  min-width: 300px;
  min-height: 150px;
  height: 0;
}
.video-js {
  flex: 3 1 70%;
}
.playlist-container {
  flex: 1 1 30%;
}
.vjs-playlist {
  margin: 0;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

它还指出：

在本例中，我们使用videojs-playlist-ui和videojs-playlist插件来实现播放列表功能

但它并没有说明如何实现这些插件。

插件页面上的教程(链接在上面)让我感到困惑，因为它们要么是指通过node安装东西，要么是指向我在github‘s中找不到的dist目录。

jsFiddle

我已经开始在a jsFiddle here中重新创建这个场景，并添加了以下文件作为资源：

https://cdnjs.cloudflare.com/ajax/libs/video.js/5.15.1/video.js https://cdnjs.cloudflare.com/ajax/libs/video.js/5.15.1/video-js.css

它显然也需要插件文件，但我不知道：

• 哪些文件需要添加？
• 应该如何引用它们

Answer 1

希望这能帮到你

https://jsfiddle.net/c5xqfekp/

​

<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/5.15.1/video.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/5.15.1/video.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/5.15.1/video.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/5.15.1/video-js.css" rel="stylesheet" />
<section class="main-preview-player">
  <div id="preview-player" class="video-js vjs-fluid vjs-paused preview-player-dimensions vjs-workinghover vjs-error vjs-controls-disabled vjs-user-inactive" controls preload="auto" crossorigin="anonymous" role="region">
    <video id="preview-player_html5_api" class="vjs-tech" poster="//vjs.zencdn.net/v/oceans.png" src=" //vjs.zencdn.net/v/oceans.mp4">
      <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 class="playlist-container  preview-player-dimensions vjs-fluid">
    <ol class="vjs-playlist"></ol>
  </div>
</section>

​

如果我没有错的话，您可能已经混淆了播放器的div和提供数据的源元素、应该显示的视频。