传多个本地存储视频react js弹窗视频播放器

Question

我使用 ag-grid 创建了 onclick 反应网格视频播放器。之后将 json 数据传递到网格。

通过 json 数据后，我的农业网格看起来像

现在我只通过一个本地存储视频来响应视频播放器（播放按钮）

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": "anbu@gmail.com",
      "phone": "9876543210",
      "dob": "/home/fraction/Music/agGrid-crudOperation/src/video1.mp4"
    },
    {
      "name": "Hari",
      "email": "anbu@gmail.com",
      "phone": "9876543210",
      "dob": "/home/fraction/Music/agGrid-crudOperation/src/video2.mp4",
      "id": 5
    }
  ]
}

我尝试使用地图方法传递视频 url，但它对我不起作用。如何在 React js

中通过 json 文件传递多个视频

有关更多代码详细信息，请参阅 here

非常感谢任何建议和回答提前致谢..

Answer 1

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

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

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

import myData from "../video.mp4" 因为 webpack 而起作用，只是在编译期间将整个视频二进制文件嵌入到您的前端 javascript。

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

如果你真的想让前端读取你的本地文件，你可以使用 File System Access API 并查看 API.

的 , and this is full guide

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

{
  "users": [
    {
      "id": 1,
      "name": "Hari",
      "email": "anbu@gmail.com",
      "phone": "9876543210",
      "dob": "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
    },
    {
      "name": "Hari",
      "email": "anbu@gmail.com",
      "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>

传多个本地存储视频react js弹窗视频播放器

pass multiple local storage videos to react js popup video player

javascript

video-streaming

reactjs