Skip to main content

How to preview video before uploading in javascript

You can preview the video before uploading it on the server using javascript.

  • Preview video before uploading jquery

    HTML Code

    <input id="file-input" type="file" accept="video/*">
<video id="video" width="300" height="300" controls></video>

    JavaScript

    <script>
const input = document.getElementById('file-input');
const video = document.getElementById('video');
const videoSource = document.createElement('source');

input.addEventListener('change', function() {
  const files = this.files || [];

  if (!files.length) return;
  
  const reader = new FileReader();

  reader.onload = function (e) {
    videoSource.setAttribute('src', e.target.result);
    video.appendChild(videoSource);
    video.load();
    video.play();
  };
  
  reader.onprogress = function (e) {
    console.log('progress: ', Math.round((e.loaded * 100) / e.total));
  };
  
  reader.readAsDataURL(files[0]);
});
</script>

     

    You can preview the video before uploading it to the server using javascript. We have input type file HTML element to get the video from the user and video tag to display it in your browser using javascript code.

    • Back to code snippet queries related javascript

Bootstrap CodeIgniter Css Html Javascript Jquery Laravel Nodejs Php Python Sql Typescript Wordpress
Random Code Snippet Queries: Javascript
Share on social media

Copyright © w3codegenerator.com

All Rights Reserved.