@use-hooks/video-meta

Custom React Hooks for video meta.

Usage no npm install needed!

<script type="module">
  import useHooksVideoMeta from 'https://cdn.skypack.dev/@use-hooks/video-meta';
</script>

README

react-hooks-video-meta

NPM version npm download Build Status

Custom React Hooks for video meta.

Install

Note: Make sure that you have installed the correct version of react(>= v16.8.0) and react-dom(>= v16.8.0).

npm

npm install --save @use-hooks/video-meta

yarn

yarn add @use-hooks/video-meta

API

Params

/**
 * Params
 * @param {string} url - The url of video
 */

Returns

/**
 * Returns
 * @param {number} width - The width of video
 * @param {number} height - The height of video
 * @param {number} duration - The duration of video
 */

Usage

import React from 'react';

import useVideoMeta from '@use-hooks/video-meta';

export default function App() {
  const url = 'https://cdn.int64ago.org/p26nad4i.mp4';
  const {
    width,
    height,
    duration,
  } = useVideoMeta(url);

  return (
    <div>
      <h2>DEMO of <span style={{ color: '#F44336' }}>@use-hooks/video-meta</span></h2>
      <div>
        {/* eslint-disable-next-line */}
        <video src={url} controls height={200} />
        <div>Width: {width}, Height: {height}, Duration: {duration}</div>
      </div>
    </div>
  );
}

Live Show

Development

Node >= v8 LTS

  • Clone the project to local disk
  • npm install
  • npm start

License

MIT

Generated by create-react-hooks.