在ant design pro中，使用video和audio标签播放视频和音频

1、播放视频

我使用ModalForm弹框显示，autoPlay设置是否自动播放，controls设置操作按钮是否显示，设置好宽度和高度即可

src是配置视频文件的链接

<ModalForm
        title="播放视频"
        width={1200}
        visible={videoModalVisible}
        onVisibleChange={setVideoModalVisible}
        onFinish={async () => {
          setVideoModalVisible(false);
        }}
        modalProps={{
          destroyOnClose: true,
          maskClosable: false,
          cancelText: '',
          okText: '关闭',
        }}
      >
        <video src={videoUrl} autoPlay controls width="100%" height={600}></video>
      </ModalForm>

效果

2、播放音频

同样使用ModalForm弹框显示，autoPlay设置是否自动播放，不过宽度和高度设置好像不生效，因为现实的播放器是浏览器自带的播放器，不同浏览器的播放器样式也不同

src是配置音频文件的链接

<ModalForm
        title="播放音频"
        width={600}
        visible={audioModalVisible}
        onVisibleChange={setAudioModalVisible}
        onFinish={async () => {
          setAudioModalVisible(false);
        }}
        modalProps={{
          destroyOnClose: true,
          maskClosable: false,
          cancelText: '',
          okText: '关闭',
        }}
      >
        <audio src={audioUrl} autoPlay controls width="100%"></audio>
      </ModalForm>