如何在react-admin的List列表中渲染可播放的视频资源

解决方案 #

react-admin没有内置的视频字段渲染组件，你可以通过自定义字段组件快速实现需求，操作步骤如下：

1. 编写自定义VideoField组件 #

import { useRecordContext } from 'react-admin';

const VideoField = ({ source, label, maxWidth = 200, maxHeight = 150 }) => {
  const record = useRecordContext();
  // 处理video为null的空数据情况
  if (!record || !record[source]) return null;

  return (
    <video 
      src={record[source]} 
      controls 
      style={{ maxWidth, maxHeight, objectFit: 'contain' }}
      alt={label}
    />
  );
};

FileField默认只会渲染文件下载链接/图标，不会自动识别视频资源并渲染播放器，自定义组件可以完全控制展示和交互逻辑。

2. 替换Datagrid中的对应字段 #

将你原来写的FileField替换为上面自定义的VideoField即可：

<Datagrid>
  <TextField label="Post ID" source="id" sortByOrder="ASC" />
  {/* 替换原来的FileField */}
  <VideoField label="Content" source="video" sortByOrder="ASC" />
  <TextField label="Content Type" />
  <UserSum source="id" />
  <SimpleForm {...props} label="Flagged">
    <ApproveData source="id" />
  </SimpleForm>
  <DateField label="Posted On" source="createdAt" showTime />
  <PostListActionToolbar>
    <ShowButton label="Details" color="secondary" />
    <EditButton label="Archive" color="secondary" />
  </PostListActionToolbar>
</Datagrid>

你可以根据需求调整maxWidth、maxHeight参数控制列表里的视频显示尺寸，如果需要点击后弹窗播放高清版本，也可以在当前组件基础上扩展模态框逻辑即可。

内容的提问来源于stack exchange，提问作者theKid