JSPM – react-web-media-player@1.1.6

Package Exports

react-web-media-player

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-web-media-player) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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.