reactjs-video-playlist-player
v1.1.1
Published
A React component that allows you to play a list of videos
Downloads
18
Maintainers
Readme
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 (const
vidRef= 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%;
}
}