artree-react-video-tag
v0.1.1
Published
Render <video> in React using dangerouslySetInnerHTML.
Downloads
5
Maintainers
Readme
react-video-tag
This package was created because React does not render <video>
correctly.
Specifically it does not render the muted
attribute, which means it's
not possible to get some videos to behave as GIFS on mobile devices.
See: https://github.com/facebook/react/issues/6544
Usage
npm install react-video-tag
# or
yarn add react-video-tag
import { videoTagString, VideoTag } from 'react-video-tag'
// reactVideoTag renders a string from props.
videoTagString({ src: '...', poster: '...' })
// ReactVideoTag renders a wrapping span and uses dangerouslySetInnerHTML.
const MyComponent = () => <VideoTag src={mySrc} poster={myPoster} />
Props:
export interface VideoTagProps {
src: string
poster: string
type: string
muted: boolean
autoPlay: boolean
playsInline: boolean
loop: boolean
}
By default the props on this component make it behave like a GIF:
const defaults = {
type = 'video/mp4',
muted = true,
autoPlay = true,
playsInline = true,
loop = true,
}