🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket
DemoInstallSign in
Socket

reactjs-video-playlist-player

Package Overview
Dependencies
Maintainers
1
Versions
7
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

reactjs-video-playlist-player

A React component that allows you to play a list of videos

1.1.1
latest
Source
npm
Version published
Weekly downloads
1
Maintainers
1
Weekly downloads
 
Created
Source

reactjs-video-playlist-player

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

NPM JavaScript Style Guide License: MIT

Install

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

Demo

This demo site was built using Github Pages Demo site

alt text

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
  }
parameterdescription
videoslist of videos [{thumbnail : "", url : ""}]
autoplayvideos in the playlist play one after the other without user interaction (true) or (false)
showQueueshow videos queue (true) or (false)
playForwardplay videos by incrementing (true) or (false)
defaultQueueItemPlaceholderThumbnailimage to display if thumbnail is not provided in video object ("/path/to/video")
currentVideostate variable that contains the currently selected video in the playlist (const [currentVideo , setCurrentVideo] = useState(0))
setCurrentVideofunction that updates the state variable that contains the currently selected video playlist (const [ currentVideo,setCurrentVideo] = useState(0))
vidRefvideo ref (constvidRef= createRef(null))

Video object

{
  thumbnail: "",
  url: "",
  imgAlt: ""
},
parameterdescription
thumbnaillink ok thumbnail image of video in videos queue
urllink of video
imgAltText 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

alt text

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

Keywords

React

FAQs

Package last updated on 14 Mar 2022

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts