如何在 react-admin 中使用 List 渲染视频？

Question

我有一个关于 react-admin 的问题。所以我正在构建这个 Hasura-graphQL 的管理列表。我可以使用我正在使用的 ImageField 组件渲染图像：

<ImageField label="Image" source="image" sortByOrder="DESC"/>

而且我在渲染时没有问题。但是，当我需要渲染来自我的 graphQL 模式的 URL 中的视频时，问题就出现了。像这样的：

        "video": "https://myappvideo.blob.core.windows.net/posts/post_93753139-524a-4c85-a0fc-d40b47bd95f5.mp4?se=2030-12-31&sp=rwdlac&sv=2018-03-28&ss=btf&srt=sco&sig=oeyHYsiWC79a1z7fcgsPPdJzeC499t%2BwPkbImcctpJE%3D",
        "id": 471
      },
      {
        "video": null,
        "id": 493
      },
      {
        "video": "https://myappvideo.blob.core.windows.net/posts/post_f9c59f2f-3d2e-4c63-ae1e-65e5324866ad.mp4?se=2030-12-31&sp=rwdlac&sv=2018-03-28&ss=btf&srt=sco&sig=oeyHYsiWC79a1z7fcgsPPdJzeC499t%2BwPkbImcctpJE%3D",
        "id": 476
      },[...]

如何在我的 react-admin 列表中呈现视频？我可以在哪里显示视频并可以点击和复制？

React-admin 有一种渲染图像的方法，但我可以看到类似的视频。 任何帮助将不胜感激！

编辑

这就是我实际尝试的方式：

          <Datagrid>
              <TextField label="Post ID" source="id" sortByOrder="ASC" />
              
           //I am using FileField for this, but it does not work
              <FileField label="Content" source="video" rel="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>

Answer 1

好的，我只是想办法做到这一点。实际上 react-admin 没有办法渲染视频。因此，在这种情况下，您必须创建自己的组件。

步骤 1

是创建函数：

const VideoField = (props) => {
  const record = useRecordContext(props);
  return <video src={`${record.video}`} controls width="320" height="240"></video>;
}

在这种情况下，您必须在视频标签内插入视频记录。我添加了控件以及宽度和高度以在视频中添加更多视图

第二步

你可以像这样添加一个默认标签：

VideoField.defaultProps = { label: 'Video' };

这是必要的，因为它会将您的内容标记在列表的顶部。

第三步

然后将您的函数添加到数据网格内的组件中，您将拥有如下内容：

像这样在你的数据网格上添加它

 <Datagrid>
      <TextField label="Post ID" source="id" sortByOrder="ASC" />
      <VideoField source="video" />
      <TextField label="Content Type" />
    </Datagrid>