Gigs-live-videoplayer NPM

gigs-live-videoplayer

gigs-live-videoplayer is a package that takes some video data and provides back a video player with custom design and custom controls with so many features supported in HTML Javascript code

Features!

Play / Pause
Fast Forward / Fast rewind video
Adjust volume
Showing upnext video when the video to be ended.
Show more videos from the same artist.
Show Settings for video resolutions and subtitles
Picture in picture functionality
Full Screen.
Display recommended videos at the end of the video.

Tech

gigs-live-videoplaye uses a number of open source projects to work properly:

JS - Javascript for web apps!
Material-icons - Material-icons librray for using iconography.
Bootstrap - great UI boilerplate for modern web apps
Video.js - Videojs, a great library for video players
jQuery - We have used jquery as well.

Installation

Install the dependencies and import it as explained below:

$ npm i gigs-live-videoplayer

Steps to import video player

Install the plugin

create your html file and import below lines into your html file's head secction like below:

<head>
   <script src="path to js-videoPlayer.js"></script>
   <link rel="stylesheet" href="path to js-videoPlayer.css">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

 - craete a div and call a script in your html code where you want to have the player displayed like below:
 ```bash
<div id="videoPlayerMainContainer" onmouseleave="hideControls()"></div>
<script>
        loadPlayer(playerdata)
</script>

Playerdata object values

videoUrl: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
eventTime: 'Live 4 days ago',
eventName: "The Carter's Show",
genres: ["Rock", "Pop", "Punk Rock"],
description: "Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum has been.",
upNextData: `
{
   src: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
   type: 'video/mp4',
   thumbnail: 'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRYxprap62wkB8HTcjgNfBIKIgvLTIa2-07sA&usqp=CAU',
   title: 'The Elphinstones Oaks Show',
   likes: 2213,
   artistName: 'Beyonce',
   duration: '2 hr 54 min'
}`,
videoLibrary: `[
   {
       src: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4',
       type: 'video/mp4',
       thumbnail: 'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRYxprap62wkB8HTcjgNfBIKIgvLTIa2-07sA&usqp=CAU',
       likes: 2213,
       artistName: 'Alpano',
       duration: '2 hr 01 min',
       eventTime: 'Live 4 days ago',
       eventName: 'The Carters Show',
       genres: ['Rock', 'Pop', 'Punk Rock']
   }
],
recommendedVideos: [
   {
       image: 'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRWhfnJsY1nfYEiBSg8SumhQgkkUaYfB1EJdQ&usqp=CAU',
       title: 'London Theatre song',
       artist: 'Beyonce',
       duration: '2 hr 54 min',
       likes: '1M'
   },
   {
       image: 'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcS7Mm5XpGDh7P1N1QzVevLC_7cNe8EZnpA&usqp=CAU',
       title: "Michael Jackson's Glove Is A Singingjoho",
       artist: ' Malang song',
       duration: '54 min',
       likes: 2212
   }
],
videoQualities: ["1080p", "720p", "480p", "360p", "240p", "144p", "auto"]

License

ISC

gigs live videoplayer videojs html player

1.0.0

4 years ago