How do you preview a local video file on a website without a backend?

Question

Is it possible to create a URL that hosts a local image file using URL.createObjectURL(fileName) and from there, you can just drop that URL in an img tag. How would you do something similar, but for video files, so that you could preview video files on a website before sending it to the backend?

Answer 1

You can do this like,

$(document).on("change", ".file_video", function(evt) {
  var $source = $('#video_here');
  $source[0].src = URL.createObjectURL(this.files[0]);
  $source.parent()[0].load();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<video width="500" controls>
  <source src="my_video.mp4" id="video_here">
</video>

<input type="file" name="file[]" class="file_video" accept="video/*">

You can get more details from here get in detail

Answer 2

Try

file:///C:/my/path/video.mpg