1

I have a video named video.mp4 I want to play it in a video/source tag in HTML, I tried too many answers from other questions and none of them worked.

var URL = this.window.URL || this.window.webkitURL;
var file = new Blob(["./video.mp4"], {"type": "video\/mp4"});
var value = URL.createObjectURL(file);

console.log(value);
video.src = value;

When I tried the code above it printed a blob, but when I want to play the video it doesn't work and shows this error in the console:

Uncaught (in promise) DOMException: The element has no supported sources.

The same thing happens when trying the answers for this question

Navspace
  • 101
  • 6

1 Answers1

1

If you are using react you could use package reactPlayer for the same and play the video.

<ReactPlayer playing url='video1.mp4'
                height='500px'
                width='800px'
                controls='true'
            />

Otherwise if you want to play from blob then:

import React, { useState } from "react"; 
import ReactPlayer from "react-player";

 const [videoFilePath, setVideoFilePath] = useState(null);


const handleVideoUpload = (event) => {
setVideoFilePath(URL.createObjectURL(event.target.files[0]));
};
....

<input type="file" onChange={handleVideoUpload} />
...

<ReactPlayer url={videoFilePath} width="100%" height="100%" controls={true} />
Siddharth Gangwar
  • 11
  • 1