8

Desired Behaviour

  • A responsive video.js player with playlist (official demo here)
  • in a Google Apps Script environment
  • with firewall restrictions, which therefore requires self-hosted files.

The Google Apps Script application behind a firewall condition is irrelevant, apart from the fact that it means I need to know exactly what files are required so that I can add them individually to the Google Apps Script project.

What I've Tried

There is a tutorial here:

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

Which culminates in the following HTML and 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;
}

It also states:

For this example, We’re using the videojs-playlist-ui and videojs-playlist plugins for the playlist functionality

But it doesn't say how to implement those plugins.

The tutorials on the plugin pages (linked above) are confusing to me because they either refer to installing things via node, or to dist directories that I can't find in the github repo's.

jsFiddle

I've made a start on recreating the scenario in a jsFiddle here and have added the following files as resources:

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

It obviously requires the plugin files as well, but I don't know:

  • Which files need to be added

  • How they should be referenced

user1063287
  • 10,265
  • 25
  • 122
  • 218

1 Answers1

0

Hope this may help you

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>

If I'm not wrong you may have confused with the div for the player and the source elements providing the data what should be shown video.

visrey
  • 423
  • 6
  • 12