Question

所需行为

带有播放列表的响应式video.js播放器（official demo here）
在Google Apps脚本环境中
具有防火墙限制，因此需要自托管文件。

Google Apps Script application behind a firewall条件无关紧要，除了这意味着我需要确切知道需要哪些文件，以便我可以将它们单独添加到Google 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来引导安装，要么指向我在github中找不到的dist目录回购＆＃39;第

的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/

＆＃13;

<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>

＆＃13;

如果我没有错，你可能会对播放器的div和提供数据应该显示视频的源元素感到困惑。

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

1 个答案: