❤
npm
Sign UpSign In

react-web-media-player

1.1.6 • Public • Published

Build Status Coverage Status Package Quality

React Web Media Player Logo

A React Player that can play videos, audio tracks, slideshows, with an easily customizable design.

Please find the demo here and the full API documentation here.

Installation

npm install react-web-media-player --save
# or 
yarn add react-web-media-player
import React, { Component } from 'react';
import ReactWebMediaPlayer from 'react-web-media-player';
 
class App extends Component {
  render() {
    return <ReactWebMediaPlayer
        title="My own video player"
        video="https://any-link.com/my-video.mp4" 
        thumbnail="https://any-link.com/video-thumbnail.jpg"
    />
  }
}

Video

To play a video pass the following options:

<ReactWebMediaPlayer
  title="My own video player"
  video="https://any-link.com/my-video.mp4" 
  thumbnail="https://any-link.com/video-thumbnail.jpg"
/>

Note: not all the video formats are supported by each browser

Audio

To play an audio track, pass the following options:

<ReactWebMediaPlayer
  title="My own audio player"
  audio="https://any-link.com/my-music.mp3" 
  thumbnail="https://any-link.com/audio-thumbnail.jpg"
/>

You can choose a vinyl display, by adding the vinyl property with the number of rounds per minut rpm and the image img to display:

<ReactWebMediaPlayer
  title="My own vinyl player"
  audio="https://any-link.com/my-music.mp3" 
  thumbnail="https://any-link.com/audio-thumbnail.jpg"
  vinyl={{img: "https://any-link.com/vinyl.jpg", rpm: 33 }}
/>

Note: not all the audio formats are supported by each browser

Slideshow

To play a slideshow, pass the following options:

<ReactWebMediaPlayer
  title="My own slideshow player"
  thumbnail="https://any-link.com/slideshow-thumbnail.jpg"
  slideshow={[
    { src: "https://any-link.com/slide1.jpg", endTime: 4.0 },
    { src: "https://any-link.com/slide2.jpg", endTime: 8.0 },
    { src: "https://any-link.com/slide3.jpg", endTime: 12.0 },
    { src: "https://any-link.com/slide4.jpg", endTime: 16.0 }
  ]}
  logo={{ 
    img: "https://any-link.com/your-logo.png", 
    href: "https:/redirection-link.com" 
  }}
/>
 

You can add an audio track, that will be synchronized with the slideshow by adding the audio option :

<ReactWebMediaPlayer
  title="My own audio-slideshow player"
  audio="https://any-link.com/my-music-to-synchronize.mp3" 
  thumbnail="https://any-link.com/slideshow-thumbnail.jpg"
  slideshow=...
/>

Note: the duration of the slideshow will be the duration of the player

Customization

  • Choose the menu color
  • Choose the player title
  • Choose the thumbnail
  • Add your custom buttons
  • Add your logo

To find how, look at the component properties explained here.

Readme

Keywords

Package Sidebar

Install

npm i react-web-media-player

Repository

github.com/JohannC/React-Web-Media-Player

Homepage

github.com/JohannC/React-Web-Media-Player#readme

Weekly Downloads

51

Version

1.1.6

License

MIT

Unpacked Size

1.63 MB

Total Files

182

Last publish

Collaborators

  • jrebecchi
Try on RunKit
Report malware