How to pass api response data to video player

Admin 1
Viewed 422

Here is the data i got from API and its array.

0: "/home/vinsent/Videos/Fraction_webapp/FastAPI-RedisDB/videos/video13.mp4"
1: "/home/vinsent/Videos/Fraction_webapp/FastAPI-RedisDB/videos/video22.mp4"
2: "/home/vinsent/Videos/Fraction_webapp/FastAPI-RedisDB/videos/video6.mp4"
3: "/home/vinsent/Videos/Fraction_webapp/FastAPI-RedisDB/videos/video19.mp4"
4: "/home/vinsent/Videos/Fraction_webapp/FastAPI-RedisDB/videos/video9.mp4"

now i want to convert this as video URl and pass to react video player

My code :

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

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

        this.state = {
            key: '',
            
            // 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.data)
        })
        .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>
            {this.state.data.map((videoURL) => <video src={videoURL}></video>)}
            </div>
    
            </div></center>
        )
    }
}
export default PostForm

How to convert this text as URl and play on video player

For more code refernce:click here

Expecting answers for :

1.How to fetch api data on webpage

2.Convert into URL , and pass to play on videoplayer

reactjs frontend node.js api javascript
1 Answers

/home/vinsent/ looks like a user directory on a Linux computer. If you're trying to convert that to a URL that can be used on some other computer, then you'll need to serve those files with a web server.

How you set up your web server will determine what the corresponding URLs will look like. For example (assuming that your web server is on the domain foo.bar):

  • If you serve the content of /home/vinsent/Videos/Fraction_webapp/FastAPI-RedisDB/videos/ from the root of the web server, then your URLs will look like https://foo.bar/video19.mp4.
  • If you serve the content of /home/vinsent/Videos/ from the root of the web server, then your URLs will look like https://foo.bar/Fraction_webapp/FastAPI-RedisDB/videos/video19.mp4.
  • If you serve the content of /home/vinsent/Videos/Fraction_webapp/FastAPI-RedisDB/videos/ from the mycoolvideosohyeah subdirectory of the web server, then your URLs will look like https://foo.bar/mycoolvideosohyeah/video19.mp4.

Once you've chosen how to host the videos, and you've hosted them, the resulting URLs (for example, https://foo.bar/mycoolvideosohyeah/video19.mp4) should be usable in any video player, whether it's this React video player that you're using, or a standard HTML video tag's src attribute, or any standalone video playback software. They should remain usable for as long as you continue to host the videos.

user_3262420
Related