Open Antecer opened 4 years ago
run npm run-script build
in the project directory
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.
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.
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>
Sorry, i can't find videojs-playlist.js from this repository.