TexturalVideo

The TexturalVideo component renders a HTML5 video element with primary and secondary video sources. It also has options to set the className and poster props, and other attributes of the HTML <video> element.

Installation

npm install @madeinhaus/textural-video

Import

import TexturalVideo from '@madeinhaus/textural-video';

Props

className string
The CSS class name to apply to the container element.
primaryVideoUrl: string (required)
The URL of the primary video file.
primaryVideoType: string (default: "video/webm")
The type of the primary video file.
secondaryVideoUrl: string
The URL of the secondary video file.
secondaryVideoType: string (default: "video/mp4")
The type of the secondary video file.
poster: string
The URL of the poster image for the video.
Other props: Any other valid HTML <video> attributes.

Usage

Basic Usage

TexturalVideoDemoBasic.tsx

import TexturalVideo from '@madeinhaus/textural-video';
 
const TexturalVideoDemoBasic: React.FC = () => {
  return (
    <TexturalVideo
      primaryVideoUrl="https://example.com/video.webm"
      secondaryVideoUrl="https://example.com/video.mp4"
    />
  );
};
 
export default TexturalVideoDemoBasic;

Transparent Usage

TexturalVideoDemoTransparent.tsx

import TexturalVideo from '@madeinhaus/textural-video';
 
const TexturalVideoDemoTransparent: React.FC = () => {
  return (
    <TexturalVideo
      primaryVideoUrl="https://example.com/transparent-video.mp4"
      primaryVideoType='video/mp4; codecs="hvc1"'
      secondaryVideoUrl="https://example.com/transparent-video.webm"
      secondaryVideoType="video/webm"
    />
  );
};
 
export default TexturalVideoDemoTransparent;