ComponentsTexturalVideo

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;