传递多个本地存储视频进行React JS弹出视频播放器

Question

我使用AG-Grid创建了OnClick React Grid视频播放器。之后，将JSON数据传递到网格。

传递JSON数据后，我的Ag-Grid看起来像

现在，我只通过了一个本地存储视频来反应视频播放器（Play play Buter） ）

import myData from "../video.mp4"
   ....
   ....
    <DialogContent>
        <iframe width="560" height="315" src={myData} allowFullScreen></iframe>
        </DialogContent>

src = {mydata}在我的本地存储中表示 video.mp4 ，现在如何使用多个视频通过json文件来反应视频播放器

我的json文件结构：

{
  "users": [
    {
      "id": 1,
      "name": "Hari",
      "email": "[email protected]",
      "phone": "9876543210",
      "dob": "/home/fraction/Music/agGrid-crudOperation/src/video1.mp4"
    },
    {
      "name": "Hari",
      "email": "[email protected]",
      "phone": "9876543210",
      "dob": "/home/fraction/Music/agGrid-crudOperation/src/video2.mp4",
      "id": 5
    }
  ]
}

我尝试通过视频url使用地图方法，但它不起作用。如何通过React JS中的JSON文件传递多个视频，

以获取更多代码详细信息，请参阅在这里

任何建议和建议回答事先感谢您。

Answer 1

猜测这里的本地存储是指视频所在的存储库文件夹。

它不起作用的主要原因是因为您的前端没有提供视频。

我建议进行服务器端设置并为每个视频提供一个网址。然后只需在前端中引用该 url，而不是在前端中嵌入整个 mp4。

import myData from "../video.mp4" 之所以有效，是因为 webpack 在编译期间只是将整个视频二进制文件嵌入到前端 JavaScript 中。

对于多个视频的情况，它不起作用的原因很简单，它们在您的 JavaScript 中不是 require 或 import ，因此它们没有嵌入到您的前端代码中。

如果您确实想让前端读取本地文件，您可以使用文件系统访问 API 并查看此参考，这是 API 的完整指南。

如果您想使用 map()，您可以将 json 更改为类似这样的内容，其中 dob 作为您的视频网址。

{
  "users": [
    {
      "id": 1,
      "name": "Hari",
      "email": "[email protected]",
      "phone": "9876543210",
      "dob": "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
    },
    {
      "name": "Hari",
      "email": "[email protected]",
      "phone": "9876543210",
      "dob": "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4",
      "id": 5
    }
  ]
}

然后在您的 iframe 中，使用视频的 dob url

<iframe width="420" height="315"
            src={dob}>
</iframe>