如何在 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>;
}

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

第 2 步

您可以像这样向其中添加默认标签：

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

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

第 3 步

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

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

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

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

How to render videos with List in react-admin?

reactjs

hasura

react-admin

编辑

第 1 步

第 2 步

第 3 步