Refer multiple Local video's path with API Response

Admin 1
Viewed 69

data's are i stored video path in Redis database like shown below :

r.hset("10-10-21",  "12am", "videos/Fastapi/video1.mp4" ),
r.hset("10-10-21",  "1am",  "videos/Fastapi/video2.mp4" ),
r.hset("10-10-21",  "2am",  "videos/Fastapi/video3.mp4" ),

In react create a simple date picker with API, sending a request to API. After getting a response from API, data is fetched on display and convert as a URL, API response as URL

My code for calling API and mapping function.

import React, { Component } from 'react'
import axios from 'axios'
// import '../App.css'

class PostForm extends Component {
    constructor(props) {
        super(props)

        this.state = {
            key: '10-10-21',
            // Where data will be saved.
            data: [],
        }
        console.log(this.state)
    }

    changeHandler = e => {
        this.setState({ [e.target.name]: e.target.value })
    }

    submitHandler = e => {
        e.preventDefault()
        
        axios
        .get(`http://127.0.0.1:8000/hvals_hash?key=${this.state.key}`)
        .then(response => {
                        // Updating the state to trigger a re-render       
            this.setState({data: response.data});
            console.log(response)
        })
        .catch(error => {
            console.log(error)
        })
    }

    render() {
        const { key } = this.state
        
        return (
            <center><div>
                <form onSubmit={this.submitHandler}>
                    <div>
                        <h2> DATE PICKER</h2><br></br>
                        <input
                            type="text"
                            name="key"
                            value={key}
                            onChange={this.changeHandler}
                        />
                        
                    </div>
                    <br></br>
                    <button type="submit">Submit</button>
                </form>
            <div>
            <table>
                <br/>
                <tr>
                    <th>videos</th>
                    {/* <th>Buttons</th> */}
                </tr>
                {this.state.data.map((data) => 
                {
                    return (
                    <div>
                        <tr>
                        {  
                        <ul>
                        <a href="">{data}</a>
                        </ul>
                        }
                        </tr>
                    </div>
                    );
                })}
            </table>
            </div>
            
            </div></center>
        )
    }
}
export default PostForm

Now How to call Local video dynamically via URL method And pass video to react video player.

React video player code

Summary :

  1. How to access local video through URL's
  2. Pass video to react video player
axios reactjs node.js api javascript
1 Answers

First of all, the links should be valid WEB links. For example

http://your.domain.com/videos/Fastapi/video1.mp4
http://your.domain.com/videos/Fastapi/video2.mp4

The video files must be accessible via those links. You need to make sure that the server serves the video files as static files. Here is how you can do this in Express: https://expressjs.com/en/starter/static-files.html

Then, you can use the links in the video-react, for example

import React, { Component } from 'react';
import { Player } from 'video-react';

class PostForm extends Component {
  constructor() {
    this.state = {
      links: []
    };
    /*
    // Links are fetched from the server.
    links = [
      http://your.domain.com/videos/Fastapi/video1.mp4,
      http://your.domain.com/videos/Fastapi/video2.mp4
    ];
    */
  } 

  render() {
    <div>
      {links.map((link, i) => {
        <div key={i}>
          <Player>
            <source src={link} />
          </Player>
        </div> 
      })}
     </div>
  }
}
user_23939240
Related