vimeoplaylist

Create endless video playlists with the Vimeo Player API.

Usage no npm install needed!

<script type="module">
  import vimeoplaylist from 'https://cdn.skypack.dev/vimeoplaylist';
</script>

README

πŸ“Ό VimeoPlaylist!

A JS lib using the Vimeo Player API to create a playlist of Vimeo Vids (from Vimeo IDs).

Features

  • Playlist built with array of Vimeo IDs or external JSON file
  • UI for playlist items
  • Output of Player, Playlist, Playlist Nav, Fullscreen Toggle conforms to your markup/setup
  • Continuous autoplay of playlist items
  • Equalizer animation when playing
  • Playlist navigation,
  • Fullscreen API control
  • Vimeo API options like width, color, player controls, muted, title
  • and other maybe useful options.

Live Demo of Vimeo Playlists→

πŸ“¦ Dependencies

  • @vimeo/player(derps)

Quickstart

Install from NPM

npm i vimeoplaylist

JS

import VimeoPlaylist form 'vimeoplaylist'

// Plugin Options (with internal data array)
let options = {
  hasPlaylist: true,
  color: '#6c77f7',
  playlist: [
    { "id": "288588748" },
    { "id": "328536852" },
    { "id": "281449879" }
  ]
}

// Init on #js-player
let vids = new VimeoPlaylist('js-player', options).init()

Markup

<!-- Player -->
<div class="player">
  <div id="js-vp-player" class="player__vid"></div>
</div>

<!-- Playlist Nav -->
<nav class="playlist-nav">
  <button id="js-vp-prev" class="playlist-nav__prev"><i>←</i> Prev</button>
  <button id="js-vp-next" class="playlist-nav__next">Next <i>β†’</i></button>
</nav>

<!-- Playlist -->
<div id="js-vp-playlist" class=""playlist>

Styles Wanted to keep the concerns seperate,, but see the demo project for some bsic styles/scss if you don't wanna hand roll your own.

πŸ€– Project Commands

Install Project Deps

npm i

Build

npm run build

Builds src with microbundle to the various common js patterns.

Run Dev

npm run dev

Dev fires up a server watching the files via parcel.js

Run Demo

npm run demo:start

Run a demo project using the lib and fire up a local server using parcel.js. Didn't want to make decisions on the styling of output, but the demo project has styles to get you going if so desired.

Lint

npm run lint

Prettier / Format

npm run format

Usage - Data as External JSON File (with Babel or Parcel)

import VimeoPlaylist from 'vimeoplaylist'
import data from '../data/playlist.json'

let options = {
  playlist: data,
  hasPlaylist: true,
  playlistOutput: '#js-playlist',
  muted: false,
  controls: true,
  color: '#6c77f7',
  fullscreenToggle: '#js-vp-fstoggle',
  fullscreenToggleKeyCode: 'Digit1'
}

let vids = new VimeoPlaylist('js-player', options).init()

Usage - Data as External JSON File (with Request())

import VimeoPlaylist from 'vimeoplaylist'

/**
 * Init VimeoPlaylist class
 * Inside request of external data source
 */
const req = new Request('assets/data/playlist.json') // external json of playlist

fetch(req)
  .then(response => response.json())
  .then(data => {
    let options = {
      playlist: data,
      hasPlaylist: true,
      playlistOutput: '#js-playlist',
      controls: true // etc...
    }
    let vids = new VimeoPlaylist('js-vp-player', options).init()
})

Example JSON file

// playlist.json
[
  {
    "id": "288588748"
  },
  {
    "id": "328536852"
  },
  {
    "id": "281449879"
  }
  ....

Usage - Data as array of IDs

import VimeoPlaylist form 'vimeoplaylist'

// Plugin Options (with internal data array)
let options = {
  color: '#6c77f7',
  hasPlaylist: true,
  playlistOutput: '#js-vp-playlist',
  playlist: [
    { "id": "288588748" },
    { "id": "328536852" },
    { "id": "281449879" }
  ]
}

// Init on #js-player
let vids = new VimeoPlaylist('js-player', options).init()

Markup

<!-- Player (main video embed)-->
<div id="js-vp-player"></div>

<!-- Playlist (list of vids) -->
<div id="js-vp-playlist"></div>

<!-- Playlist Nav -->
<nav class="playlist-nav">
  <button id="js-vp-prev" class="playlist-nav__prev"><i>←</i> Prev</button>
  <button id="js-vp-next" class="playlist-nav__next">Next <i>β†’</i></button>
</nav>

Playlist Template

src/plist.tmpl.js contains the markup for playlist items. It looks like this:

<article='plist-item'>
  <a class="plist-item__link" data-vimeo-id="${data.id}" tabindex="0">
    <figure class="plist-item__thumb">
      <div class="plist-item__thumb-color">
        <img class="plist-item__thumb-img" src="${data.thumbnail_large}"/>
        <svg class="plist-item__icon-play" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#fff" width="50" height="50" viewBox="0 0 36 36">
          <path d="M 12,26 18.5,22 18.5,14 12,10 z M 18.5,22 25,18 25,18 18.5,14 z"></path>
        </svg>
      </div>
    </figure>
    <div class="plist-item__main">
      <span class="plist-item__title">${data.title}</span>
      <span class="plist-item__user">${data.user_name}</span>
      <span class="plist-item__time-dur">${timeDuration}</span>
      <div class="equalizer">
        <span class="equalizer__item"></span>
        <span class="equalizer__item"></span>
        <span class="equalizer__item"></span>
      </div>
    </div>
  </a>
</article>

When related Vid is playing, the playlist item rocks an is-playing class. Again, see the demo project/folder for some scss styles if you don't want to hand-roll your own from scratch.

πŸ•Ή Options

Option Type Description Default
hasPlaylist Boolean Make false if you need endless vids, but not playlist ui true
playlistOutput string id or class to output playlist #js-vp-playlist
playlist Array of Objects playlist as array of objects { "id" : } []
playlistNavPrev String / Element ID id of Prev nav element #js-vp-prev
playlistNavNext String / Element ID id of Next element #js-vp-next
width Number Video width in px 900
title Boolean Show video title false
muted Boolean Mute vids false
controls Boolean Show player controls true
autoplay Boolean Autoplay vids (required for continuous playlist vids) true
fullScreenToggle Boolean Clicking Enter triggers fullscreen vid false
color String (3 or 6 digit hex value) Player ui color #7B8EF9
fullscreenToggle String / Element ID id of fullscreen video toggle control #js-vp-fstoggle
fullscreenToggleKeyCode String / Element ID full screen toggle keycode Digit1

🧭 Playlist Navigation

Options exist for playlist navigation.

Default Nav ids

<!-- Playlist Nav -->
<nav class="playlist__nav">
  <button id="js-vp-prev" class="playlist__prev"><i>←</i> Prev</button>
  <button id="js-vp-next" class="playlist__next">Next <i>β†’</i></button>
</nav>

Customize Nav Ids

let options = {
  ...
  playlistNavNext: '#js-next',
  playlistNavPrev: '#js-prev',
}

πŸ–₯️ Fullscreen Toggle

Leverage the fullscreen api to launch currently playing vid as fullscreen. Fullscreen mode repains during autoplay.

Default FS Toggle

<!-- Playlist Full Screen Toggle -->
<button id="js-vp-fstoggle" class="playlist__fstoggle">Fullscreen</button>

Customize FS Toggle Ids

Provide a KeyboardEvent.code string.

let options = {
  ...
  fullscreenToggleKeyCode: 'Digit1',
}

πŸ“… ToDos

  • Provide template for displaying current Video's info (title, author, times, etc)
  • Option for custom playlist template
  • Perhaps support for multiple instances per page, with everything scoped to element.