探索React HTML5Video：一款高效、灵活的HTML5视频组件

import React from 'react';
import PropTypes from 'prop-types';
 
// 定义一个名为HTML5Video的组件
export default function HTML5Video({ autoPlay, controls, loop, muted, poster, preload, src }) {
  // 使用JSX创建video元素
  return (
    <video
      autoPlay={autoPlay}
      controls={controls}
      loop={loop}
      muted={muted}
      poster={poster}
      preload={preload}
      src={src}
    />
  );
}
 
// 定义propTypes验证组件属性
HTML5Video.propTypes = {
  autoPlay: PropTypes.bool,
  controls: PropTypes.bool,
  loop: PropTypes.bool,
  muted: PropTypes.bool,
  poster: PropTypes.string,
  preload: PropTypes.oneOf(['none', 'metadata', 'auto']),
  src: PropTypes.string.isRequired,
};
 
// 定义defaultProps设置属性的默认值
HTML5Video.defaultProps = {
  autoPlay: false,
  controls: true,
  loop: false,
  muted: false,
  poster: '',
  preload: 'auto',
};

这段代码定义了一个名为HTML5Video的React组件，它接受视频播放相关的属性作为props，并使用JSX语法渲染了一个HTML5 <video>元素。同时，它还展示了如何使用PropTypes来验证组件属性，以及如何使用defaultProps来设置默认属性值。这是一个简洁而高效的React视频组件示例。