yigithanyucedag / react-ambient-player

Video player backlight changing according to video content

Home Page:https://www.npmjs.com/package/react-ambient-player

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

React Ambient Player

npm version npm downloads

Screenshot

Video player backlight changing according to video content

Installation

npm install react-ambient-player

Usage

import React from "react";
import AmbientPlayer from "react-ambient-player";

const App = () => {
  return (
    <AmbientPlayer
      videoProps={{
        width: 640,
        height: 360,
      }}
      sources={[
        {
          src: "https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm",
          type: "video/webm",
        },
        {
          src: "https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4",
          type: "video/mp4",
        },
      ]}
    />
  );
};

export default App;

Props

Name Type Default Description
sources Array<{ src: string; type: string; }> undefined Array of sources to be used by the video element.
interval number 5000 Frame extraction interval in milliseconds.
videoProps VideoHTMLAttributes<HTMLVideoElement> undefined Props to be passed to the video element.

License

MIT

Author

yigithanyucedag
Yiğithan

About

Video player backlight changing according to video content

https://www.npmjs.com/package/react-ambient-player


Languages

Language:TypeScript 94.1%Language:CSS 5.9%