Question 274110 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – How can I use the response data after an axios call to display video in React?

I use react for frontend.
I get an mp4 video file from an axios call:

const onGetVideo = () => {
axiosClient.get(`/solution/video.mp4`)
  .then(({ data }) => {
    console.log(data)
    // data here is simple binary data 
  })
  .catch(err => {
    console.log(err)
  })
}

How can I use the response (data) to display the video on the website?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I have found this solution:

    const [videoSource, setVideoSource] = useState(null);

const onGetVideo = () => {
  axiosClient.get(`/solution/video.mp4`, { responseType: 'blob' })
    .then(({ data }) => {
      const blobUrl = URL.createObjectURL(data);
      setVideoSource(blobUrl);
    })
    .catch(err => {
      console.log(err);
    });

useEffect(() => {onGetVideo()}, []);

return( ...
    <video controls>
      <source src={videoSource} type="video/mp4" />
      Your browser does not support the video tag.
    </video> ...)

    We have to specify responseType: 'blob' to get binary data.

    When the data is received, we create a Blob URL using URL.createObjectURL(data) and set it as the video source.


  2. 0

    could you share the format of the data "response"

    if you data response is, in this format then,

    data = [{video_url: ""}]
    then try this,

    const video = data[0].video_url // (here your video url is stored ini the video variable)

    install: npm install react-player
    add this line in your file : import ReactPlayer from ‘react-player’
    add this code:

    Try using the above code. This should solve your Question

    Happy Coding!!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search