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

Question

期望的行为

• 带有播放列表的响应式video.js播放器(官方演示)
• 在Google Apps脚本环境中
• 具有防火墙限制,因此需要自托管文件.

该Google Apps Script application behind a firewall条件是无关紧要的,除了事实,这意味着我需要确切地知道哪些文件需要这样我就可以逐个添加到谷歌Apps脚本项目.

我试过的

这里有一个教程:

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

其中以下HTML和CSS结束:

HTML

<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,或者是指dist在github repo中找不到的目录.

的jsfiddle

我已经开始在jsFiddle中重新创建场景并添加了以下文件作为资源:

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 和提供应该显示视频的数据的源元素感到困惑。