Note:

1. i dont want to use any static path.
2. it should be dynamic source, based on user target a file from local, it will able to take path and make that as video component source.
3. i have tried, but everytime it returns me with some c:/fakepath/file.mp4

CodePudding user response：

Sure, browser won't let you see full file path, it's not save to let js for parse the user's file system.

You need FileReader to use files from local.

HTML:

<input id="input" type="file">

<video id="video" src="" controls></video>

JS:

input.oninput =  (event) => {

  // creating reader
  const reader = new FileReader();

  // after files load finish
  reader.addEventListener('load', (event) => {
    video.src = event.target.result;
  });

  // start load file
  reader.readAsDataURL(event.target.files[0]);
};