Can't find videojs-playlist.js

[Antecer]

Sorry, i can't find videojs-playlist.js from this repository.

[pdebruic]

run npm run-script build in the project directory

[mrmookie]

I'm not a developer and not very familiar with npm/node, I think the instructions for the project should be more clear on how to properly install, include, and use it. I'm sure it's easy for people with a fundamental understanding of npm and where/how it installs and works..

Following the instructions for installation was incomplete and installed a bunch of stuff in /usr/local/node-modules/ and more importantly it didn't include the actual videojs-playlist.js:

npm install videojs-playlist <-- Does not create the file 'videojs-playlist.js' so how do I include it as the next line in the readme states?

I eventually figured it out thanks to the response here from @pdebruic.

Just my two cents.

[sn3p]

You can also get it here: https://www.jsdelivr.com/package/npm/videojs-playlist

Either load it directly from CDN:

<script src="https://cdn.jsdelivr.net/npm/videojs-playlist/dist/videojs-playlist.min.js"></script>

Or download and host it yourself.

[coooo77]

here is a basic usage with vue3, typescript and unocss with video.js 8.17.2 and videojs-playlist 5.1.2

<template>
  <video
    id="player"
    class="video-js vjs-default-skin vjs-big-play-centered vjs-fill"
  />
</template>

<script lang="ts" setup>
/* methods */
import "videojs-playlist";
import videoJs from "video.js";
import { onMounted, ref } from "vue";
import "video.js/dist/video-js.css";

/* types */
import type VideoJsPlayer from "video.js/dist/types/player";

interface Playlist {
  currentIndex(): number;

  autoadvance(delay: number): void;

  currentItem(i: number): object;

  previous(): object;

  next(): object;
}

interface Player extends VideoJsPlayer {
  readonly playlist: Playlist;
}

const currentPlayIdx = ref(0);

const initPlayer = () => {
  const player = videoJs(
    "player",
    {
      controls: true,
      preload: "auto",
      plugins: {
        playlist: [
          {
            sources: [
              {
                src: "http://media.w3.org/2010/05/sintel/trailer.mp4",
                type: "video/mp4",
              },
            ],
          },
          {
            sources: [
              {
                src: "http://media.w3.org/2010/05/bunny/trailer.mp4",
                type: "video/mp4",
              },
            ],
          },
          {
            sources: [
              {
                src: "http://vjs.zencdn.net/v/oceans.mp4",
                type: "video/mp4",
              },
            ],
          },
        ],
      },
    },
    () => player.autoplay(true)
  ) as Player;

  const control = player.getChild("ControlBar");

  control?.addChild("button", {
    clickHandler: () => player.playlist.previous(),
    className: "w-8 h-8 i-mdi:menu-left !bg-white",
  });

  control?.addChild("button", {
    clickHandler: () => player.playlist.next(),
    className: "w-8 h-8 i-mdi:menu-right !bg-white",
  });

  player.on("loadstart", () => {
    currentPlayIdx.value = player.playlist.currentIndex();
  });

  player.playlist.autoadvance(0);
};

onMounted(() => {
  initPlayer();
});
</script>