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.
