dbl-components/src/js/media/video.js

Framework based on bootstrap 5

import React from "react";
import PropTypes from "prop-types";

import Component from "../component";

export default class Video extends Component {
  static jsClass = 'Video';
  static propTypes = {
    ...Component.propTypes,
    autoPlay: PropTypes.bool,
    controls: PropTypes.bool,
    height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
    loop: PropTypes.bool,
    muted: PropTypes.bool,
    playsInline: PropTypes.bool,
    poster: PropTypes.string,
    preload: PropTypes.oneOf(['none', 'metadata', 'auto', true]),
    src: PropTypes.string,
    width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  };
  tag = 'video';

  get componentProps() {
    const {
      autoPlay, controls,
      height, loop, muted,
      playsInline, poster,
      preload, src, width
    } = this.props;
    return {
      autoPlay, controls,
      height, loop, muted,
      playsInline, poster,
      preload, src, width,
      ...this.props._props
    };
  }

  content(children = this.props.children) {
    if (this.props.src) return false;
    return (Array.isArray(this.props.sources) ? this.props.sources : [this.props.sources]).map((s, i) =>
      s && React.createElement('source', { src: s.src, type: s.type, key: i })
    );
  }
}