JSPM

use-video-previewer

1.0.4
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 1
  • Score
    100M100P100Q21535F

Package Exports

  • use-video-previewer
  • use-video-previewer/dist/cjs/index.js
  • use-video-previewer/dist/esm/index.js

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 (use-video-previewer) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Video Previewer for VOD Project

Demo Gif

The use-video-previewer is a custom hook designed to facilitate fast and efficient previsualization of video content in Video on Demand (VOD) projects similar to Netflix, Prime Video and Tabii. This hook provides an easy-to-use interface for fetching and displaying video previews for different video formats such as HLS, Dash, and mp4.

Features

  • Fetch and display video previews for various video formats (HLS, Dash, mp4, etc.).
  • Effortless integration with React projects using custom hooks.

Table of Contents

Installation

To use the use-video-previewer package in your project, you can install it via npm or yarn:

npm install use-video-previewer

or

yarn add use-video-previewer

Usage

After installation, you can import and use the hooks in your React components:

import React from 'react';
import { useVideoPreviewer } from "use-video-previewer";

function MyComponent() {
  const [PreviewComponent, videoElement] = useVideoPreviewer({
    isMuted: false,
    mediaUri: "https://dash.akamaized.net/dash264/TestCases/1c/qualcomm/2/MultiRate.mpd",
    debounce: 1200,
  });

  return (
    <>
      <div
        style={{
          width: "380px",
          height: "420px",
          background: "red",
          position: "relative",
          marginBottom:"20px"
        }}
      >
        {PreviewComponent}
      </div>

      <button onClick={() => videoElement?.play()}>Play</button>
      <button onClick={() => videoElement?.pause()}>Pause</button>
    </>
  );
}

License

This project is licensed under the MIT License. You are free to use, modify, and distribute this code as permitted by the license. See the LICENSE file for more details.