
Security News
NIST Under Federal Audit for NVD Processing Backlog and Delays
As vulnerability data bottlenecks grow, the federal government is formally investigating NIST’s handling of the National Vulnerability Database.
reactjs-video-playlist-player
Advanced tools
A React component that allows you to play a list of videos
A React component that allows you to play and control a playlist of videos
npm install --save reactjs-video-playlist-player
This demo site was built using Github Pages Demo site
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;
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) ) |
{
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) |
goToPreviousVideo
Direction depends on the playForward
parameter
goToPreviousVideo(params)
goToNextVideo
Direction depends on the playForward
parameter
goToNextVideo(params)
The image below describes the markup of the component and the relationship between the CSS classes
.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%;
}
}
FAQs
A React component that allows you to play a list of videos
The npm package reactjs-video-playlist-player receives a total of 1 weekly downloads. As such, reactjs-video-playlist-player popularity was classified as not popular.
We found that reactjs-video-playlist-player demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
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.
Security News
As vulnerability data bottlenecks grow, the federal government is formally investigating NIST’s handling of the National Vulnerability Database.
Research
Security News
Socket’s Threat Research Team has uncovered 60 npm packages using post-install scripts to silently exfiltrate hostnames, IP addresses, DNS servers, and user directories to a Discord-controlled endpoint.
Security News
TypeScript Native Previews offers a 10x faster Go-based compiler, now available on npm for public testing with early editor and language support.