How to play local (hard-drive) video file with HTML5 video tag with JavaScript?

Spread the love

To play local (hard-drive) video file with HTML5 video tag with JavaScript, we add a file input.

For instance, we write

<input type="file" accept="video/*" /><br />
<video controls></video>

to add the file and video elements.

Then we write

const playSelectedFile = (event) => {
  const [file] = event.target.files;
  const fileURL = URL.createObjectURL(file);
  const videoNode = document.querySelector("video");
  videoNode.src = fileURL;
};

const inputNode = document.querySelector("input");
inputNode.addEventListener("change", playSelectedFile, false);

to add a change listener to the file input with addEventListener.

In the playSelectedFile listener, we get the select file with event.target.files.

And then we create a object URL string from the file.

Next, we get the video element with querySelector.

And we set the src property of the video to fileURL to load it.

Leave a Reply

Your email address will not be published. Required fields are marked *