Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- type TWebmComponent = React.FC<{ videoUrl: string; fallbackUrl: string; description: string; onClick?: (e) =>void }>
- const WebmComponent: TWebmComponent = ({ videoUrl, fallbackUrl, description, onClick = () => null }) => {
- const supportsWebm = !!document.createElement('video').canPlayType
- return (
- <>
- <figure className="figure">
- <a
- href={supportsWebm ? videoUrl : fallbackUrl}
- target="_blank"
- rel="noopener noreferrer"
- onClick={onClick}
- >
- <video
- preload="auto"
- loop={true}
- poster={fallbackUrl}
- autoPlay={true}
- className="figure-img img-fluid rounded img-thumbnail"
- >
- <source src={videoUrl} type="video/webm"></source>
- <source src={videoUrl} type="video/mp4"></source>
- </video>
- </a>
- <figcaption className="figure-caption text-center">{description}</figcaption>
- </figure>
- </>
- )
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement