Как настроить самостоятельный проигрыватель video.js с плейлистом?

Question

Желаемая Поведение

• Отзывчивое video.js плеер с плейлистом (official demo here)
• в среде Google Apps Script
• с ограничениями брандмауэра, которые, следовательно, требует резидентных файлов.

Google Apps Script application behind a firewall условие не имеет никакого значения, кроме того, что это означает, что я должен точно знать, какие файлы необходимы для того, чтобы я мог добавить их по отдельности в проект Google Apps Script.

Что я Пробовал

Существует учебник здесь:

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 плагинов для функциональности плейлист

Но это Безразлично 't say как для реализации этих плагинов.

Учебники на страницах плагина (см. Выше) меня смущают, потому что они либо ссылаются на установку вещей через node, либо dist каталогов, которые я не могу найти в репозиториях github.

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 для игрока и исходными элементами, предоставляющими данные, что должно быть показано на видео.