reactjs-video-playlist-player

A React component that allows you to play and control a playlist of videos

Install

npm install --save reactjs-video-playlist-player

Demo

This demo site was built using Github Pages Demo site

The demo videos are coming from here https://gist.github.com/jsturgis/3b19447b304616f18657

Usage

import React, { Component } from "react";

import {
  Playlist,
  goToNextVideo,
  goToPreviousVideo
} from "reactjs-video-playlist-player";

function App() {
  const [videoList, setVideoList] = useState([
    {
      thumbnail: "https://via.placeholder.com/500/FFA500/FFFFFF",
      url:
        "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4",
      imgAlt: "Image 1 not found"
    },
    {
      thumbnail: "https://via.placeholder.com/500/FF0000/FFFFFF",
      url:
        "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/Sintel.mp4",
      imgAlt: "Image 2 not found"
    },
    {
      thumbnail: " ",
      url:
        "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4",
      imgAlt: "Image 3 not found"
    },
    {
      thumbnail: "https://via.placeholder.com/500/FFFF00/000000",
      url:
        "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4",
      imgAlt: "Image 4 not found"
    },
    {
      thumbnail: "",
      url:
        "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerJoyrides.mp4",
      imgAlt: "Image 5 not found"
    }
  ]);

  const [currentVideo, setCurrentVideo] = useState(0);
  const vidRef = createRef(null);

  const params = {
    videos: list,
    autoPlay: true,
    showQueue: true,
    playForward: true,
    defaultQueueItemPlaceholderThumbnail: videoPlaceHolder,
    currentVideo: currentVideo,
    setCurrentVideo: setCurrentVideo,
    vidRef: vidRef
  };

  return (
    <div className="App">
      <h3 id="title">
        <span>React.js</span> video playlist player 🎥
      </h3>
      <div>
        <Playlist playlistParams={params} />
      </div>
    </div>
  );
}

export default App;

Params object

  const params = {
    videos: list,
    autoPlay: true,
    showQueue: true,
    playForward: true,
    defaultQueueItemPlaceholderThumbnail: videoPlaceHolder,
    currentVideo: currentVideo,
    setCurrentVideo: setCurrentVideo,
    vidRef: vidRef
  }

| parameter | description | | ------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | | videos | list of videos [{thumbnail : "", url : ""}] | | autoplay | videos in the playlist play one after the other without user interaction (true) or (false) | | showQueue | show videos queue (true) or (false) | | playForward | play videos by incrementing (true) or (false) | | defaultQueueItemPlaceholderThumbnail | image to display if thumbnail is not provided in video object ("/path/to/video") | | currentVideo | state variable that contains the currently selected video in the playlist (const [currentVideo , setCurrentVideo] = useState(0)) | | setCurrentVideo | function that updates the state variable that contains the currently selected video playlist (const [ currentVideo,setCurrentVideo] = useState(0)) | | vidRef | video ref (constvidRef= createRef(null)) |

Video object

{
  thumbnail: "",
  url: "",
  imgAlt: ""
},

| parameter | description | | --------- | ---------------------------------------------------------------- | | thumbnail | link ok thumbnail image of video in videos queue | | url | link of video | | imgAlt | Text to display if thumbnail link is not working (alt attribute) |

Methods

goToPreviousVideo Direction depends on the playForward parameter

goToPreviousVideo(params)

goToNextVideo Direction depends on the playForward parameter

goToNextVideo(params)

Styling

Create a css file add the classes below and import it

• video-container-styles
• video-styles
• playlist-queue-styles
• playlist-queue-item-styles
• current-playing-video-styles (Only the currently selected item in the list of videos has this class)
• thumbnail-styles

The image below describes the markup of the component and the relationship between the CSS classes

CSS Example

.video-container-styles {
  width: 60%;
  margin: 0 auto;
}

.playlist-queue-styles {
  box-shadow: 0px 0px 1px white;
  display: flex;
  align-items: center;
  overflow-x: auto;
  background-color: #212836;
}

.playlist-queue-item-styles {
  margin: 5px;
  cursor: pointer;
  min-width: 60px;
  max-width: 60px;
  min-height: 60px;
  max-height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 4px solid transparent;
}

.current-playing-video-styles {
  box-shadow: 0px 0px 2px white;
  transition: 0.2s;
}

.thumbnail-styles {
  width: 100%;
  height: 100%;
}

.video-styles {
  width: 100%;
  height: 500px;
  object-fit: cover;
}

@media screen and (max-width: 549px) {
  .video-container-styles {
    width: 100%;
  }
}

License

The code in this project is licensed under the MIT license

Author

AmineAboutaieb